"use client";

import { useState } from "react";
import { useLang } from "@/context/LanguageContext";
import {
  Alert,
  Button,
  EmptyState,
  Input,
  Modal,
  PageHeader,
  PageLoader,
  Pagination,
  Select,
  Textarea,
  usePagination,
} from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { formatDate } from "@/lib/utils";
import { IconClipboard, IconPhone, IconPlus } from "@/components/icons";

interface Inquiry {
  id: number;
  studentName: string;
  guardianName: string | null;
  phone: string;
  note: string | null;
  status: string;
  createdAt: string;
  classItemId: number | null;
  classItem: { name: string; nameBn: string } | null;
}

interface ClassItem {
  id: number;
  name: string;
  nameBn: string;
}

const STATUS_STYLE: Record<string, string> = {
  NEW: "badge-primary",
  CONTACTED: "badge-warning",
  ADMITTED: "badge-success",
  CLOSED: "badge-secondary",
};

export default function PortalInquiriesPage() {
  const { t, locale } = useLang();
  const { data, loading, reload } = useApi<{ inquiries: Inquiry[] }>("/api/portal/inquiries");
  const [modalOpen, setModalOpen] = useState(false);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [form, setForm] = useState({
    studentName: "",
    guardianName: "",
    phone: "",
    classItemId: "",
    note: "",
  });

  // class list comes from the optional-subjects endpoint (classes are shared)
  const { data: poolData } = useApi<{ classes: ClassItem[] }>("/api/portal/optional-subjects");
  const pager = usePagination(data?.inquiries ?? [], 10);

  const statusLabel: Record<string, string> = {
    NEW: t.portal.inquiriesPage.statusNew,
    CONTACTED: t.portal.inquiriesPage.statusContacted,
    ADMITTED: t.portal.inquiriesPage.statusAdmitted,
    CLOSED: t.portal.inquiriesPage.statusClosed,
  };

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    setMessage(null);
    try {
      await api("/api/portal/inquiries", {
        method: "POST",
        body: JSON.stringify({ ...form, classItemId: Number(form.classItemId) || null }),
      });
      setMessage({ type: "success", text: t.portal.inquiriesPage.inquiryCreated });
      setModalOpen(false);
      setForm({ studentName: "", guardianName: "", phone: "", classItemId: "", note: "" });
      reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setSaving(false);
    }
  }

  async function setStatus(inquiry: Inquiry, status: string) {
    try {
      await api(`/api/portal/inquiries/${inquiry.id}`, {
        method: "PATCH",
        body: JSON.stringify({ status }),
      });
      setMessage({ type: "success", text: t.portal.inquiriesPage.statusUpdated });
      reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    }
  }

  const counts = (data?.inquiries ?? []).reduce<Record<string, number>>((acc, i) => {
    acc[i.status] = (acc[i.status] ?? 0) + 1;
    return acc;
  }, {});

  return (
    <div>
      <PageHeader
        title={t.portal.inquiriesPage.title}
        subtitle={t.portal.inquiriesPage.subtitle}
        action={
          <Button onClick={() => setModalOpen(true)}>
            <IconPlus className="svg-16" />
            <span className="ms-1">{t.portal.inquiriesPage.newInquiry}</span>
          </Button>
        }
      />

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

      {/* status summary chips */}
      <div className="d-flex flex-wrap gap-2 mb-4">
        {["NEW", "CONTACTED", "ADMITTED", "CLOSED"].map((s) => (
          <span key={s} className={`badge ${STATUS_STYLE[s]} d-inline-flex align-items-center gap-1 px-3 py-2`}>
            {statusLabel[s]}
            <span className="f-w-800">{counts[s] ?? 0}</span>
          </span>
        ))}
      </div>

      {loading ? (
        <PageLoader text={t.common.loading} />
      ) : !data || data.inquiries.length === 0 ? (
        <div className="card">
          <EmptyState icon={<IconClipboard />} title={t.portal.inquiriesPage.noInquiries} />
        </div>
      ) : (
        <div className="card">
          <div className="table-responsive">
            <table className="table table-hover align-middle mb-0">
              <thead className="ems-table-head">
                <tr>
                  <th>{t.portal.inquiriesPage.studentName}</th>
                  <th>{t.portal.inquiriesPage.phone}</th>
                  <th>{t.portal.inquiriesPage.classInterested}</th>
                  <th>{t.portal.inquiriesPage.note}</th>
                  <th>{t.common.date}</th>
                  <th>{t.portal.inquiriesPage.statusLabel}</th>
                  <th className="text-end">{t.common.actions}</th>
                </tr>
              </thead>
              <tbody>
                {pager.paged.map((q) => (
                  <tr key={q.id}>
                    <td>
                      <p className="mb-0 f-w-700">{q.studentName}</p>
                      {q.guardianName && (
                        <p className="mb-0 ems-fs-11 text-muted">{q.guardianName}</p>
                      )}
                    </td>
                    <td>
                      <a href={`tel:${q.phone}`} className="d-inline-flex align-items-center gap-1 f-w-600">
                        <IconPhone className="svg-14" />
                        {q.phone}
                      </a>
                    </td>
                    <td className="ems-fs-12">
                      {q.classItem ? (locale === "bn" ? q.classItem.nameBn : q.classItem.name) : "—"}
                    </td>
                    <td style={{ maxWidth: 200 }}>
                      <p className="mb-0 ems-fs-12 text-muted text-truncate" title={q.note ?? ""}>
                        {q.note ?? "—"}
                      </p>
                    </td>
                    <td className="ems-fs-12 text-muted">{formatDate(q.createdAt, locale)}</td>
                    <td>
                      <span className={`badge ${STATUS_STYLE[q.status] ?? "badge-secondary"}`}>
                        {statusLabel[q.status] ?? q.status}
                      </span>
                    </td>
                    <td className="text-end">
                      <div className="d-inline-flex gap-1">
                        {q.status === "NEW" && (
                          <Button size="sm" variant="warning" onClick={() => setStatus(q, "CONTACTED")}>
                            {t.portal.inquiriesPage.markContacted}
                          </Button>
                        )}
                        {(q.status === "NEW" || q.status === "CONTACTED") && (
                          <Button size="sm" variant="success" onClick={() => setStatus(q, "ADMITTED")}>
                            {t.portal.inquiriesPage.markAdmitted}
                          </Button>
                        )}
                        {q.status !== "CLOSED" && q.status !== "ADMITTED" && (
                          <Button size="sm" variant="secondary" onClick={() => setStatus(q, "CLOSED")}>
                            {t.portal.inquiriesPage.closeInquiry}
                          </Button>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <Pagination {...pager} onPageChange={pager.setPage} onSizeChange={pager.setSize} />
        </div>
      )}

      {/* New inquiry modal — wide + scrollable so it always fits the screen */}
      <Modal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        title={t.portal.inquiriesPage.newInquiry}
        wide
      >
        <form className="theme-form" onSubmit={handleSubmit}>
          <div className="row">
            <div className="col-md-6">
              <Input
                label={t.portal.inquiriesPage.studentName}
                required
                value={form.studentName}
                onChange={(e) => setForm({ ...form, studentName: e.target.value })}
              />
            </div>
            <div className="col-md-6">
              <Input
                label={t.portal.inquiriesPage.guardianName}
                value={form.guardianName}
                onChange={(e) => setForm({ ...form, guardianName: e.target.value })}
              />
            </div>
            <div className="col-md-6">
              <Input
                label={t.portal.inquiriesPage.phone}
                required
                value={form.phone}
                onChange={(e) => setForm({ ...form, phone: e.target.value })}
                placeholder="01XXXXXXXXX"
              />
            </div>
            <div className="col-md-6">
              <Select
                label={t.portal.inquiriesPage.classInterested}
                value={form.classItemId}
                onChange={(e) => setForm({ ...form, classItemId: e.target.value })}
              >
                <option value="">—</option>
                {(poolData?.classes ?? []).map((c) => (
                  <option key={c.id} value={c.id}>
                    {locale === "bn" ? c.nameBn : c.name}
                  </option>
                ))}
              </Select>
            </div>
            <div className="col-12">
              <Textarea
                label={t.portal.inquiriesPage.note}
                value={form.note}
                onChange={(e) => setForm({ ...form, note: e.target.value })}
              />
            </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}>
              {t.common.save}
            </Button>
          </div>
        </form>
      </Modal>
    </div>
  );
}