"use client";

import { useEffect, useMemo, useState } from "react";
import { useLang } from "@/context/LanguageContext";
import {
  Alert,
  Button,
  EmptyState,
  Input,
  Modal,
  PageHeader,
  PageLoader,
  Pagination,
  Select,
  StatusBadge,
  usePagination,
} from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { formatDate } from "@/lib/utils";
import { IconAcademic, IconBan, IconBuilding, IconCheck, IconMap, IconPlus, IconShield, IconSparkle } from "@/components/icons";
import { ACADEMIC_CATEGORIES, EDUCATION_BOARDS } from "@/lib/constants";
import { BD_DISTRICT_NAMES, subDistrictsOf } from "@/lib/bd-locations";
import { emsConfirm } from "@/components/ConfirmDialog";
import { MenuAccessEditor } from "@/components/MenuAccessEditor";

interface Institution {
  id: number;
  name: string;
  code: string;
  type: string;
  isGovernment?: boolean;
  email: string;
  phone: string;
  address: string;
  district: string | null;
  subDistrict: string | null;
  eiin?: string | null;
  ein?: string | null;
  mpoCode?: string | null;
  boardCode?: string | null;
  educationBoard?: string | null;
  establishedYear?: number | null;
  postCode?: string | null;
  status: string;
  parentId: number | null;
  parentName: string | null;
  createdAt: string;
  referralCode?: string | null;
  users: { name: string; email: string }[];
  _count: { subscriptions: number; requests: number; academicSelections: number };
  subscriptions: { packagePlan: { name: string } | null; studentRange: string | null }[];
}

