"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { ListExportActions } from "@/components/export/ListExportActions";
import { Pagination } from "@/components/layout/Pagination";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Select, Textarea } from "@/components/ui/Field";
import { CardListSkeleton } from "@/components/ui/Skeleton";
import {
  AdminUser,
  ApiError,
  Paginated,
  apiGet,
  apiPatch,
  apiPost,
  getStoredUser,
} from "@/lib/api";

interface Incident {
  id: number;
  incident_type: string;
  description?: string | null;
  points: number;
  status: string;
  final_points?: number | null;
  student_profile?: { id: number; first_name: string; last_name: string };
}

const STATUS_LABELS: Record<string, string> = {
  pending: "در انتظار",
  approved: "تأیید شده",
  rejected: "رد شده",
};

export default function DisciplinePage() {
  const user = useMemo(() => getStoredUser<AdminUser>(), []);
  const branchId = user?.branches.find((b) => b.is_primary)?.id ?? user?.branches[0]?.id;

  const [items, setItems] = useState<Incident[]>([]);
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [selected, setSelected] = useState<Incident | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [type, setType] = useState("تأخیر");
  const [description, setDescription] = useState("");
  const [studentId, setStudentId] = useState("");
  const [reviewNote, setReviewNote] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({ status: "pending" });
      params.set("page", String(page));
      params.set("per_page", "20");
      if (branchId) params.set("branch_id", String(branchId));
      const result = await apiGet<Paginated<Incident>>(`/discipline/incidents?${params}`);
      setItems(result.data);
      setLastPage(result.last_page);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [branchId, page]);

  useEffect(() => {
    load();
  }, [load]);

  const exportFilters = {
    status: "pending",
    branch_id: branchId,
  };

  const report = async () => {
    if (!branchId || !studentId) return;
    setSubmitting(true);
    try {
      await apiPost("/discipline/incidents", {
        branch_id: branchId,
        student_profile_id: Number(studentId),
        incident_type: type,
        description,
        points: -1,
      });
      setDescription("");
      setStudentId("");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSubmitting(false);
    }
  };

  const review = async (status: "approved" | "rejected") => {
    if (!selected) return;
    setSubmitting(true);
    try {
      await apiPatch(`/discipline/incidents/${selected.id}/review`, {
        status,
        review_note: reviewNote,
        notify_parent: status === "approved",
      });
      setSelected(null);
      setReviewNote("");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <AppShell title="انضباط" subtitle="گزارش و تأیید">
      {error ? <Alert tone="error">{error}</Alert> : null}

      <div className="mb-4 space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
        <div className="text-sm font-bold">ثبت گزارش (معلم)</div>
        <Field label="شناسه پرونده دانش‌آموز">
          <input
            value={studentId}
            onChange={(e) => setStudentId(e.target.value)}
            className="w-full rounded-xl border border-[var(--border)] px-3 py-2 text-sm"
            placeholder="sis_student_profiles.id"
          />
        </Field>
        <Field label="نوع">
          <Select value={type} onChange={(e) => setType(e.target.value)}>
            <option value="تأخیر">تأخیر</option>
            <option value="رفتار نامناسب">رفتار نامناسب</option>
            <option value="غیبت">غیبت</option>
          </Select>
        </Field>
        <Field label="توضیح"><Textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={3} /></Field>
        <Button onClick={report} disabled={submitting}>ثبت گزارش</Button>
      </div>

      {loading ? (
        <CardListSkeleton rows={5} />
      ) : (
        <>
          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
            <p className="text-sm font-bold">گزارش‌های در انتظار</p>
            <ListExportActions
              exportPath="/discipline/incidents/export"
              filters={exportFilters}
              contextKeys={["branch_id"]}
              filenameBase="discipline-incidents-export"
              onError={setError}
            />
          </div>
          <div className="space-y-2">
          {items.map((item) => (
            <button
              key={item.id}
              type="button"
              onClick={() => setSelected(item)}
              className={`w-full rounded-2xl border p-4 text-right ${selected?.id === item.id ? "border-primary bg-primary/5" : "border-[var(--border)] bg-white"}`}
            >
              <div className="font-semibold">
                {item.student_profile ? `${item.student_profile.first_name} ${item.student_profile.last_name}` : `#${item.id}`}
              </div>
              <div className="text-xs text-[var(--muted)]">{item.incident_type} · {STATUS_LABELS[item.status] ?? item.status}</div>
            </button>
          ))}
          </div>
          <Pagination page={page} lastPage={lastPage} onPageChange={setPage} />
        </>
      )}

      {selected ? (
        <div className="mt-4 space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
          <div className="text-sm font-bold">بررسی معاون</div>
          <Field label="یادداشت"><Textarea value={reviewNote} onChange={(e) => setReviewNote(e.target.value)} rows={2} /></Field>
          <div className="flex gap-2">
            <Button onClick={() => review("approved")} disabled={submitting}>تأیید</Button>
            <Button variant="secondary" onClick={() => review("rejected")} disabled={submitting}>رد</Button>
          </div>
        </div>
      ) : null}
    </AppShell>
  );
}