"use client";
import { useEffect, useState } from "react";
import CommonInputField from "@/app/components/CommonInputField";
import CommonDropdown from "@/app/components/CommonDropdown";
import CommonSubmitButton from "@/app/components/CommonSubmitButton";
import CommonError from "@/app/components/CommonError";
import CommonTable from "@/app/components/CommonTable";
import { EMPTY_VITALS, Visit, Vitals, money, vitalsSummary } from "../_types";
import { createVisit, listVisits } from "../_api";
import { useHms } from "../layout";

const STATUS_BADGE: Record<string, string> = {
  registered: "badge-phoenix-warning", prescribed: "badge-phoenix-success",
  cancelled: "badge-phoenix-danger", referred: "badge-phoenix-info",
};

const GENDER_OPTIONS = [{ value: "male", label: "Male" }, { value: "female", label: "Female" }, { value: "other", label: "Other" }];

const VITAL_FIELDS: { k: keyof Vitals; label: string; placeholder: string }[] = [
  { k: "bp", label: "BP (mmHg)", placeholder: "120/80" }, { k: "pulse", label: "Pulse (/min)", placeholder: "78" },
  { k: "temp", label: "Temp (°F)", placeholder: "98.6" }, { k: "spo2", label: "SpO2 (%)", placeholder: "98" },
  { k: "weight", label: "Weight (kg)", placeholder: "70" }, { k: "height", label: "Height (cm)", placeholder: "170" },
  { k: "rr", label: "Resp. rate", placeholder: "16" },
];

const EMPTY_FORM = { patient_name: "", patient_phone: "", patient_gender: "male", patient_age: "", patient_address: "" };

export default function RegistrationPage() {
  const { organizationId } = useHms();
  const [visits, setVisits] = useState<Visit[]>([]);
  const [form, setForm] = useState(EMPTY_FORM);
  const [fee, setFee] = useState("");
  const [discount, setDiscount] = useState("");
  const [vitals, setVitals] = useState<Vitals>(EMPTY_VITALS());
  const [toast, setToast] = useState("");
  const [submitting, setSubmitting] = useState(false);

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

  const set = (k: keyof typeof EMPTY_FORM) => (v: string) => setForm((p) => ({ ...p, [k]: v }));
  const net = Math.max((parseFloat(fee) || 0) - (parseFloat(discount) || 0), 0);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.patient_name.trim()) return;
    setSubmitting(true);
    try {
      const visit = await createVisit({
        organization: organizationId, ...form,
        visiting_fee: fee || "0", discount: discount || "0", net_amount: String(net),
        vitals, status: "registered",
      });
      setVisits((prev) => [visit, ...prev]);
      setToast(`Registered — ${form.patient_name} added to the doctor panel.`);
      setForm(EMPTY_FORM); setFee(""); setDiscount(""); setVitals(EMPTY_VITALS());
    } finally {
      setSubmitting(false);
    }
  };

  const rows = visits.map((r) => ({
    id: r.id,
    cells: [
      <div key="p">
        <div className="fw-medium">{r.patient_name}</div>
        <div className="text-muted small">{r.code} · {r.patient_phone || "no phone"}</div>
        {vitalsSummary(r.vitals) && <div className="text-success small">{vitalsSummary(r.vitals)}</div>}
      </div>,
      money(r.visiting_fee), money(r.discount), <strong key="n">{money(r.net_amount)}</strong>,
      <span key="s" className={`badge badge-phoenix ${STATUS_BADGE[r.status] || "badge-phoenix-secondary"}`}>{r.status}</span>,
    ],
  }));

  return (
    <div className="row g-4">
      <div className="col-12 col-lg-5">
        <h5 className="mb-1">Registration</h5>
        <p className="text-muted small mb-3">Register a patient visit, record vitals, set fee &amp; discount</p>
        <CommonError message={toast} type="" />
        <form onSubmit={submit} className="border rounded p-3">
          <div className="mb-3"><CommonInputField level_name="Patient name" value={form.patient_name} on_change_data={set("patient_name")} required /></div>
          <div className="row g-2 mb-3">
            <div className="col-4"><CommonInputField level_name="Phone" value={form.patient_phone} on_change_data={set("patient_phone")} /></div>
            <div className="col-4"><CommonDropdown label="Sex" value={form.patient_gender} onChange={(e) => set("patient_gender")(e.target.value)} options={GENDER_OPTIONS} /></div>
            <div className="col-4"><CommonInputField level_name="Age" value={form.patient_age} on_change_data={set("patient_age")} /></div>
          </div>
          <div className="mb-3"><CommonInputField level_name="Address" value={form.patient_address} on_change_data={set("patient_address")} /></div>
          <div className="row g-2 mb-3">
            <div className="col-6"><CommonInputField level_name="Visiting fee" value={fee} on_change_data={setFee} placeholder="0.00" /></div>
            <div className="col-6"><CommonInputField level_name="Discount" value={discount} on_change_data={setDiscount} placeholder="0.00" /></div>
          </div>
          <div className="border-top pt-3 mb-3">
            <div className="small fw-semibold mb-2">Vitals <span className="text-muted fw-normal">— recorded by nurse, optional</span></div>
            <div className="row g-2">
              {VITAL_FIELDS.map((f) => (
                <div className="col-6 col-md-4" key={f.k}>
                  <CommonInputField level_name={f.label} value={vitals[f.k]} on_change_data={(v) => setVitals((p) => ({ ...p, [f.k]: v }))} placeholder={f.placeholder} />
                </div>
              ))}
            </div>
          </div>
          <div className="d-flex justify-content-between align-items-center bg-light rounded px-3 py-2 mb-3">
            <span className="small fw-semibold">Net payable</span>
            <span className="fw-bold">{money(net)}</span>
          </div>
          <CommonSubmitButton label="Register patient" loading={submitting} />
        </form>
      </div>

      <div className="col-12 col-lg-7">
        <div className="card">
          <div className="card-header"><h6 className="mb-0 small">Registered patients ({visits.length})</h6></div>
          <CommonTable
            headers={["Patient", "Fee", "Disc.", "Net", "Status"]}
            rows={rows}
            isActionButton={false}
          />
        </div>
      </div>
    </div>
  );
}