"use client";

import { useRouter } from "next/navigation";
import { useParams } from "@/lib/route-params";
import { useCallback, useEffect, useMemo, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { PageHeader } from "@/components/layout/PageHeader";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { ApiError, apiGet, apiPut } from "@/lib/api";
import { OnlineClassProvider } from "@/lib/online-class-drivers";
import { isHoldingAdmin } from "@/lib/permissions";
import { getActiveBranchId } from "@/lib/session-context";
import type { EducationStage } from "@/lib/types";

type SchoolType = "boys" | "girls" | "" | null;

type AccessBranch = {
  id: number;
  name: string;
  code: string;
  school_type?: SchoolType;
  is_active: boolean;
  grade_levels?: Array<{
    id: number;
    name: string;
    education_stage_id?: number;
    education_stage?: { id: number; name: string } | null;
  }>;
};

const emptyFilters = {
  q: "",
  education_stage_id: "",
  grade_level_id: "",
  school_type: "",
  selection: "",
};

function schoolTypeLabel(type: SchoolType): string | null {
  if (type === "boys") return "پسرانه";
  if (type === "girls") return "دخترانه";
  return null;
}

function stageIds(branch: AccessBranch): number[] {
  const ids = new Set<number>();
  for (const grade of branch.grade_levels ?? []) {
    const id = grade.education_stage?.id ?? grade.education_stage_id;
    if (id != null) ids.add(id);
  }
  return [...ids];
}

function stageLabels(branch: AccessBranch): string[] {
  const names = new Map<number, string>();
  for (const grade of branch.grade_levels ?? []) {
    const stage = grade.education_stage;
    if (stage) names.set(stage.id, stage.name);
  }
  return [...names.values()];
}

export default function VirtualClassProviderAccessPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const [provider, setProvider] = useState<OnlineClassProvider | null>(null);
  const [branches, setBranches] = useState<AccessBranch[]>([]);
  const [stages, setStages] = useState<EducationStage[]>([]);
  const [selected, setSelected] = useState<number[]>([]);
  const [filters, setFilters] = useState(emptyFilters);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [rows, branchRows, stageRows] = await Promise.all([
        apiGet<OnlineClassProvider[]>("/online-class/providers"),
        apiGet<AccessBranch[]>("/branches?with_grades=1"),
        apiGet<EducationStage[]>("/education-stages").catch(() => [] as EducationStage[]),
      ]);
      const found = (Array.isArray(rows) ? rows : []).find((row) => String(row.id) === id) ?? null;
      const ownBranchId = isHoldingAdmin() ? null : getActiveBranchId();
      const visibleBranches = (Array.isArray(branchRows) ? branchRows : []).filter((branch) =>
        ownBranchId == null ? true : branch.id === ownBranchId,
      );
      const initialSelected = found?.branch_ids ?? [];
      setProvider(found);
      setBranches(visibleBranches);
      setStages(Array.isArray(stageRows) ? stageRows : []);
      setSelected(ownBranchId == null ? initialSelected : initialSelected.filter((branchId) => branchId === ownBranchId));
      if (!found) setError("سرور پیدا نشد.");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری دسترسی");
    } finally {
      setLoading(false);
    }
  }, [id]);

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

  const gradeOptions = useMemo(() => {
    if (filters.education_stage_id) {
      const stage = stages.find((item) => String(item.id) === filters.education_stage_id);
      return stage?.grade_levels ?? [];
    }
    return stages.flatMap((stage) => stage.grade_levels ?? []);
  }, [filters.education_stage_id, stages]);

  const filtered = useMemo(() => {
    const query = filters.q.trim().toLowerCase();
    return branches.filter((branch) => {
      if (query) {
        const haystack = `${branch.name} ${branch.code}`.toLowerCase();
        if (!haystack.includes(query)) return false;
      }
      if (filters.school_type && branch.school_type !== filters.school_type) return false;
      if (filters.education_stage_id && !stageIds(branch).includes(Number(filters.education_stage_id))) {
        return false;
      }
      if (
        filters.grade_level_id &&
        !(branch.grade_levels ?? []).some((grade) => String(grade.id) === filters.grade_level_id)
      ) {
        return false;
      }
      if (filters.selection === "selected" && !selected.includes(branch.id)) return false;
      if (filters.selection === "unselected" && selected.includes(branch.id)) return false;
      return true;
    });
  }, [branches, filters, selected]);

  const filtersActive =
    filters.q !== "" ||
    filters.education_stage_id !== "" ||
    filters.grade_level_id !== "" ||
    filters.school_type !== "" ||
    filters.selection !== "";

  const visibleIds = filtered.map((branch) => branch.id);
  const allVisibleSelected = visibleIds.length > 0 && visibleIds.every((branchId) => selected.includes(branchId));

  const toggle = (branchId: number) => {
    setSelected((current) =>
      current.includes(branchId) ? current.filter((item) => item !== branchId) : [...current, branchId],
    );
  };

  const setVisibleSelected = (checked: boolean) => {
    setSelected((current) => {
      if (checked) return Array.from(new Set([...current, ...visibleIds]));
      const hidden = new Set(visibleIds);
      return current.filter((item) => !hidden.has(item));
    });
  };

  const save = async () => {
    if (!provider) return;
    if (!isHoldingAdmin()) {
      const ownBranchId = getActiveBranchId();
      if (!ownBranchId || selected.length !== 1 || selected[0] !== ownBranchId) {
        setError("دسترسی این سرور فقط برای مدرسه خودتان قابل ثبت است.");
        return;
      }
    }
    setSaving(true);
    setError(null);
    try {
      await apiPut(`/online-class/providers/${provider.id}/branches`, { branch_ids: selected });
      router.push("/virtual-classes/providers");
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره دسترسی");
    } finally {
      setSaving(false);
    }
  };

  return (
    <AppShell title={provider ? `دسترسی ${provider.title}` : "دسترسی"} showBack={false}>
      <PageHeader
        title={provider ? `دسترسی ${provider.title}` : "دسترسی"}
        actions={
          <Button variant="secondary" onClick={() => router.push("/virtual-classes/providers")}>
            بازگشت
          </Button>
        }
      />

      {error ? <Alert tone="error">{error}</Alert> : null}
      {loading ? <p className="text-sm text-[var(--muted)]">در حال بارگذاری…</p> : null}

      {!loading && provider ? (
        <div className="rounded-xl border bg-white">
          <div className="grid gap-3 border-b p-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
            <Field label="جستجو">
              <Input
                value={filters.q}
                placeholder="نام یا کد شعبه"
                onChange={(event) => setFilters((current) => ({ ...current, q: event.target.value }))}
              />
            </Field>
            <Field label="مقطع">
              <Select
                value={filters.education_stage_id}
                onChange={(event) =>
                  setFilters((current) => ({
                    ...current,
                    education_stage_id: event.target.value,
                    grade_level_id: "",
                  }))
                }
              >
                <option value="">همه</option>
                {stages.map((stage) => (
                  <option key={stage.id} value={stage.id}>
                    {stage.name}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="پایه">
              <Select
                value={filters.grade_level_id}
                onChange={(event) =>
                  setFilters((current) => ({ ...current, grade_level_id: event.target.value }))
                }
              >
                <option value="">همه</option>
                {gradeOptions.map((grade) => (
                  <option key={grade.id} value={grade.id}>
                    {grade.name}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="جنسیت">
              <Select
                value={filters.school_type}
                onChange={(event) =>
                  setFilters((current) => ({ ...current, school_type: event.target.value }))
                }
              >
                <option value="">همه</option>
                <option value="boys">پسرانه</option>
                <option value="girls">دخترانه</option>
              </Select>
            </Field>
            <Field label="وضعیت انتخاب">
              <Select
                value={filters.selection}
                onChange={(event) => setFilters((current) => ({ ...current, selection: event.target.value }))}
              >
                <option value="">همه</option>
                <option value="selected">فقط انتخاب‌شده</option>
                <option value="unselected">فقط انتخاب‌نشده</option>
              </Select>
            </Field>
          </div>

          <div className="flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3 text-sm">
            <p className="text-[var(--muted)]">
              {filtered.length} شعبه در این نما
              <span className="mx-2">·</span>
              {selected.length} انتخاب‌شده از {branches.length}
            </p>
            <div className="flex flex-wrap gap-2">
              {filtersActive ? (
                <Button type="button" variant="ghost" onClick={() => setFilters(emptyFilters)}>
                  پاک کردن فیلترها
                </Button>
              ) : null}
              <Button
                type="button"
                variant="secondary"
                disabled={visibleIds.length === 0 || allVisibleSelected}
                onClick={() => setVisibleSelected(true)}
              >
                انتخاب نتایج
              </Button>
              <Button
                type="button"
                variant="secondary"
                disabled={!visibleIds.some((branchId) => selected.includes(branchId))}
                onClick={() => setVisibleSelected(false)}
              >
                برداشتن نتایج
              </Button>
            </div>
          </div>

          <div className="p-4">
            {filtered.length > 0 ? (
              <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-5">
                {filtered.map((branch) => {
                  const checked = selected.includes(branch.id);
                  const gender = schoolTypeLabel(branch.school_type);
                  const stagesForBranch = stageLabels(branch);
                  return (
                    <button
                      key={branch.id}
                      type="button"
                      aria-pressed={checked}
                      onClick={() => toggle(branch.id)}
                      className={`flex min-h-36 flex-col rounded-2xl border p-3 text-right transition ${
                        checked
                          ? "border-[var(--primary)] bg-[color-mix(in_srgb,var(--primary)_8%,white)] shadow-sm ring-2 ring-[color-mix(in_srgb,var(--primary)_28%,transparent)]"
                          : "border-[var(--border)] bg-slate-50/60 hover:border-[color-mix(in_srgb,var(--primary)_45%,var(--border))] hover:bg-white hover:shadow-sm"
                      }`}
                    >
                      <span className="flex items-start justify-between gap-2">
                        <span className="line-clamp-2 text-sm font-semibold leading-6 text-slate-900">
                          {branch.name}
                        </span>
                        {checked ? (
                          <span className="shrink-0 rounded-full bg-[var(--primary)] px-2 py-0.5 text-[11px] font-medium text-white">
                            انتخاب شد
                          </span>
                        ) : null}
                      </span>
                      <span className="mt-1 font-mono text-xs text-[var(--muted)]">{branch.code}</span>
                      <span className="mt-auto flex flex-wrap gap-1 pt-3">
                        {gender ? (
                          <span
                            className={`rounded-full px-2 py-0.5 text-[11px] ${
                              branch.school_type === "girls"
                                ? "bg-rose-100 text-rose-800"
                                : "bg-sky-100 text-sky-800"
                            }`}
                          >
                            {gender}
                          </span>
                        ) : null}
                        {stagesForBranch.map((stage) => (
                          <span
                            key={stage}
                            className="rounded-full bg-white px-2 py-0.5 text-[11px] text-slate-600 ring-1 ring-slate-200"
                          >
                            {stage}
                          </span>
                        ))}
                        {!branch.is_active ? (
                          <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] text-amber-800">
                            غیرفعال
                          </span>
                        ) : null}
                        {stagesForBranch.length === 0 ? (
                          <span className="text-[11px] text-[var(--muted)]">مقطع ثبت نشده</span>
                        ) : null}
                      </span>
                    </button>
                  );
                })}
              </div>
            ) : (
              <p className="py-8 text-center text-sm text-[var(--muted)]">
                {branches.length === 0 ? "شعبه‌ای برای انتخاب نیست." : "شعبه‌ای با این فیلتر پیدا نشد."}
              </p>
            )}
          </div>

          <div className="border-t p-4">
            <Button type="button" onClick={save} disabled={saving}>
              {saving ? "در حال ذخیره…" : "ذخیره دسترسی"}
            </Button>
          </div>
        </div>
      ) : null}
    </AppShell>
  );
}