"use client";

import { useState } from "react";
import { useLang } from "@/context/LanguageContext";
import {
  Alert,
  Button,
  Card,
  DatePicker,
  EmptyState,
  Input,
  Modal,
  PageHeader,
  PageLoader,
  Select,
  StatCard,
  Textarea,
} from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { formatDate } from "@/lib/utils";
import { COMMITTEE_ROLES } from "@/lib/constants";
import { IconEdit, IconPlus, IconTrash, IconUserCheck, IconUsers } from "@/components/icons";
import { emsConfirm } from "@/components/ConfirmDialog";

interface MemberRow {
  id: number;
  name: string;
  ref: string | null;
  isStaff: boolean;
  role: string;
}

interface CommitteeRow {
  id: number;
  name: string;
  nameBn: string | null;
  description: string | null;
  formedDate: string | null;
  isActive: boolean;
  members: MemberRow[];
}

interface CommitteesData {
  stats: { committees: number; active: number; members: number };
  committees: CommitteeRow[];
}

interface StaffMini {
  id: number;
  employeeCode: string;
  name: string;
  status: string;
}

const emptyCommittee = {
  name: "",
  nameBn: "",
  description: "",
  formedDate: "",
};

const emptyMember = {
  committeeId: "",
  source: "STAFF",
  staffId: "",
  memberName: "",
  memberDesignation: "",
  role: "MEMBER",
};

