"use client";

import { useEffect, useMemo, useState } from "react";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input } from "@/components/ui/Field";
import { ApiError, apiGet, apiPut } from "@/lib/api";
import { ReportCardItem, ReportCardSubjectRow, ReportCardWarning } from "@/lib/report-cards";

export function ReportCardWarningsPanel({ cardId }: { cardId: number }) {
  const [card, setCard] = useState<ReportCardItem | null>(null);
  const [gradeId, setGradeId] = useState<number | null>(null);
  const [rows, setRows] = useState<ReportCardSubjectRow[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      setLoading(true);
      try {
        const detail = await apiGet<ReportCardItem>(`/report-cards/${cardId}`);
        if (cancelled) return;
        setCard(detail);
        const subjects = detail.subjects ?? [];
        setRows(subjects);
        setGradeId(subjects[0]?.grade_level_id ?? null);
        setError(null);
      } catch (err) {
        if (!cancelled) {
          setError(err instanceof ApiError ? err.message : "خطا در بارگذاری هشدارها");
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [cardId]);

  const grades = useMemo(() => {
    const map = new Map<number, string>();
    for (const row of rows) {
      if (!map.has(row.grade_level_id)) {
        map.set(row.grade_level_id, row.grade_level?.name ?? `پایه ${row.grade_level_id}`);
      }
    }
    return Array.from(map, ([id, name]) => ({ id, name }));
  }, [rows]);

  const gradeRows = rows.filter((row) => row.grade_level_id === gradeId && row.included);

  const upsert = (subjectId: number, patch: Partial<ReportCardSubjectRow>) => {
    setRows((prev) =>
      prev.map((row) =>
        row.subject_id === subjectId && row.grade_level_id === gradeId
          ? { ...row, ...patch }
          : row,
      ),
    );
  };

  const save = async () => {
    if (!gradeId) return;
    setSaving(true);
    setError(null);
    setSuccess(null);
    try {
      const payload = rows
        .filter((row) => row.grade_level_id === gradeId)
        .map((row) => ({
          grade_level_id: row.grade_level_id,
          subject_id: row.subject_id,
          included: Boolean(row.included),
          warnings_enabled: Boolean(row.warnings_enabled),
          warnings: row.warnings_enabled ? row.warnings : [],
        }));
      const updated = await apiPut<ReportCardItem>(`/report-cards/${cardId}/subjects`, {
        subjects: payload,
      });
      setCard(updated);
      setRows(updated.subjects ?? rows);
      setSuccess("هشدارها ذخیره شد.");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره هشدارها");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="space-y-4">
      {error ? <Alert tone="error">{error}</Alert> : null}
      {success ? <Alert tone="success">{success}</Alert> : null}

      <div className="flex justify-end">
        <Button onClick={save} disabled={saving || loading || !gradeId}>ذخیره هشدارها</Button>
      </div>

      {loading ? (
        <p className="text-sm text-[var(--muted)]">در حال بارگذاری…</p>
      ) : !card || rows.length === 0 ? (
        <Alert tone="info">
          {card?.kind === "official"
            ? "هنوز درس رسمی فعالی در برنامه درسی هلدینگ تعریف نشده است. پس از تعریف درس توسط مدیر کل، اینجا نمایش داده می‌شود."
            : "ابتدا از صفحه مدیریت کارنامه، دروس را انتخاب کنید."}
        </Alert>
      ) : (
        <div className="space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
          <Field label="پایه">
            <select
              className="w-full rounded-xl border border-[var(--border)] px-3 py-2 text-sm"
              value={gradeId ?? ""}
              onChange={(e) => setGradeId(Number(e.target.value))}
            >
              {grades.map((grade) => (
                <option key={grade.id} value={grade.id}>{grade.name}</option>
              ))}
            </select>
          </Field>

          {gradeRows.length === 0 ? (
            <Alert tone="info">برای این پایه درس انتخاب‌شده‌ای نیست.</Alert>
          ) : (
            gradeRows.map((row) => (
              <div key={`${row.grade_level_id}-${row.subject_id}`} className="rounded-xl border border-[var(--border)] p-3">
                <div className="mb-2 font-medium">{row.subject?.name ?? `درس ${row.subject_id}`}</div>
                <label className="mb-2 flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={row.warnings_enabled}
                    onChange={(e) => upsert(row.subject_id, { warnings_enabled: e.target.checked })}
                  />
                  نمرات هشدار
                </label>
                {row.warnings_enabled
                  ? row.warnings.map((warning, index) => (
                      <div key={index} className="mb-2 grid gap-2 rounded-lg border border-[var(--border)] bg-slate-50 p-2 md:grid-cols-4">
                        <Field label="عنوان یا علامت">
                          <Input
                            value={warning.label}
                            onChange={(e) => {
                              const warnings = [...row.warnings];
                              warnings[index] = { ...warning, label: e.target.value };
                              upsert(row.subject_id, { warnings });
                            }}
                          />
                        </Field>
                        <Field label="حداقل نمره">
                          <Input
                            type="number"
                            value={String(warning.min_score)}
                            onChange={(e) => {
                              const warnings = [...row.warnings];
                              warnings[index] = { ...warning, min_score: Number(e.target.value) };
                              upsert(row.subject_id, { warnings });
                            }}
                          />
                        </Field>
                        <Field label="حداکثر نمره">
                          <Input
                            type="number"
                            value={String(warning.max_score)}
                            onChange={(e) => {
                              const warnings = [...row.warnings];
                              warnings[index] = { ...warning, max_score: Number(e.target.value) };
                              upsert(row.subject_id, { warnings });
                            }}
                          />
                        </Field>
                        <Field label="رنگ">
                          <div className="flex gap-2">
                            <input
                              type="color"
                              value={warning.color || "#ef4444"}
                              onChange={(e) => {
                                const warnings = [...row.warnings];
                                warnings[index] = { ...warning, color: e.target.value };
                                upsert(row.subject_id, { warnings });
                              }}
                            />
                            <Button
                              variant="danger"
                              className="!px-3 !py-1 text-xs"
                              onClick={() => {
                                const warnings = row.warnings.filter((_, i) => i !== index);
                                upsert(row.subject_id, { warnings });
                              }}
                            >
                              حذف
                            </Button>
                          </div>
                        </Field>
                      </div>
                    ))
                  : null}
                {row.warnings_enabled ? (
                  <Button
                    variant="secondary"
                    onClick={() => {
                      const warnings: ReportCardWarning[] = [
                        ...row.warnings,
                        {
                          label: "نیاز به تلاش بیشتر",
                          min_score: 0,
                          max_score: 10,
                          color: "#ef4444",
                        },
                      ];
                      upsert(row.subject_id, { warnings, included: true });
                    }}
                  >
                    + آیتم جدید
                  </Button>
                ) : null}
              </div>
            ))
          )}
        </div>
      )}
    </div>
  );
}