"use client";

import { useMemo, useState } from "react";
import { useLang } from "@/context/LanguageContext";
import {
  Alert,
  Button,
  Select,
  EmptyState,
  Input,
  Modal,
  PageHeader,
  PageLoader,
} from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { ACADEMIC_CATEGORIES } from "@/lib/constants";
import { IconAcademic, IconEdit, IconLayers, IconPlus, IconTrash } from "@/components/icons";
import { emsConfirm } from "@/components/ConfirmDialog";

interface Item {
  id: number;
  category: string;
  name: string;
  nameBn: string;
  code: string | null;
  isActive: boolean;
  selectionCount: number;
  institutionId: number | null;
  ownerName: string | null;
}

export default function CentralAcademicPage() {
  const { t, locale } = useLang();
  const { data, loading, reload } = useApi<{ items: Item[] }>("/api/central/academic");
  const { data: instData } = useApi<{ institutions: { id: number; name: string; parentId: number | null }[] }>(
    "/api/central/institutions"
  );
  const [category, setCategory] = useState<string>("CLASS");
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<Item | null>(null);
  const [form, setForm] = useState({ name: "", nameBn: "", code: "", isActive: true, institutionId: "" });
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [saving, setSaving] = useState(false);

  const items = useMemo(
    () => (data ? data.items.filter((i) => i.category === category) : []),
    [data, category]
  );

  function openCreate() {
    setEditing(null);
    setForm({ name: "", nameBn: "", code: "", isActive: true, institutionId: "" });
    setModalOpen(true);
  }

  function openEdit(item: Item) {
    setEditing(item);
    setForm({
      name: item.name,
      nameBn: item.nameBn,
      code: item.code ?? "",
      isActive: item.isActive,
      institutionId: item.institutionId ? String(item.institutionId) : "",
    });
    setModalOpen(true);
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setMessage(null);
    try {
      if (editing) {
        await api(`/api/central/academic/${editing.id}`, {
          method: "PUT",
          body: JSON.stringify({ ...form, institutionId: form.institutionId || null }),
        });
        setMessage({ type: "success", text: t.central.academicPage.itemUpdated });
      } else {
        await api("/api/central/academic", {
          method: "POST",
          body: JSON.stringify({ ...form, category, institutionId: form.institutionId || null }),
        });
        setMessage({ type: "success", text: t.central.academicPage.itemCreated });
      }
      setModalOpen(false);
      reload();
    } catch (err) {
      setMessage({
        type: "error",
        text:
          err instanceof Error && err.message === "ITEM_EXISTS"
            ? t.central.academicPage.itemExists
            : t.common.tryAgain,
      });
    } finally {
      setSaving(false);
    }
  }

  const [syncing, setSyncing] = useState(false);

  async function syncTemplates() {
    setSyncing(true);
    setMessage(null);
    try {
      const res = await api<{ classesCreated: number; subjectsCreated: number }>(
        "/api/central/academic/sync-templates",
        { method: "POST" },
      );
      setMessage({
        type: "success",
        text: t.central.academicPage.syncDone
          .replace("{c}", String(res.classesCreated))
          .replace("{s}", String(res.subjectsCreated)),
      });
      reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setSyncing(false);
    }
  }

  async function remove(item: Item) {
    if (!(await emsConfirm({ message: t.common.confirmDelete, danger: true }))) return;
    try {
      await api(`/api/central/academic/${item.id}`, { method: "DELETE" });
      setMessage({ type: "success", text: t.common.deletedSuccessfully });
      reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    }
  }

  return (
    <div>
      <PageHeader
        title={t.central.academicPage.title}
        subtitle={t.central.academicPage.subtitle}
        action={
          <div className="d-flex gap-2 flex-wrap">
            <Button variant="secondary" onClick={syncTemplates} loading={syncing}>
              <IconLayers className="svg-16" />
              <span className="ms-1">{t.central.academicPage.syncTemplates}</span>
            </Button>
            <Button onClick={openCreate}>
              <IconPlus className="svg-16" />
              <span className="ms-1">{t.central.academicPage.newItem}</span>
            </Button>
          </div>
        }
      />

      {message && (
        <div className="mb-4">
          <Alert type={message.type} onClose={() => setMessage(null)}>{message.text}</Alert>
        </div>
      )}

      {/* Category tabs (Bootstrap nav-pills) */}
      <ul className="nav nav-tabs mb-4" role="tablist">
        {ACADEMIC_CATEGORIES.map((cat) => {
          const count = data?.items.filter((i) => i.category === cat).length ?? 0;
          return (
            <li className="nav-item" key={cat}>
              <button
                className={`nav-link d-flex align-items-center gap-2 ${category === cat ? "active" : ""}`}
                onClick={() => setCategory(cat)}
                type="button"
              >
                <span className={`ems-cat ems-cat-${cat}`} style={{ width: 26, height: 26 }}>
                  <IconAcademic className="d-block" />
                </span>
                {t.categories[cat as keyof typeof t.categories]}
                <span className={`badge ${category === cat ? "badge-light text-dark" : "badge-secondary"}`}>
                  {count}
                </span>
              </button>
            </li>
          );
        })}
      </ul>

      {loading ? (
        <PageLoader text={t.common.loading} />
      ) : items.length === 0 ? (
        <div className="card">
          <EmptyState icon={<IconAcademic />} title={t.common.noData} />
        </div>
      ) : (
        <div className="row g-3">
          {items.map((item) => (
            <div className="col-xl-3 col-lg-4 col-sm-6" key={item.id}>
              <div className={`card h-100 ${!item.isActive ? "opacity-50" : ""}`}>
                <div className="card-body d-flex align-items-center gap-3 py-3">
                  <span className={`ems-cat ems-cat-${item.category} flex-shrink-0`} style={{ width: 42, height: 42 }}>
                    <IconAcademic />
                  </span>
                  <div className="media-body min-w-0">
                    <h6 className="mb-0 f-w-700 text-truncate d-flex align-items-center gap-2">
                      {locale === "bn" ? item.nameBn : item.name}
                      {item.code && <span className="ems-roll-badge">{item.code}</span>}
                    </h6>
                    <p className="mb-0 ems-fs-11 text-muted text-truncate">
                      {locale === "bn" ? item.name : item.nameBn} · {t.central.academicPage.selectedBy} {item.selectionCount}
                    </p>
                    {item.ownerName && (
                      <span className="badge badge-primary mt-1" title={item.ownerName}>
                        {item.ownerName}
                      </span>
                    )}
                    {!item.isActive && <span className="badge badge-secondary mt-1">{t.common.inactive}</span>}
                  </div>
                  <div className="d-flex flex-column gap-1 ms-auto">
                    <button className="btn btn-soft-primary btn-sm p-1" onClick={() => openEdit(item)} type="button">
                      <IconEdit className="svg-16" />
                    </button>
                    <button className="btn btn-soft-danger btn-sm p-1" onClick={() => remove(item)} type="button">
                      <IconTrash className="svg-16" />
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Create/Edit modal */}
      <Modal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        title={
          editing
            ? t.central.academicPage.editItem
            : `${t.central.academicPage.addItem} — ${t.categories[category as keyof typeof t.categories]}`
        }
      >
        <form className="theme-form" onSubmit={handleSubmit}>
          <Input
            label={t.central.academicPage.itemName}
            required
            value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
            placeholder="e.g. Class 9 / Science"
          />
          <Input
            label={t.central.academicPage.itemNameBn}
            value={form.nameBn}
            onChange={(e) => setForm({ ...form, nameBn: e.target.value })}
            placeholder="যেমন: নবম শ্রেণি / বিজ্ঞান"
          />
          <Input
            label={category === "SUBJECT" ? t.portal.academicPage.subjectCode : t.portal.academicPage.subjectCode + " (" + t.common.optional + ")"}
            value={form.code}
            onChange={(e) => setForm({ ...form, code: e.target.value })}
            placeholder="e.g. PHY-101"
          />
          <Select
            label={t.central.academicPage.linkedInstitution}
            value={form.institutionId}
            onChange={(e) => setForm({ ...form, institutionId: e.target.value })}
          >
            <option value="">{t.central.academicPage.globalItem}</option>
            {(instData?.institutions ?? []).map((i) => (
              <option key={i.id} value={i.id}>
                {i.parentId ? `↳ ${i.name}` : i.name}
              </option>
            ))}
          </Select>
          <p className="ems-fs-11 text-muted mt-n2">{t.central.academicPage.linkHint}</p>
          {editing && (
            <div className="form-group mb-3">
              <div className="form-check">
                <input
                  className="form-check-input"
                  type="checkbox"
                  id="itemActive"
                  checked={form.isActive}
                  onChange={(e) => setForm({ ...form, isActive: e.target.checked })}
                />
                <label className="form-check-label f-w-600" htmlFor="itemActive">
                  {t.common.active}
                </label>
              </div>
            </div>
          )}
          <div className="d-flex justify-content-end gap-2 pt-2">
            <Button type="button" variant="secondary" onClick={() => setModalOpen(false)}>
              {t.common.cancel}
            </Button>
            <Button type="submit" loading={saving}>
              {editing ? t.common.saveChanges : t.central.academicPage.addItem}
            </Button>
          </div>
        </form>
      </Modal>
    </div>
  );
}