export default function PortalCommitteesPage() {
  const { t, locale } = useLang();
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const { data, loading, reload } = useApi<CommitteesData>("/api/portal/committees");
  const { data: hrData } = useApi<{ staff: StaffMini[] }>("/api/portal/hr");

  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<CommitteeRow | null>(null);
  const [form, setForm] = useState(emptyCommittee);
  const [saving, setSaving] = useState(false);

  const [memberOpen, setMemberOpen] = useState(false);
  const [memberForm, setMemberForm] = useState(emptyMember);
  const [memberSaving, setMemberSaving] = useState(false);

  function notify(type: "success" | "error", text: string) {
    setMessage({ type, text });
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  function openCreate() {
    setEditing(null);
    setForm(emptyCommittee);
    setFormOpen(true);
  }

  function openEdit(c: CommitteeRow) {
    setEditing(c);
    setForm({
      name: c.name,
      nameBn: c.nameBn ?? "",
      description: c.description ?? "",
      formedDate: c.formedDate ?? "",
    });
    setFormOpen(true);
  }

  async function save() {
    setSaving(true);
    try {
      if (editing) {
        await api(`/api/portal/committees/${editing.id}`, { method: "PUT", body: JSON.stringify(form) });
        notify("success", t.portal.committeesPage.committeeUpdated);
      } else {
        await api("/api/portal/committees", { method: "POST", body: JSON.stringify(form) });
        notify("success", t.portal.committeesPage.committeeCreated);
      }
      setFormOpen(false);
      reload();
    } catch {
      notify("error", t.common.tryAgain);
    } finally {
      setSaving(false);
    }
  }

  async function remove(c: CommitteeRow) {
    if (!(await emsConfirm({ message: t.common.confirmDelete, danger: true }))) return;
    try {
      await api(`/api/portal/committees/${c.id}`, { method: "DELETE" });
      notify("success", t.common.deletedSuccessfully);
      reload();
    } catch {
      notify("error", t.common.tryAgain);
    }
  }

  function openAddMember(c: CommitteeRow) {
    setMemberForm({ ...emptyMember, committeeId: String(c.id) });
    setMemberOpen(true);
  }

  async function addMember() {
    setMemberSaving(true);
    try {
      await api("/api/portal/committees/members", {
        method: "POST",
        body: JSON.stringify({
          committeeId: memberForm.committeeId,
          staffId: memberForm.source === "STAFF" ? memberForm.staffId : null,
          memberName: memberForm.source === "EXTERNAL" ? memberForm.memberName : null,
          memberDesignation: memberForm.source === "EXTERNAL" ? memberForm.memberDesignation : null,
          role: memberForm.role,
        }),
      });
      setMemberOpen(false);
      reload();
      notify("success", t.portal.committeesPage.memberAdded);
    } catch {
      notify("error", t.common.tryAgain);
    } finally {
      setMemberSaving(false);
    }
  }

  async function removeMember(m: MemberRow) {
    if (!(await emsConfirm({ message: t.common.confirmDelete, danger: true }))) return;
    try {
      await api(`/api/portal/committees/members/${m.id}`, { method: "DELETE" });
      reload();
      notify("success", t.common.deletedSuccessfully);
    } catch {
      notify("error", t.common.tryAgain);
    }
  }

  if (loading) return <PageLoader text={t.common.loading} />;
  const s = data?.stats;

  return (
    <div>
      <PageHeader
        title={t.portal.committeesPage.title}
        subtitle={t.portal.committeesPage.subtitle}
        action={
          <Button onClick={openCreate}>
            <IconPlus className="svg-16" />
            <span className="ms-1">{t.portal.committeesPage.newCommittee}</span>
          </Button>
        }
      />

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

      <div className="row g-3 mb-4">
        <div className="col-xl-3 col-sm-6">
          <StatCard label={t.portal.committeesPage.totalCommittees} value={String(s?.committees ?? 0)} icon={<IconUsers />} accent="teal" />
        </div>
        <div className="col-xl-3 col-sm-6">
          <StatCard label={t.common.active} value={String(s?.active ?? 0)} icon={<IconUsers />} accent="sky" />
        </div>
        <div className="col-xl-3 col-sm-6">
          <StatCard label={t.portal.committeesPage.totalMembers} value={String(s?.members ?? 0)} icon={<IconUserCheck />} accent="purple" />
        </div>
      </div>

      {data && data.committees.length > 0 ? (
        <div className="row g-3">
          {data.committees.map((c) => (
            <div className="col-xl-6" key={c.id}>
              <Card>
                <div className="d-flex justify-content-between align-items-start gap-2">
                  <div className="min-w-0">
                    <h5 className="f-w-700 mb-1">
                      {c.name}
                      {!c.isActive && <span className="badge badge-secondary ms-2">{t.common.inactive}</span>}
                    </h5>
                    <p className="mb-1 ems-fs-12 text-muted">
                      {c.formedDate ? `${t.portal.committeesPage.formed}: ${formatDate(c.formedDate, locale)}` : ""}
                      {c.formedDate ? " · " : ""}
                      {c.members.length} {t.portal.committeesPage.membersShort}
                    </p>
                    {c.description && <p className="mb-2 ems-fs-13">{c.description}</p>}
                  </div>
                  <div className="d-flex flex-shrink-0">
                    <button className="btn btn-soft-secondary btn-sm me-1" onClick={() => openEdit(c)} type="button">
                      <IconEdit className="svg-16" />
                    </button>
                    <button className="btn btn-soft-danger btn-sm" onClick={() => remove(c)} type="button">
                      <IconTrash className="svg-16" />
                    </button>
                  </div>
                </div>

                {/* Member list */}
                <div className="d-flex flex-wrap gap-2 mb-2">
                  {c.members.map((m) => (
                    <span key={m.id} className="ems-member-chip">
                      <span className="ems-member-role">{t.committeeRoles[m.role as keyof typeof t.committeeRoles] ?? m.role}</span>
                      <span className="ems-member-name">
                        {m.name}
                        {m.ref ? <span className="text-muted"> · {m.ref}</span> : null}
                      </span>
                      <button type="button" className="ems-member-x" onClick={() => removeMember(m)} aria-label={t.common.delete}>
                        <IconTrash className="svg-12" />
                      </button>
                    </span>
                  ))}
                  {c.members.length === 0 && (
                    <span className="ems-fs-12 text-muted">{t.portal.committeesPage.noMembers}</span>
                  )}
                </div>
                <Button size="sm" variant="secondary" onClick={() => openAddMember(c)}>
                  <IconPlus className="svg-14" />
                  <span className="ms-1">{t.portal.committeesPage.addMember}</span>
                </Button>
              </Card>
            </div>
          ))}
        </div>
      ) : (
        <div className="card">
          <EmptyState
            icon={<IconUsers />}
            title={t.portal.committeesPage.noCommittees}
            action={
              <Button onClick={openCreate}>
                <IconPlus className="svg-16" />
                <span className="ms-1">{t.portal.committeesPage.newCommittee}</span>
              </Button>
            }
          />
        </div>
      )}

      {/* Committee create/edit modal */}
      <Modal
        open={formOpen}
        onClose={() => setFormOpen(false)}
        title={editing ? t.portal.committeesPage.editCommittee : t.portal.committeesPage.newCommittee}
        wide
      >
        <div className="row">
          <div className="col-md-6">
            <Input label={t.portal.committeesPage.committeeName} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
          </div>
          <div className="col-md-6">
            <Input label={t.portal.committeesPage.committeeNameBn} value={form.nameBn} onChange={(e) => setForm({ ...form, nameBn: e.target.value })} />
          </div>
          <div className="col-md-6">
            <DatePicker label={`${t.portal.committeesPage.formed} (${t.common.optional})`} value={form.formedDate} onChange={(e) => setForm({ ...form, formedDate: e.target.value })} />
          </div>
          <div className="col-md-12">
            <Textarea label={t.portal.complaintsPage.descriptionLabel} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
          </div>
        </div>
        <div className="d-flex justify-content-end gap-2">
          <Button variant="secondary" onClick={() => setFormOpen(false)}>
            {t.common.cancel}
          </Button>
          <Button onClick={save} loading={saving} disabled={!form.name.trim()}>
            {t.common.save}
          </Button>
        </div>
      </Modal>

      {/* Add member modal */}
      <Modal open={memberOpen} onClose={() => setMemberOpen(false)} title={t.portal.committeesPage.addMember} wide>
        <Select
          label={t.portal.committeesPage.memberSource}
          value={memberForm.source}
          onChange={(e) => setMemberForm({ ...memberForm, source: e.target.value, staffId: "", memberName: "", memberDesignation: "" })}
        >
          <option value="STAFF">{t.portal.committeesPage.sourceStaff}</option>
          <option value="EXTERNAL">{t.portal.committeesPage.sourceExternal}</option>
        </Select>
        {memberForm.source === "STAFF" ? (
          <Select label={t.common.employee} value={memberForm.staffId} onChange={(e) => setMemberForm({ ...memberForm, staffId: e.target.value })}>
            <option value="">— {t.common.filter} —</option>
            {(hrData?.staff ?? [])
              .filter((st) => st.status === "ACTIVE")
              .map((st) => (
                <option key={st.id} value={st.id}>
                  {st.employeeCode} — {st.name}
                </option>
              ))}
          </Select>
        ) : (
          <div className="row">
            <div className="col-md-6">
              <Input label={t.common.name} value={memberForm.memberName} onChange={(e) => setMemberForm({ ...memberForm, memberName: e.target.value })} />
            </div>
            <div className="col-md-6">
              <Input label={t.common.designation} value={memberForm.memberDesignation} onChange={(e) => setMemberForm({ ...memberForm, memberDesignation: e.target.value })} />
            </div>
          </div>
        )}
        <Select label={t.portal.committeesPage.roleLabel} value={memberForm.role} onChange={(e) => setMemberForm({ ...memberForm, role: e.target.value })}>
          {COMMITTEE_ROLES.map((r) => (
            <option key={r} value={r}>
              {t.committeeRoles[r]}
            </option>
          ))}
        </Select>
        <div className="d-flex justify-content-end gap-2">
          <Button variant="secondary" onClick={() => setMemberOpen(false)}>
            {t.common.cancel}
          </Button>
          <Button
            onClick={addMember}
            loading={memberSaving}
            disabled={memberForm.source === "STAFF" ? !memberForm.staffId : !memberForm.memberName.trim()}
          >
            {t.common.save}
          </Button>
        </div>
      </Modal>
    </div>
  );
}