"use client";

import { useParams, useRouter } from "next/navigation";
import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { ActionMenu } from "@/components/layout/ActionMenu";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { ListExportActions } from "@/components/export/ListExportActions";
import { SchoolSetupNav } from "@/components/school/SchoolSetupNav";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, TimeInput, normalizeClockTime } from "@/components/ui/Field";
import { ApiError, apiDelete, apiGet, apiPatch, apiPost } from "@/lib/api";

interface PeriodRow {
  id: number;
  title: string;
  starts_at: string;
  ends_at: string;
  order: number;
}

interface SchoolDetail {
  id: number;
  name: string;
}

const EMPTY_START = "07:30";
const PERIOD_DURATION_MINUTES = 90;

function addClockMinutes(time: string, minutes: number): string {
  const normalized = normalizeClockTime(time) || EMPTY_START;
  const [hour, minute] = normalized.split(":").map(Number);
  const wrapped = (((hour * 60 + minute + minutes) % (24 * 60)) + 24 * 60) % (24 * 60);
  const nextHour = Math.floor(wrapped / 60);
  const nextMinute = wrapped % 60;
  return `${String(nextHour).padStart(2, "0")}:${String(nextMinute).padStart(2, "0")}`;
}

function insertFormTimes(periods: PeriodRow[]) {
  const last = periods[periods.length - 1];
  const starts_at = last
    ? normalizeClockTime(last.ends_at) || last.ends_at
    : EMPTY_START;
  return { starts_at, ends_at: addClockMinutes(starts_at, PERIOD_DURATION_MINUTES) };
}

export default function SchoolPeriodsPage() {
  const { id } = useParams<{ id: string }>();
  const branchId = Number(id);
  const router = useRouter();

  const [school, setSchool] = useState<SchoolDetail | null>(null);
  const [rows, setRows] = useState<PeriodRow[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [editId, setEditId] = useState<number | null>(null);
  const [form, setForm] = useState({ title: "", ...insertFormTimes([]) });

  const load = useCallback(async (): Promise<PeriodRow[] | null> => {
    setLoading(true);
    try {
      const [detail, periods] = await Promise.all([
        apiGet<SchoolDetail>(`/branches/${branchId}/directory`),
        apiGet<PeriodRow[]>(`/class-periods?branch_id=${branchId}`),
      ]);
      setSchool(detail);
      setRows(periods);
      setError(null);
      return periods;
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
      return null;
    } finally {
      setLoading(false);
    }
  }, [branchId]);

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

  useEffect(() => {
    if (editId !== null) return;
    setForm((current) => ({ ...current, ...insertFormTimes(rows) }));
  }, [rows, editId]);

  const resetForm = () => {
    setEditId(null);
    setForm({ title: "", ...insertFormTimes(rows) });
  };

  const save = async () => {
    setError(null);
    setMessage(null);
    try {
      if (editId) {
        await apiPatch(`/class-periods/${editId}`, form);
        setMessage("زنگ به‌روزرسانی شد.");
      } else {
        await apiPost("/class-periods", { ...form, branch_id: branchId });
        setMessage("زنگ ثبت شد.");
      }
      const periods = await load();
      setEditId(null);
      if (periods) {
        setForm({ title: "", ...insertFormTimes(periods) });
      }
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره");
    }
  };

  const remove = async (periodId: number) => {
    if (!confirm("آیا از حذف این زنگ مطمئن هستید؟")) return;
    await apiDelete(`/class-periods/${periodId}`);
    await load();
  };

  return (
    <AppShell
      title="فهرست زنگ‌ها"
      subtitle={school?.name ?? `مدرسه #${branchId}`}
      breadcrumbLabels={{ school: school?.name }}
    >
      {error ? <Alert tone="error">{error}</Alert> : null}
      {message ? <Alert tone="success">{message}</Alert> : null}

      <SchoolSetupNav branchId={branchId} current="periods" />

      <div className="mb-4 rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-5">
          <Field label="عنوان">
            <Input
              value={form.title}
              placeholder="مثلاً زنگ اول"
              onChange={(e) => setForm({ ...form, title: e.target.value })}
            />
          </Field>
          <Field label="ساعت شروع کلاس" hint="فرمت ۲۴ ساعته">
            <TimeInput
              value={form.starts_at}
              onChange={(starts_at) =>
                setForm({
                  ...form,
                  starts_at,
                  ...(editId
                    ? {}
                    : { ends_at: addClockMinutes(starts_at, PERIOD_DURATION_MINUTES) }),
                })
              }
            />
          </Field>
          <Field label="ساعت پایان کلاس" hint="فرمت ۲۴ ساعته">
            <TimeInput
              value={form.ends_at}
              onChange={(ends_at) => setForm({ ...form, ends_at })}
            />
          </Field>
          <div className="flex items-end gap-2 sm:col-span-3 lg:col-span-2">
            <Button onClick={save}>{editId ? "ذخیره" : "ثبت"}</Button>
            {editId ? <Button variant="secondary" onClick={resetForm}>انصراف</Button> : null}
            <Button variant="secondary" onClick={() => router.push(`/schools/${branchId}/dashboard`)}>
              بازگشت
            </Button>
          </div>
        </div>
      </div>

      <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
          <h2 className="text-sm font-bold">فهرست زنگ‌های کلاسی</h2>
          <ListExportActions
            exportPath="/class-periods/export"
            filters={{ branch_id: branchId }}
            contextKeys={["branch_id"]}
            filenameBase="class-periods-export"
            onError={setError}
          />
        </div>
        <DataTable
          loading={loading}
          columns={[
            { key: "idx", label: "#" },
            { key: "title", label: "عنوان" },
            { key: "start", label: "ساعت شروع" },
            { key: "end", label: "ساعت پایان" },
            { key: "ops", label: "عملیات" },
          ]}
        >
          {rows.length === 0 ? (
            <DataTableEmpty colSpan={5} />
          ) : (
            rows.map((row, i) => (
              <tr key={row.id} className="hover:bg-slate-50">
                <td className="px-3 py-3">{i + 1}</td>
                <td className="px-3 py-3 font-medium">{row.title}</td>
                <td className="px-3 py-3 font-mono text-xs">{row.starts_at}</td>
                <td className="px-3 py-3 font-mono text-xs">{row.ends_at}</td>
                <td className="px-3 py-3">
                  <ActionMenu
                    widthClass="w-36"
                    items={[
                      {
                        label: "ویرایش",
                        onClick: () => {
                          setEditId(row.id);
                          setForm({
                            title: row.title,
                            starts_at: normalizeClockTime(row.starts_at) || row.starts_at,
                            ends_at: normalizeClockTime(row.ends_at) || row.ends_at,
                          });
                        },
                      },
                      {
                        label: "حذف",
                        tone: "danger",
                        onClick: () => remove(row.id),
                      },
                    ]}
                  />
                </td>
              </tr>
            ))
          )}
        </DataTable>
      </div>
    </AppShell>
  );
}