"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 { TeacherModal } from "@/components/teacher/ui/TeacherModal";
import { ApiError, apiGet } from "@/lib/api";

export interface ShareTargetClass {
  id: number;
  label: string;
  name: string;
  code?: string | null;
  branch_id: number;
  branch_name?: string | null;
  grade_level_id?: number | null;
  grade_level_name?: string | null;
  study_field_id?: number | null;
  study_field_name?: string | null;
  academic_year_id?: number | null;
  academic_year_title?: string | null;
  subjects: Array<{ id: number; name?: string | null }>;
}

interface ShareTargetsResponse {
  classes: ShareTargetClass[];
  filters: {
    branches: Array<{ id: number; name: string }>;
    grade_levels: Array<{ id: number; name: string }>;
    study_fields: Array<{ id: number | null; name: string }>;
    subjects: Array<{ id: number; name?: string | null }>;
    academic_years: Array<{ id: number; name: string }>;
  };
}

export function ResourceClassPickerModal({
  open,
  onClose,
  selectedIds,
  lockedIds = [],
  onConfirm,
}: {
  open: boolean;
  onClose: () => void;
  selectedIds: number[];
  lockedIds?: number[];
  onConfirm: (ids: number[]) => void;
}) {
  const [data, setData] = useState<ShareTargetsResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [draftIds, setDraftIds] = useState<number[]>([]);
  const [branchId, setBranchId] = useState("");
  const [gradeId, setGradeId] = useState("");
  const [fieldName, setFieldName] = useState("");
  const [subjectId, setSubjectId] = useState("");
  const [classQuery, setClassQuery] = useState("");

  useEffect(() => {
    if (!open) return;
    setDraftIds(selectedIds);
    setError(null);
    setLoading(true);
    void apiGet<ShareTargetsResponse>("/teacher/resource-share-targets")
      .then(setData)
      .catch((err) => setError(err instanceof ApiError ? err.message : "خطا در بارگذاری کلاس‌ها"))
      .finally(() => setLoading(false));
  }, [open, selectedIds]);

  const filtered = useMemo(() => {
    const rows = data?.classes ?? [];
    return rows.filter((row) => {
      if (branchId && String(row.branch_id) !== branchId) return false;
      if (gradeId && String(row.grade_level_id) !== gradeId) return false;
      if (fieldName && (row.study_field_name || "") !== fieldName) return false;
      if (subjectId && !row.subjects.some((s) => String(s.id) === subjectId)) return false;
      if (classQuery.trim()) {
        const q = classQuery.trim();
        const hay = `${row.label} ${row.name} ${row.code ?? ""}`;
        if (!hay.includes(q)) return false;
      }
      return true;
    });
  }, [branchId, classQuery, data?.classes, fieldName, gradeId, subjectId]);

  const toggle = (id: number) => {
    if (lockedIds.includes(id)) return;
    setDraftIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
  };

  const selectFiltered = () => {
    const ids = new Set(draftIds);
    filtered.forEach((row) => ids.add(row.id));
    setDraftIds([...ids]);
  };

  const clearFiltered = () => {
    const filteredIds = new Set(filtered.map((row) => row.id));
    setDraftIds(draftIds.filter((id) => lockedIds.includes(id) || !filteredIds.has(id)));
  };

  return (
    <TeacherModal
      open={open}
      onClose={onClose}
      title="اشتراک‌گذاری با کلاس‌ها"
      subtitle="این فایل برای دانش‌آموزان کدام کلاس‌ها قابل مشاهده باشد؟"
      size="xl"
      footer={
        <div className="flex flex-wrap justify-end gap-2">
          <Button variant="secondary" onClick={onClose}>
            انصراف
          </Button>
          <Button
            onClick={() => {
              onConfirm(draftIds.length ? draftIds : lockedIds);
              onClose();
            }}
          >
            تأیید کلاس‌ها
          </Button>
        </div>
      }
    >
      <div className="space-y-4">
        {error ? <Alert tone="error">{error}</Alert> : null}
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          <Field label="مدرسه">
            <select
              className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm"
              value={branchId}
              onChange={(e) => setBranchId(e.target.value)}
            >
              <option value="">همه</option>
              {(data?.filters.branches ?? []).map((item) => (
                <option key={item.id} value={item.id}>
                  {item.name}
                </option>
              ))}
            </select>
          </Field>
          <Field label="پایه">
            <select
              className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm"
              value={gradeId}
              onChange={(e) => setGradeId(e.target.value)}
            >
              <option value="">همه</option>
              {(data?.filters.grade_levels ?? []).map((item) => (
                <option key={item.id} value={item.id}>
                  {item.name}
                </option>
              ))}
            </select>
          </Field>
          <Field label="رشته">
            <select
              className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm"
              value={fieldName}
              onChange={(e) => setFieldName(e.target.value)}
            >
              <option value="">همه</option>
              {(data?.filters.study_fields ?? []).map((item) => (
                <option key={`${item.id}-${item.name}`} value={item.name}>
                  {item.name}
                </option>
              ))}
            </select>
          </Field>
          <Field label="درس">
            <select
              className="h-10 w-full rounded-xl border border-slate-200 bg-white px-3 text-sm"
              value={subjectId}
              onChange={(e) => setSubjectId(e.target.value)}
            >
              <option value="">همه</option>
              {(data?.filters.subjects ?? []).map((item) => (
                <option key={item.id} value={item.id}>
                  {item.name}
                </option>
              ))}
            </select>
          </Field>
          <Field label="کلاس">
            <Input
              value={classQuery}
              onChange={(e) => setClassQuery(e.target.value)}
              placeholder="جستجوی نام کلاس…"
            />
          </Field>
        </div>

        <div className="flex flex-wrap gap-2">
          <Button variant="secondary" onClick={selectFiltered} disabled={filtered.length === 0}>
            انتخاب همه
          </Button>
          <Button variant="secondary" onClick={clearFiltered}>
            انتخاب هیچ‌کدام
          </Button>
          <span className="self-center text-xs text-slate-500">{draftIds.length} کلاس انتخاب شده</span>
        </div>

        {loading ? (
          <p className="text-sm text-slate-500">در حال بارگذاری کلاس‌ها…</p>
        ) : filtered.length === 0 ? (
          <p className="rounded-xl bg-slate-50 px-3 py-6 text-center text-sm text-slate-500">
            کلاسی با این فیلترها یافت نشد.
          </p>
        ) : (
          <ul className="max-h-64 space-y-1 overflow-y-auto rounded-xl border border-slate-200 p-2">
            {filtered.map((row) => {
              const locked = lockedIds.includes(row.id);
              const checked = draftIds.includes(row.id);
              return (
                <li key={row.id}>
                  <label className="flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 hover:bg-slate-50">
                    <input
                      type="checkbox"
                      checked={checked}
                      disabled={locked}
                      onChange={() => toggle(row.id)}
                      className="h-4 w-4 accent-teal-600"
                    />
                    <span className="text-sm text-slate-800">
                      {row.label}
                      {locked ? (
                        <span className="mr-2 text-xs text-slate-400">(کلاس فعلی)</span>
                      ) : null}
                    </span>
                  </label>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </TeacherModal>
  );
}