"use client";
import { useEffect, useState } from "react";
import CommonTable from "@/app/components/CommonTable";
import { Prescription, Visit, money, vitalsSummary } from "../_types";
import { listPrescriptions, listVisits } from "../_api";
import { useHms } from "../layout";
import PrescribeWorkspace from "../components/PrescribeWorkspace";
import PrintView from "../components/PrintView";

export default function DoctorPanelPage() {
  const { organizationId, userId, doctor } = useHms();
  const [visits, setVisits] = useState<Visit[]>([]);
  const [activeVisit, setActiveVisit] = useState<Visit | null>(null);
  const [filter, setFilter] = useState<"registered" | "prescribed" | "referred">("registered");
  const [printing, setPrinting] = useState<{ rx: Prescription; visit: Visit } | null>(null);
  const [viewingId, setViewingId] = useState<number | null>(null);

  useEffect(() => {
    listVisits(organizationId).then(setVisits);
  }, [organizationId]);

  const onVisitUpdated = (v: Visit) => setVisits((prev) => prev.map((x) => (x.id === v.id ? v : x)));

  const viewPrescription = async (v: Visit) => {
    setViewingId(v.id);
    try {
      const rxList = await listPrescriptions(organizationId, { visit: v.id });
      if (rxList[0]) setPrinting({ rx: rxList[0], visit: v });
    } finally {
      setViewingId(null);
    }
  };

  const queue = visits.filter((v) => v.status === "registered");
  const prescribedList = visits.filter((v) => v.status === "prescribed");
  const referredList = visits.filter((v) => v.status === "referred");
  const shown = filter === "registered" ? queue : filter === "prescribed" ? prescribedList : referredList;

  const rows = shown.map((v) => ({
    id: v.id,
    cells: [
      <div key="p">
        <div className="fw-medium">{v.patient_name} <span className="text-muted fw-normal">({v.patient_gender}, {v.patient_age ?? "—"}y)</span></div>
        <div className="text-muted small">{v.code}</div>
        {v.status === "referred" && v.referred_to_name && <div className="text-info small">→ {v.referred_to_name}</div>}
        {vitalsSummary(v.vitals) && <div className="text-success small">{vitalsSummary(v.vitals)}</div>}
      </div>,
      money(v.net_amount),
      <div key="a" className="text-end text-nowrap">
        {filter === "prescribed" && (
          <button onClick={() => viewPrescription(v)} disabled={viewingId === v.id} className="btn btn-outline-primary btn-sm me-1">
            {viewingId === v.id ? "Loading…" : "View"}
          </button>
        )}
        <button onClick={() => setActiveVisit(v)} className="btn btn-primary btn-sm">
          {filter === "registered" ? "Prescribe" : "Open"}
        </button>
      </div>,
    ],
  }));

  return (
    <div>
      <div className="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
          <h5 className="mb-1">Doctor Panel</h5>
          <p className="text-muted small mb-0">Queue, prescribed and referred patients</p>
        </div>
        <span className="badge text-bg-primary">Dr. {doctor.name || "—"}</span>
      </div>

      <div className="row g-2 mb-3">
        {[
          { id: "registered" as const, label: "Queue", count: queue.length, tone: "warning" },
          { id: "prescribed" as const, label: "Prescribed", count: prescribedList.length, tone: "success" },
          { id: "referred" as const, label: "Referred", count: referredList.length, tone: "info" },
        ].map((s) => (
          <div className="col-4" key={s.id}>
            <button onClick={() => setFilter(s.id)} className={`btn w-100 ${filter === s.id ? `btn-outline-${s.tone}` : "btn-outline-secondary"}`}>
              <div className="fs-4 fw-bold">{s.count}</div>
              <div className="small text-uppercase">{s.label}</div>
            </button>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-header d-flex justify-content-between align-items-center">
          <h6 className="mb-0 small text-capitalize">{filter === "registered" ? "Waiting" : filter}</h6>
          <span className="badge text-bg-secondary">{shown.length}</span>
        </div>
        <CommonTable headers={["Patient", "Fee", ""]} rows={rows} isActionButton={false} />
      </div>

      {activeVisit && (
        <PrescribeWorkspace
          visit={activeVisit} organizationId={organizationId} doctorId={userId} doctor={doctor}
          onClose={() => setActiveVisit(null)}
          onPrint={(rx, visit) => setPrinting({ rx, visit })}
          onVisitUpdated={(v) => { onVisitUpdated(v); setActiveVisit(null); }}
        />
      )}
      {printing && <PrintView rx={printing.rx} visit={printing.visit} doctor={doctor} onClose={() => setPrinting(null)} />}
    </div>
  );
}