export default function CentralInstitutionsPage() {
  const { t, locale } = useLang();
  const { data, loading, reload } = useApi<{ institutions: Institution[] }>("/api/central/institutions");
  const { data: policyData, reload: policyReload } = useApi<{
    imageMaxKb: number;
    imageMaxDim: number;
    docMaxKb: number;
  }>("/api/central/upload-policy");
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [busyId, setBusyId] = useState<number | null>(null);


  // Add-branch modal
  const [branchOpen, setBranchOpen] = useState(false);
  const [branchForm, setBranchForm] = useState({
    parentId: "", name: "", email: "", phone: "", adminName: "", adminPassword: "", district: "", subDistrict: "",
  });
  const [branchSaving, setBranchSaving] = useState(false);

  const [search, setSearch] = useState("");

  const institutions = useMemo(() => {
    const all = data?.institutions ?? [];
    const q = search.trim().toLowerCase();
    if (!q) return all;
    return all.filter((i) =>
      [i.name, i.code, i.email, i.referralCode ?? "", i.users[0]?.name ?? "", i.users[0]?.email ?? "", i.district ?? "", i.parentName ?? ""]
        .some((v) => v.toLowerCase().includes(q))
    );
  }, [data, search]);
  const institutionsPager = usePagination(institutions, 10);
  const parents = (data?.institutions ?? []).filter((i) => !i.parentId);

  // Manage-classes modal
  interface LinkItem {
    id: number;
    category: string;
    name: string;
    nameBn: string;
    linked: boolean;
    ownerName: string | null;
  }
  const [classesOpen, setClassesOpen] = useState<Institution | null>(null);
  const [linkItems, setLinkItems] = useState<LinkItem[]>([]);
  const [linkChecked, setLinkChecked] = useState<Set<number>>(new Set());
  const [linkSaving, setLinkSaving] = useState(false);
  const [linkLoading, setLinkLoading] = useState(false);

  // Institution Info (BD education registry) modal
  const emptyInfo = { eiin: "", ein: "", mpoCode: "", boardCode: "", educationBoard: "", establishedYear: "", postCode: "" };
  const [infoOpen, setInfoOpen] = useState<Institution | null>(null);
  const [infoForm, setInfoForm] = useState(emptyInfo);
  const [infoSaving, setInfoSaving] = useState(false);

  function openInfo(inst: Institution) {
    setInfoOpen(inst);
    setInfoForm({
      eiin: inst.eiin ?? "",
      ein: inst.ein ?? "",
      mpoCode: inst.mpoCode ?? "",
      boardCode: inst.boardCode ?? "",
      educationBoard: inst.educationBoard ?? "",
      establishedYear: inst.establishedYear ? String(inst.establishedYear) : "",
      postCode: inst.postCode ?? "",
    });
  }

  async function saveInfo() {
    if (!infoOpen) return;
    setInfoSaving(true);
    try {
      await api(`/api/central/institutions/${infoOpen.id}`, {
        method: "PATCH",
        body: JSON.stringify({ info: infoForm }),
      });
      setInfoOpen(null);
      reload();
      setMessage({ type: "success", text: t.central.institutionsPage.infoUpdated });
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setInfoSaving(false);
    }
  }

  // Referral code management (central credential): view, set a custom code,
  // or generate a fresh one — the code links new registrations to this
  // institution and grants them the platform referral discount.
  const [refOpen, setRefOpen] = useState<Institution | null>(null);

  // Subscription menu access (central credential): manage which sidebar
  // menus an institution and its member roles may see
  const [menuAccessOpen, setMenuAccessOpen] = useState<Institution | null>(null);
  const [refDraft, setRefDraft] = useState("");
  const [refSaving, setRefSaving] = useState(false);

  function openReferral(inst: Institution) {
    setRefOpen(inst);
    setRefDraft(inst.referralCode ?? "");
  }

  async function saveReferral(value: string) {
    if (!refOpen) return;
    setRefSaving(true);
    try {
      const res = await api<{ institution: { referralCode: string | null } }>(
        `/api/central/institutions/${refOpen.id}`,
        { method: "PATCH", body: JSON.stringify({ referralCode: value }) }
      );
      const code = res.institution.referralCode ?? "";
      setRefOpen({ ...refOpen, referralCode: code || null });
      setRefDraft(code);
      setMessage({ type: "success", text: t.central.institutionsPage.referralUpdated });
      reload();
    } catch (err) {
      const msg = err instanceof Error ? err.message : "";
      setMessage({
        type: "error",
        text:
          msg === "REFERRAL_TAKEN"
            ? t.central.institutionsPage.referralTaken
            : msg === "REFERRAL_FORMAT"
              ? t.central.institutionsPage.referralFormat
              : t.common.tryAgain,
      });
    } finally {
      setRefSaving(false);
    }
  }

  async function openClasses(inst: Institution) {
    setClassesOpen(inst);
    setLinkItems([]);
    setLinkChecked(new Set());
    setLinkLoading(true);
    try {
      const res = await api<{ items: LinkItem[] }>(`/api/central/institutions/${inst.id}/classes`);
      setLinkItems(res.items);
      setLinkChecked(new Set(res.items.filter((i) => i.linked).map((i) => i.id)));
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
      setClassesOpen(null);
    } finally {
      setLinkLoading(false);
    }
  }

  function toggleLink(id: number) {
    setLinkChecked((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  async function saveClasses() {
    if (!classesOpen) return;
    setLinkSaving(true);
    try {
      await api(`/api/central/institutions/${classesOpen.id}/classes`, {
        method: "PUT",
        body: JSON.stringify({ itemIds: Array.from(linkChecked) }),
      });
      setClassesOpen(null);
      reload();
      setMessage({ type: "success", text: t.central.institutionsPage.classesUpdated });
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setLinkSaving(false);
    }
  }

  async function createBranch() {
    setBranchSaving(true);
    try {
      await api("/api/central/institutions", {
        method: "POST",
        body: JSON.stringify(branchForm),
      });
      setBranchOpen(false);
      setBranchForm({ parentId: "", name: "", email: "", phone: "", adminName: "", adminPassword: "", district: "", subDistrict: "" });
      reload();
      setMessage({ type: "success", text: t.central.institutionsPage.branchCreated });
    } catch (e) {
      const err = e instanceof Error ? e.message : "";
      setMessage({
        type: "error",
        text: err === "EMAIL_EXISTS" ? t.auth.emailExists : t.common.tryAgain,
      });
      setBranchOpen(false);
    } finally {
      setBranchSaving(false);
    }
  }

  async function setStatus(inst: Institution, status: "ACTIVE" | "SUSPENDED") {
    const confirmText =
      status === "ACTIVE" ? t.central.institutionsPage.approveConfirm : t.central.institutionsPage.suspendConfirm;
    if (!(await emsConfirm({ message: confirmText, danger: false }))) return;
    setBusyId(inst.id);
    try {
      await api(`/api/central/institutions/${inst.id}`, {
        method: "PATCH",
        body: JSON.stringify({ status }),
      });
      setMessage({ type: "success", text: t.central.institutionsPage.statusUpdated });
      reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setBusyId(null);
    }
  }

  /** flip government sector — switches the institution to the ৳3 rate tiers */
  async function toggleGovernment(inst: Institution) {
    setBusyId(inst.id);
    try {
      await api(`/api/central/institutions/${inst.id}`, {
        method: "PATCH",
        body: JSON.stringify({ isGovernment: !inst.isGovernment }),
      });
      reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setBusyId(null);
    }
  }

  return (
    <div>
      <PageHeader
        title={t.central.institutionsPage.title}
        subtitle={t.central.institutionsPage.subtitle}
        action={
          <Button onClick={() => setBranchOpen(true)} disabled={parents.length === 0}>
            <IconPlus className="svg-16" />
            <span className="ms-1">{t.central.institutionsPage.addBranch}</span>
          </Button>
        }
      />

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

      {loading ? (
        <PageLoader text={t.common.loading} />
      ) : !data || data.institutions.length === 0 ? (
        <div className="card">
          <EmptyState icon={<IconBuilding />} title={t.central.institutionsPage.noInstitutions} />
        </div>
      ) : (
        <div className="card">
          <div className="card-header">
            <div style={{ maxWidth: 280 }}>
              <Input
                placeholder={t.common.search}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
          </div>
          <div className="table-responsive">
            <table className="table table-hover align-middle mb-0">
              <thead className="ems-table-head">
                <tr>
                  <th>{t.common.institution}</th>
                  <th>{t.central.institutionsPage.admin}</th>
                  <th>{t.common.status}</th>
                  <th>{t.common.subscription}</th>
                  <th>{t.central.institutionsPage.registeredOn}</th>
                  <th className="text-end">{t.common.actions}</th>
                </tr>
              </thead>
              <tbody>
                {institutionsPager.paged.map((inst) => (
                  <tr key={inst.id}>
                    <td>
                      <div className="media align-items-center gap-3">
                        <span
                          className="rounded-circle d-flex align-items-center justify-content-center f-w-800 ems-fs-12"
                          style={{ width: 40, height: 40, background: "rgba(36,105,92,0.14)", color: "#24695c" }}
                        >
                          {inst.name.slice(0, 2).toUpperCase()}
                        </span>
                        <div className="media-body">
                          <h6 className="mb-0 f-w-700">{inst.name}</h6>
                          <div className="d-flex align-items-center gap-2 mt-1">
                            <span className={`ems-type-pill ems-type-${inst.type}`}>
                              {t.types[inst.type as keyof typeof t.types]}
                            </span>
                            {inst.isGovernment && (
                              <span className="ems-govt-badge" title={t.central.institutionsPage.governmentHint}>
                                {t.central.institutionsPage.governmentLabel}
                              </span>
                            )}
                            {inst.parentName && (
                              <span className="badge badge-secondary">
                                {t.central.institutionsPage.branchOf}: {inst.parentName}
                              </span>
                            )}
                            {inst.district && (
                              <span className="badge badge-secondary" title={t.common.subDistrict}>
                                <IconMap className="svg-16" />
                                {inst.district}
                                {inst.subDistrict ? ` — ${inst.subDistrict}` : ""}
                              </span>
                            )}
                            <code
                              className="ems-invoice-badge cursor-pointer"
                              title={t.central.institutionsPage.copyCode}
                              onClick={() => {
                                navigator.clipboard?.writeText(inst.code);
                                setMessage({ type: "success", text: t.common.copied });
                              }}
                            >
                              {inst.code}
                            </code>
                            {inst.referralCode && (
                              <code
                                className="ems-invoice-badge cursor-pointer"
                                style={{ background: "rgba(36,105,92,0.1)", color: "#24695c" }}
                                title={`${t.central.institutionsPage.referralCode} — ${t.central.institutionsPage.copyCode}`}
                                onClick={() => {
                                  navigator.clipboard?.writeText(inst.referralCode!);
                                  setMessage({ type: "success", text: t.common.copied });
                                }}
                              >
                                <IconSparkle className="svg-12" /> {inst.referralCode}
                              </code>
                            )}
                            {!!inst.eiin && (
                              <span className="badge badge-soft-teal" title={t.common.eiin}>
                                EIIN {inst.eiin}
                              </span>
                            )}
                            <span className="ems-fs-11 text-muted">{inst.email}</span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td>
                      <p className="mb-0 f-w-600 ems-fs-13">{inst.users[0]?.name ?? "—"}</p>
                      <p className="mb-0 ems-fs-11 text-muted">{inst.users[0]?.email ?? "—"}</p>
                    </td>
                    <td>
                      <StatusBadge status={inst.status} label={t.status[inst.status as keyof typeof t.status]} />
                    </td>
                    <td>
                      {inst.subscriptions[0] ? (
                        <div>
                          <p className="mb-0 f-w-600 ems-fs-12">{inst.subscriptions[0].packagePlan?.name ?? (inst.subscriptions[0].studentRange ? `${inst.subscriptions[0].studentRange} ${t.common.students}` : "—")}</p>
                          <p className="mb-0 ems-fs-11 text-muted">{inst._count.subscriptions} × {t.common.subscription}</p>
                        </div>
                      ) : (
                        <span className="text-muted">—</span>
                      )}
                    </td>
                    <td>
                      <span className="ems-fs-12 text-muted">{formatDate(inst.createdAt, locale)}</span>
                    </td>
                    <td className="text-end">
                      <div className="d-inline-flex gap-1">
                        <Button
                          size="sm"
                          variant={inst.isGovernment ? "secondary" : "outline"}
                          loading={busyId === inst.id}
                          onClick={() => toggleGovernment(inst)}
                          title={t.central.institutionsPage.governmentHint}
                        >
                          <IconBuilding className="svg-16" />
                          <span className="ms-1 d-none d-lg-inline">
                            {inst.isGovernment ? "৳3" : t.central.institutionsPage.governmentLabel}
                          </span>
                        </Button>
                        <Button size="sm" variant="secondary" onClick={() => openClasses(inst)} title={t.central.institutionsPage.manageClasses}>
                          <IconAcademic className="svg-16" />
                          <span className="ms-1 d-none d-lg-inline">{t.central.institutionsPage.manageClasses}</span>
                        </Button>
                        <Button size="sm" variant="secondary" onClick={() => openInfo(inst)} title={t.central.institutionsPage.manageInfo}>
                          <IconBuilding className="svg-16" />
                          <span className="ms-1 d-none d-lg-inline">{t.central.institutionsPage.manageInfo}</span>
                        </Button>
                        <Button
                          size="sm"
                          variant={inst.referralCode ? "primary" : "outline"}
                          onClick={() => openReferral(inst)}
                          title={t.central.institutionsPage.referralHint}
                        >
                          <IconSparkle className="svg-16" />
                          <span className="ms-1 d-none d-xl-inline">{t.central.institutionsPage.referralManage}</span>
                        </Button>
                        <Button
                          size="sm"
                          variant="secondary"
                          onClick={() => setMenuAccessOpen(inst)}
                          title={t.portal.credentials.menuAccessTitle}
                        >
                          <IconShield className="svg-16" />
                          <span className="ms-1 d-none d-xl-inline">{t.portal.credentials.menuAccess}</span>
                        </Button>
                        {inst.status === "PENDING" && (
                          <Button size="sm" variant="success" loading={busyId === inst.id} onClick={() => setStatus(inst, "ACTIVE")}>
                            <IconCheck className="svg-16" />
                            <span className="ms-1 d-none d-lg-inline">{t.central.institutionsPage.approve}</span>
                          </Button>
                        )}
                        {inst.status === "ACTIVE" && (
                          <Button size="sm" variant="danger" loading={busyId === inst.id} onClick={() => setStatus(inst, "SUSPENDED")}>
                            <IconBan className="svg-16" />
                            <span className="ms-1 d-none d-lg-inline">{t.central.institutionsPage.suspend}</span>
                          </Button>
                        )}
                        {inst.status === "SUSPENDED" && (
                          <Button size="sm" variant="success" loading={busyId === inst.id} onClick={() => setStatus(inst, "ACTIVE")}>
                            <IconCheck className="svg-16" />
                            <span className="ms-1 d-none d-lg-inline">{t.central.institutionsPage.reactivate}</span>
                          </Button>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <Pagination {...institutionsPager} onPageChange={institutionsPager.setPage} onSizeChange={institutionsPager.setSize} />
        </div>
      )}

      {/* Subscription menu access (central credential) */}
      <MenuAccessEditor
        open={!!menuAccessOpen}
        onClose={() => setMenuAccessOpen(null)}
        endpoint={menuAccessOpen ? `/api/central/institutions/${menuAccessOpen.id}/menu-access` : null}
        titleSuffix={menuAccessOpen?.name}
      />

      {/* Manage classes modal */}
      <Modal open={!!classesOpen} onClose={() => setClassesOpen(null)} title={`${t.central.institutionsPage.manageClasses} — ${classesOpen?.name ?? ""}`} wide>
        {linkLoading ? (
          <div className="text-center py-4">
            <span className="spinner-border text-primary" role="status" />
          </div>
        ) : (
          <>
            <p className="ems-fs-12 text-muted">{t.central.institutionsPage.linkHelp}</p>
            <div style={{ maxHeight: "56vh", overflowY: "auto" }} className="px-1">
              {ACADEMIC_CATEGORIES.map((cat) => {
                const catItems = linkItems.filter((i) => i.category === cat);
                if (catItems.length === 0) return null;
                return (
                  <div className="mb-3" key={cat}>
                    <h6 className="f-w-700 ems-fs-13 mb-2">
                      {t.categories[cat as keyof typeof t.categories]}
                      <span className="text-muted f-w-500 ms-1">({catItems.filter((i) => linkChecked.has(i.id)).length}/{catItems.length})</span>
                    </h6>
                    <div className="row">
                      {catItems.map((i) => (
                        <div className="col-md-4 col-6" key={i.id}>
                          <label className="d-flex align-items-start gap-2 ems-fs-13 mb-2 cursor-pointer">
                            <input
                              type="checkbox"
                              className="form-check-input mt-1"
                              checked={linkChecked.has(i.id)}
                              onChange={() => toggleLink(i.id)}
                            />
                            <span>
                              <span className="f-w-600">{locale === "bn" ? i.nameBn : i.name}</span>
                              {!i.linked && i.ownerName && (
                                <span className="d-block ems-fs-11 text-muted">
                                  {t.central.institutionsPage.linkedTo}: {i.ownerName}
                                </span>
                              )}
                            </span>
                          </label>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
            <div className="d-flex justify-content-end gap-2 pt-2">
              <Button variant="secondary" onClick={() => setClassesOpen(null)}>
                {t.common.cancel}
              </Button>
              <Button onClick={saveClasses} loading={linkSaving}>
                {t.common.saveChanges}
              </Button>
            </div>
          </>
        )}
      </Modal>

      {/* Institution Info (BD education registry) modal */}
      <Modal open={!!infoOpen} onClose={() => setInfoOpen(null)} title={`${t.central.institutionsPage.manageInfo} — ${infoOpen?.name ?? ""}`} wide>
        <p className="ems-fs-12 text-muted">{t.portal.profile.eduInfoHint}</p>
        <div className="row">
          <div className="col-md-4">
            <Input label={t.common.eiin} value={infoForm.eiin} placeholder="108452" onChange={(e) => setInfoForm({ ...infoForm, eiin: e.target.value })} />
          </div>
          <div className="col-md-4">
            <Input label={t.common.ein} value={infoForm.ein} placeholder="53010540301" onChange={(e) => setInfoForm({ ...infoForm, ein: e.target.value })} />
          </div>
          <div className="col-md-4">
            <Input label={t.common.boardCode} value={infoForm.boardCode} placeholder="1015" onChange={(e) => setInfoForm({ ...infoForm, boardCode: e.target.value })} />
          </div>
          <div className="col-md-4">
            <Select
              label={t.common.educationBoard}
              value={infoForm.educationBoard}
              onChange={(e) => setInfoForm({ ...infoForm, educationBoard: e.target.value })}
            >
              <option value="">— {t.common.select} —</option>
              {EDUCATION_BOARDS.map((b) => (
                <option key={b} value={b}>{t.boards[b]}</option>
              ))}
            </Select>
          </div>
          <div className="col-md-4">
            <Input label={t.common.mpoCode} value={infoForm.mpoCode} onChange={(e) => setInfoForm({ ...infoForm, mpoCode: e.target.value })} />
          </div>
          <div className="col-md-2">
            <Input label={t.common.establishedYear} type="number" value={infoForm.establishedYear} placeholder="1985" onChange={(e) => setInfoForm({ ...infoForm, establishedYear: e.target.value })} />
          </div>
          <div className="col-md-2">
            <Input label={t.common.postCode} value={infoForm.postCode} placeholder="1205" onChange={(e) => setInfoForm({ ...infoForm, postCode: e.target.value })} />
          </div>
        </div>
        <div className="d-flex justify-content-end gap-2">
          <Button variant="secondary" onClick={() => setInfoOpen(null)}>
            {t.common.cancel}
          </Button>
          <Button onClick={saveInfo} loading={infoSaving}>
            {t.common.saveChanges}
          </Button>
        </div>
      </Modal>

      {/* Referral code management modal */}
      <Modal open={!!refOpen} onClose={() => setRefOpen(null)} title={`${t.central.institutionsPage.referralCode} — ${refOpen?.name ?? ""}`}>
        <p className="ems-fs-12 text-muted">{t.central.institutionsPage.referralHint}</p>
        <div className="d-flex align-items-center gap-2 mb-3">
          <span className="f-w-700 ems-fs-12 text-muted">{t.central.institutionsPage.referralCurrent}:</span>
          <code
            className="ems-invoice-badge"
            style={{ background: "rgba(36,105,92,0.1)", color: "#24695c", fontSize: 14 }}
          >
            {refOpen?.referralCode ?? "—"}
          </code>
          {refOpen?.referralCode && (
            <Button
              size="sm"
              variant="secondary"
              onClick={() => {
                navigator.clipboard?.writeText(refOpen.referralCode!);
                setMessage({ type: "success", text: t.common.copied });
              }}
            >
              {t.common.copy}
            </Button>
          )}
        </div>
        <Input
          label={t.central.institutionsPage.referralCustomLabel}
          value={refDraft}
          onChange={(e) => setRefDraft(e.target.value.toUpperCase())}
          placeholder="REF-MYSCHOOL"
        />
        <div className="d-flex flex-wrap justify-content-between gap-2 pt-2">
          <Button variant="secondary" loading={refSaving} onClick={() => saveReferral("RESET")}>
            {t.central.institutionsPage.referralGenerate}
          </Button>
          <div className="d-flex gap-2">
            <Button variant="secondary" onClick={() => setRefOpen(null)}>
              {t.common.cancel}
            </Button>
            <Button
              onClick={() => saveReferral(refDraft.trim())}
              loading={refSaving}
              disabled={!refDraft.trim()}
            >
              {t.common.save}
            </Button>
          </div>
        </div>
      </Modal>

      {/* Add branch modal */}
      <Modal open={branchOpen} onClose={() => setBranchOpen(false)} title={t.central.institutionsPage.addBranch} wide>
        <Select
          label={t.central.institutionsPage.parentInstitution}
          value={branchForm.parentId}
          onChange={(e) => setBranchForm({ ...branchForm, parentId: e.target.value })}
        >
          <option value="">— {t.common.filter} —</option>
          {parents.map((i) => (
            <option key={i.id} value={i.id}>
              {i.name}
            </option>
          ))}
        </Select>
        <div className="row">
          <div className="col-md-6">
            <Input label={t.auth.institutionName} value={branchForm.name} onChange={(e) => setBranchForm({ ...branchForm, name: e.target.value })} />
          </div>
          <div className="col-md-6">
            <Input label={t.common.phone} value={branchForm.phone} onChange={(e) => setBranchForm({ ...branchForm, phone: e.target.value })} />
          </div>
          <div className="col-md-6">
            <Select
              label={t.common.district}
              value={branchForm.district}
              onChange={(e) => setBranchForm({ ...branchForm, district: e.target.value, subDistrict: "" })}
            >
              <option value="">— {t.central.institutionsPage.sameAsParent} —</option>
              {BD_DISTRICT_NAMES.map((d) => (
                <option key={d} value={d}>
                  {d}
                </option>
              ))}
            </Select>
          </div>
          <div className="col-md-6">
            <Select
              label={t.common.subDistrict}
              value={branchForm.subDistrict}
              onChange={(e) => setBranchForm({ ...branchForm, subDistrict: e.target.value })}
              disabled={!branchForm.district}
            >
              <option value="">— {t.central.institutionsPage.sameAsParent} —</option>
              {subDistrictsOf(branchForm.district).map((s) => (
                <option key={s} value={s}>
                  {s}
                </option>
              ))}
            </Select>
          </div>
          <div className="col-md-6">
            <Input label={t.auth.adminName} value={branchForm.adminName} onChange={(e) => setBranchForm({ ...branchForm, adminName: e.target.value })} />
          </div>
          <div className="col-md-6">
            <Input label={t.auth.adminEmail} type="email" value={branchForm.email} onChange={(e) => setBranchForm({ ...branchForm, email: e.target.value })} />
          </div>
          <div className="col-md-6">
            <Input label={t.common.password} type="password" value={branchForm.adminPassword} onChange={(e) => setBranchForm({ ...branchForm, adminPassword: e.target.value })} />
          </div>
        </div>
        <p className="ems-fs-11 text-muted mb-3">{t.central.institutionsPage.branchHint}</p>
        <div className="d-flex justify-content-end gap-2">
          <Button variant="secondary" onClick={() => setBranchOpen(false)}>
            {t.common.cancel}
          </Button>
          <Button
            onClick={createBranch}
            loading={branchSaving}
            disabled={!branchForm.parentId || !branchForm.name.trim() || !branchForm.email.trim() || !branchForm.adminName.trim() || branchForm.adminPassword.length < 6}
          >
            {t.common.create}
          </Button>
        </div>
      </Modal>
    </div>
  );
}