"use client";

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

interface Item {
  id: number;
  category: string;
  name: string;
  nameBn: string;
  /** per-institution display rename (Section-A → Section-Ko Shakha) */
  customName: string | null;
  customNameBn: string | null;
  code: string | null;
  owned: boolean;
  ownerName: string | null;
}

export default function PortalAcademicPage() {
  const { t, locale } = useLang();
  const catLabel = useCategoryLabel();
  const { data, loading, reload } = useApi<{ items: Item[]; selectedIds: number[]; optionalIds: number[] }>(
    "/api/portal/academic"
  );
  const [category, setCategory] = useState<string>("CLASS");
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [busyId, setBusyId] = useState<number | null>(null);

  // Add / edit own item modal
  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<Item | null>(null);
  const [form, setForm] = useState({ name: "", nameBn: "", code: "" });
  const [saving, setSaving] = useState(false);

  const selected = useMemo(() => new Set(data?.selectedIds ?? []), [data]);
  const optional = useMemo(() => new Set(data?.optionalIds ?? []), [data]);

  /** source filter — makes previously-created own items easy to find
      alongside the central catalog */
  const [source, setSource] = useState<"ALL" | "CENTRAL" | "OWN">("ALL");
  // search + sort across the category items
  const [search, setSearch] = useState("");
  const [sort, setSort] = useState<"DEFAULT" | "AZ" | "ZA">("DEFAULT");
  const categoryItems = useMemo(
    () => (data ? data.items.filter((i) => i.category === category) : []),
    [data, category]
  );
  const items = useMemo(() => {
    const q = search.trim().toLowerCase();
    const out = categoryItems.filter((i) => {
      const matchesSource = source === "ALL" ? true : source === "OWN" ? i.owned : !i.owned;
      if (!matchesSource) return false;
      if (!q) return true;
      const en = `${i.name} ${i.customName ?? ""}`.toLowerCase();
      const bn = `${i.nameBn} ${i.customNameBn ?? ""}`;
      return en.includes(q) || bn.includes(q) || (i.code ?? "").toLowerCase().includes(q);
    });
    if (sort === "DEFAULT") return out;
    const nameOf = (i: Item) => (locale === "bn" ? i.customNameBn ?? i.nameBn : i.customName ?? i.name);
    return [...out].sort((a, b) =>
      sort === "AZ" ? nameOf(a).localeCompare(nameOf(b)) : nameOf(b).localeCompare(nameOf(a))
    );
  }, [categoryItems, source, search, sort, locale]);
  const ownInCategory = categoryItems.filter((i) => i.owned).length;
  const selectedInCategory = items.filter((i) => selected.has(i.id)).length;

  async function toggle(item: Item) {
    setBusyId(item.id);
    setMessage(null);
    try {
      await api("/api/portal/academic", {
        method: "POST",
        body: JSON.stringify({ academicItemId: item.id }),
      });
      reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setBusyId(null);
    }
  }

  async function toggleOptional(item: Item) {
    setBusyId(item.id);
    setMessage(null);
    try {
      await api("/api/portal/academic", {
        method: "POST",
        body: JSON.stringify({ academicItemId: item.id, setOptional: !optional.has(item.id) }),
      });
      reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setBusyId(null);
    }
  }

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

  async function saveItem() {
    if (!editing || !form.name.trim()) return;
    setSaving(true);
    setMessage(null);
    try {
      await api(`/api/portal/academic/${editing.id}`, {
        method: "PUT",
        body: JSON.stringify(form),
      });
      setMessage({ type: "success", text: t.portal.academicPage.itemUpdated });
      setFormOpen(false);
      reload();
    } catch (e) {
      const err = e instanceof Error ? e.message : "";
      setMessage({
        type: "error",
        text: err === "Item exists" ? t.portal.academicPage.nameExists : t.common.tryAgain,
      });
    } finally {
      setSaving(false);
    }
  }

  async function deleteItem(item: Item) {
    if (!(await emsConfirm({ message: t.portal.academicPage.deleteOwnConfirm, danger: true }))) return;
    setBusyId(item.id);
    setMessage(null);
    try {
      await api(`/api/portal/academic/${item.id}`, { method: "DELETE" });
      setMessage({ type: "success", text: t.portal.academicPage.itemDeleted });
      reload();
    } catch (e) {
      const err = e instanceof Error ? e.message : "";
      setMessage({
        type: "error",
        text: err === "IN_USE" ? t.portal.academicPage.itemInUse : t.common.tryAgain,
      });
    } finally {
      setBusyId(null);
    }
  }

  // rename a selected central item for this institution only
  const [renameOpen, setRenameOpen] = useState<Item | null>(null);
  const [renameForm, setRenameForm] = useState({ name: "", nameBn: "" });
  const [renaming, setRenaming] = useState(false);

  function openRename(item: Item) {
    setRenameOpen(item);
    setRenameForm({ name: item.customName ?? "", nameBn: item.customNameBn ?? "" });
  }

  async function saveRename(reset = false) {
    if (!renameOpen) return;
    if (!reset && !renameForm.name.trim() && !renameForm.nameBn.trim()) return;
    setRenaming(true);
    setMessage(null);
    try {
      await api("/api/portal/academic", {
        method: "POST",
        body: JSON.stringify(
          reset
            ? { academicItemId: renameOpen.id, resetName: true }
            : { academicItemId: renameOpen.id, rename: renameForm }
        ),
      });
      setMessage({
        type: "success",
        text: reset ? t.portal.academicPage.nameReset : t.portal.academicPage.renamedSaved,
      });
      setRenameOpen(null);
      reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setRenaming(false);
    }
  }

  if (loading) return <PageLoader text={t.common.loading} />;

  return (
    <div>
      <PageHeader
        title={t.portal.academicPage.title}
        subtitle={t.portal.academicPage.subtitle}
      />

      {/* catalog additions are managed centrally */}
      <div className="mb-4">
        <Alert type="info">
          {t.portal.academicPage.requestNote}{" "}
          <Link href="/portal/support" className="f-w-700">
            {t.portal.academicPage.requestCta}
          </Link>
        </Alert>
      </div>

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

      {/* Category tabs (Bootstrap nav-tabs) */}
      <ul className="nav nav-tabs mb-4" role="tablist">
        {ACADEMIC_CATEGORIES.map((cat) => {
          const count = data?.items.filter((i) => i.category === cat && selected.has(i.id)).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>
                {catLabel(cat, t.categories[cat as keyof typeof t.categories])}
                <span className={`badge ${category === cat ? "badge-light text-dark" : "badge-secondary"}`}>
                  {count}
                </span>
              </button>
            </li>
          );
        })}
      </ul>

      {/* Category info */}
      <div className="d-flex flex-wrap align-items-center justify-content-between gap-2 px-3 py-2 rounded mb-4" style={{ background: "rgba(36,105,92,0.07)" }}>
        <p className="mb-0 f-w-700 ems-fs-13 ems-text-teal">
          {catLabel(category, t.categories[category as keyof typeof t.categories])}: {selectedInCategory}{" "}
          <span className="f-w-500">{t.portal.academicPage.selectedCount}</span>
        </p>
        <div className="d-flex flex-wrap align-items-center gap-2">
          <div style={{ width: 180 }}>
            <Input
              placeholder={t.portal.academicPage.searchItems}
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
          <div style={{ width: 140 }}>
            <Select value={sort} onChange={(e) => setSort(e.target.value as typeof sort)}>
              <option value="DEFAULT">{t.portal.academicPage.sortDefault}</option>
              <option value="AZ">{t.portal.academicPage.sortAZ}</option>
              <option value="ZA">{t.portal.academicPage.sortZA}</option>
            </Select>
          </div>
        </div>
        <div className="btn-group btn-group-sm" role="group">
          {([
            ["ALL", t.portal.academicPage.filterAll],
            ["CENTRAL", t.portal.academicPage.filterCentral],
            ["OWN", `${t.portal.academicPage.filterOwn} (${ownInCategory})`],
          ] as const).map(([key, label]) => (
            <button
              key={key}
              type="button"
              className={`btn f-w-600 ${source === key ? "btn-primary" : "btn-outline-secondary"}`}
              onClick={() => setSource(key)}
              disabled={key === "OWN" && ownInCategory === 0}
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      {/* Items */}
      {items.length === 0 ? (
        <div className="card">
          <EmptyState
            icon={<IconAcademic />}
            title={source === "OWN" ? t.portal.academicPage.noOwnItems : t.portal.academicPage.emptyCategory}
          />
        </div>
      ) : (
        <div className="row g-3">
          {items.map((item) => {
            const isSelected = selected.has(item.id);
            return (
              <div className="col-xl-2 col-lg-3 col-6" key={item.id}>
                <div className="ems-select-tile-hold">
                  <button
                    className={`ems-select-tile w-100 ${isSelected ? "active" : ""}`}
                    onClick={() => toggle(item)}
                    disabled={busyId === item.id || item.owned}
                    type="button"
                    title={item.owned ? t.portal.academicPage.ownBadge : t.portal.academicPage.centralBadge}
                  >
                    <span className="ems-check">
                      <IconCheck />
                    </span>
                    <span className={`ems-cat ems-cat-${item.category} mb-2`} style={{ width: 44, height: 44 }}>
                      <IconAcademic />
                    </span>
                    <p className="mb-0 f-w-700 ems-fs-13 text-dark">
                      {locale === "bn" ? item.customNameBn ?? item.nameBn : item.customName ?? item.name}
                      {(item.customName || item.customNameBn) && (
                        <span className="badge badge-soft-teal ms-1" title={t.portal.academicPage.renamedBadge}>
                          ✎
                        </span>
                      )}
                    </p>
                    <p className="mb-0 ems-fs-11 text-muted">
                      {locale === "bn" ? item.name : item.nameBn}
                    </p>
                    {category === "SUBJECT" && item.code && (
                      <span className="ems-roll-badge mt-1">{item.code}</span>
                    )}
                    {category === "SUBJECT" && isSelected && optional.has(item.id) && (
                      <span className="badge badge-warning mt-1">{t.portal.academicPage.optionalBadge}</span>
                    )}
                    <span className={`badge mt-1 ${item.owned ? "badge-primary" : "badge-secondary"}`}>
                      {item.owned ? item.ownerName ?? t.portal.academicPage.ownBadge : t.portal.academicPage.centralBadge}
                    </span>
                  </button>
                  {category === "SUBJECT" && isSelected && (
                    <div className="d-flex justify-content-center align-items-center gap-2 py-1 bg-white border-top">
                      <span className="ems-fs-11 f-w-700 text-muted">{t.portal.academicPage.optionalLabel}</span>
                      <div className="form-check form-switch mb-0">
                        <input
                          className="form-check-input"
                          type="checkbox"
                          role="switch"
                          id={"opt-" + item.id}
                          checked={optional.has(item.id)}
                          disabled={busyId === item.id}
                          onChange={() => toggleOptional(item)}
                        />
                      </div>
                    </div>
                  )}
                  {item.owned && (
                    <div className="d-flex justify-content-center gap-1 py-1 bg-white rounded-bottom border-top">
                      <button
                        className="btn btn-sm btn-soft-secondary py-1 px-2"
                        onClick={() => openEdit(item)}
                        type="button"
                        title={t.common.edit}
                      >
                        <IconEdit className="svg-14" />
                      </button>
                      <button
                        className="btn btn-sm btn-soft-danger py-1 px-2"
                        onClick={() => deleteItem(item)}
                        disabled={busyId === item.id}
                        type="button"
                        title={t.common.delete}
                      >
                        <IconTrash className="svg-14" />
                      </button>
                    </div>
                  )}
                  {isSelected && !item.owned && (
                    <div className="d-flex justify-content-center py-1 bg-white rounded-bottom border-top">
                      <button
                        className="btn btn-sm btn-soft-secondary py-1 px-2 d-flex align-items-center gap-1"
                        onClick={() => openRename(item)}
                        type="button"
                        title={t.portal.academicPage.renameItem}
                      >
                        <IconEdit className="svg-14" />
                        <span className="ems-fs-11 f-w-600">{t.portal.academicPage.renameItem}</span>
                      </button>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Add / edit own item modal */}
      <Modal
        open={formOpen}
        onClose={() => setFormOpen(false)}
        title={t.portal.academicPage.editItem}
      >
        <Input
          label={t.portal.academicPage.itemName}
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
        />
        <Input
          label={t.portal.academicPage.itemNameBn}
          value={form.nameBn}
          onChange={(e) => setForm({ ...form, nameBn: e.target.value })}
        />
        {category === "SUBJECT" && (
          <Input
            label={t.portal.academicPage.subjectCode}
            value={form.code}
            onChange={(e) => setForm({ ...form, code: e.target.value })}
            placeholder="e.g. PHY-101"
          />
        )}
        <div className="d-flex justify-content-end gap-2">
          <Button variant="secondary" onClick={() => setFormOpen(false)}>
            {t.common.cancel}
          </Button>
          <Button onClick={saveItem} loading={saving} disabled={!form.name.trim()}>
            {t.common.save}
          </Button>
        </div>
      </Modal>

      {/* Rename a selected item — per-institution display label */}
      <Modal
        open={!!renameOpen}
        onClose={() => setRenameOpen(null)}
        title={`${t.portal.academicPage.renameItem} — ${
          renameOpen ? (locale === "bn" ? renameOpen.nameBn : renameOpen.name) : ""
        }`}
      >
        {renameOpen && (
          <>
            <Input
              label={t.portal.academicPage.itemName}
              value={renameForm.name}
              placeholder={renameOpen.name}
              onChange={(e) => setRenameForm({ ...renameForm, name: e.target.value })}
            />
            <Input
              label={t.portal.academicPage.itemNameBn}
              value={renameForm.nameBn}
              placeholder={renameOpen.nameBn}
              onChange={(e) => setRenameForm({ ...renameForm, nameBn: e.target.value })}
            />
            <div className="d-flex justify-content-between gap-2 pt-2">
              {(renameOpen.customName || renameOpen.customNameBn) && (
                <Button variant="danger" loading={renaming} onClick={() => saveRename(true)}>
                  {t.portal.academicPage.resetName}
                </Button>
              )}
              <div className="d-flex justify-content-end gap-2 ms-auto">
                <Button variant="secondary" onClick={() => setRenameOpen(null)}>
                  {t.common.cancel}
                </Button>
                <Button onClick={() => saveRename(false)} loading={renaming}>
                  {t.common.save}
                </Button>
              </div>
            </div>
          </>
        )}
      </Modal>
    </div>
  );
}