"use client";
import { useState } from "react";
import { useStore, findPatient, pushFeed, sponsorFor, uid, patientBalance } from "@/lib/store";
import { acceptBudget, addDays, budgetSplit, fdate, membershipActive, membershipPlan, mxn } from "@/lib/logic";
import type { AppState } from "@/lib/store";
import { LogoMark, useUI } from "./ui";
import { TIPS } from "./edu";

/* ---------- Formulario de citas en línea ---------- */
const HOURS = ["09:00", "10:00", "12:00", "13:00", "16:00", "17:00", "18:00", "19:00"];
const REASONS = ["Dolor o urgencia", "Limpieza", "Revisión general", "Ortodoncia", "Estética o blanqueamiento", "Otro"];

export function BookingForm({ compact = false }: { compact?: boolean }) {
  const { s, mutate } = useStore();
  const { toast } = useUI();
  const empty = { name: "", tel: "", date: addDays(s.today, 1), time: HOURS[0], reason: REASONS[0], insurer: "", allergies: "", privacy: false };
  const [f, setF] = useState(empty);
  const [done, setDone] = useState<string | null>(null);
  const sp = sponsorFor(s, "portal");
  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    mutate((d) => {
      let p = d.patients.find((x) => x.tel.replace(/\D/g, "") === f.tel.replace(/\D/g, "") && f.tel);
      if (!p) {
        p = { id: uid(), name: f.name.trim(), tel: f.tel, email: "", age: 0, sex: "F",
          hist: { motivo: f.reason, diabetes: false, hiper: false, cardio: false, coag: false, embarazo: false, alergias: f.allergies || "Ninguna", medact: "", ta: "", fc: "", explor: "", dx: "", consent: false },
          teeth: {}, procs: [], next: [], rx: [], studies: [], budgets: [], pays: [] };
        d.patients.push(p);
      }
      if (f.insurer && !p.ins) p.ins = { insurerId: f.insurer, policy: "", holder: f.name };
      d.appointments.push({ id: uid(), patientId: p.id, doctorId: d.doctors[0].id, date: f.date, time: f.time, dur: 60, reason: `Solicitud en línea: ${f.reason}`, status: "pendiente", source: "formulario" });
      pushFeed(d, `${f.name} pidió cita en línea para ${fdate(f.date)} ${f.time}`);
    });
    setDone(`${fdate(f.date, { weekday: "long", day: "numeric", month: "long" })} a las ${f.time}`);
    setF(empty);
    toast("Solicitud recibida");
  };
  if (done)
    return (
      <div className="panel" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <h2>¡Listo! Recibimos tu solicitud</h2>
        <p style={{ margin: 0 }}>Pediste cita para el <b>{done}</b>. Te confirmamos por WhatsApp al <span className="mono">{s.clinic.wa}</span> en cuanto la revisemos.</p>
        <button className="btn" style={{ alignSelf: "start" }} onClick={() => setDone(null)}>Pedir otra cita</button>
      </div>
    );
  return (
    <form onSubmit={submit} className={compact ? "" : "panel"} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div className="fgrid">
        <label className="f">Nombre completo<input required value={f.name} onChange={(e) => setF({ ...f, name: e.target.value })} autoComplete="name" /></label>
        <label className="f">WhatsApp<input required inputMode="tel" value={f.tel} onChange={(e) => setF({ ...f, tel: e.target.value })} autoComplete="tel" /></label>
        <label className="f">Fecha<input type="date" min={s.today} value={f.date} onChange={(e) => setF({ ...f, date: e.target.value })} /></label>
        <label className="f">Horario<select value={f.time} onChange={(e) => setF({ ...f, time: e.target.value })}>{HOURS.map((h) => <option key={h}>{h}</option>)}</select></label>
        <label className="f">Motivo<select value={f.reason} onChange={(e) => setF({ ...f, reason: e.target.value })}>{REASONS.map((r) => <option key={r}>{r}</option>)}</select></label>
        {s.clinic.insurersAddon && (
          <label className="f">¿Tienes seguro dental?<select value={f.insurer} onChange={(e) => setF({ ...f, insurer: e.target.value })}><option value="">No</option>{s.insurers.map((i) => <option key={i.id} value={i.id}>{i.name}</option>)}</select></label>
        )}
      </div>
      <label className="f">Alergias a medicamentos<input placeholder="Ninguna" value={f.allergies} onChange={(e) => setF({ ...f, allergies: e.target.value })} /></label>
      <label className="chk"><input type="checkbox" required checked={f.privacy} onChange={(e) => setF({ ...f, privacy: e.target.checked })} /> Acepto el aviso de privacidad de {s.clinic.razon}</label>
      {sp && <p className="note">{sp.msg} · Patrocinado por {sp.name}</p>}
      <button className="btn pri" type="submit" style={{ alignSelf: "start" }}>Solicitar cita</button>
    </form>
  );
}

export function PublicHeader({ subtitle }: { subtitle: string }) {
  const { s } = useStore();
  return (
    <header className="pub-head">
      <LogoMark size={52} inverted />
      <div><h1 style={{ fontSize: "1.4rem" }}>{s.clinic.name}</h1><div style={{ opacity: 0.9, fontSize: ".9rem" }}>{subtitle}</div></div>
    </header>
  );
}

/* ---------- Asistente de WhatsApp (simulación de los flujos del bot) ---------- */
type Opt = [label: string, key: string, value?: string];
type Msg = { me: boolean; text: string };
const MENU: Opt[] = [["Agendar una cita", "agendar"], ["Mi próxima cita", "cita"], ["Mi saldo", "saldo"], ["Mi presupuesto", "pres"], ["Membresías", "mem"], ["Consejos y juegos", "tips"]];

export function WhatsAppSim() {
  const { s, mutate, ctx } = useStore();
  const [pid, setPid] = useState(s.patients[0].id);
  const hello = (id: string): Msg[] => [{ me: false, text: `Hola ${findPatient(s, id)!.name.split(" ")[0]} 👋, soy el asistente de ${s.clinic.name}. ¿En qué te ayudo?` }];
  const [log, setLog] = useState<Msg[]>(() => hello(pid));
  const [opts, setOpts] = useState<Opt[]>(MENU);
  const p = findPatient(s, pid)!;
  const back: Opt[] = [["Menú", "menu"]];
  const bot = (text: string, o?: Opt[]) => { setLog((l) => [...l, { me: false, text }]); setOpts(o ?? MENU); };
  const act = (fn: (d: AppState) => void) => mutate(fn);

  const handle = ([label, k, v]: Opt) => {
    setLog((l) => [...l, { me: true, text: label }]);
    const tomorrow = addDays(s.today, 1);
    switch (k) {
      case "agendar": {
        const busy = s.appointments.filter((a) => a.date === tomorrow).map((a) => a.time);
        const free = ["09:00", "12:00", "16:00", "18:00"].filter((h) => !busy.includes(h));
        return bot(`Para mañana, ${fdate(tomorrow)}, tengo libre:`, [...free.map((h) => [h, "book", h] as Opt), ...back]);
      }
      case "book":
        act((d) => { d.appointments.push({ id: uid(), patientId: p.id, doctorId: d.doctors[0].id, date: tomorrow, time: v!, dur: 60, reason: "Agendada por WhatsApp", status: "confirmada", source: "whatsapp" }); pushFeed(d, `${p.name} agendó por WhatsApp: ${fdate(tomorrow)} ${v}`, "ok"); });
        return bot(`Listo ✅ Tu cita quedó el ${fdate(tomorrow)} a las ${v}. Te recordaré un día antes.`);
      case "cita": {
        const nx = s.appointments.filter((a) => a.patientId === p.id && a.date >= s.today && !["cancelada", "atendida"].includes(a.status)).sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time))[0];
        if (!nx) return bot("No tienes citas próximas.", [["Agendar", "agendar"], ...back]);
        return bot(`Tu próxima cita es el ${fdate(nx.date)} a las ${nx.time}: ${nx.reason}.`, nx.status !== "confirmada" ? [["Confirmar", "conf", nx.id], ["Reagendar", "agendar"], ...back] : undefined);
      }
      case "conf":
        act((d) => { d.appointments.find((a) => a.id === v)!.status = "confirmada"; pushFeed(d, `${p.name} confirmó su cita por WhatsApp`, "ok"); });
        return bot("¡Gracias! Tu cita quedó confirmada ✅");
      case "saldo": {
        const due = patientBalance(p, ctx).due;
        return due ? bot(`Tu saldo es de ${mxn(due)}. Puedes pagar con tarjeta aquí:\npago.${s.clinic.slug}.mx/${p.id}`, [["Ya pagué con la liga", "paid"], ...back]) : bot("No tienes saldo pendiente 🙌");
      }
      case "paid": {
        const amt = patientBalance(p, ctx).due; const folio = s.folio + 1;
        act((d) => { d.folio = folio; d.patients.find((x) => x.id === p.id)!.pays.push({ folio, date: d.today, amount: amt, method: "Tarjeta (liga)", concept: "Pago en línea por WhatsApp" }); pushFeed(d, `${p.name} pagó ${mxn(amt)} con la liga de WhatsApp`, "ok"); });
        return bot(`Recibimos tu pago de ${mxn(amt)} ✅ Te envío tu recibo, folio ${folio}.`);
      }
      case "pres": {
        const b = p.budgets.find((x) => x.status === "pendiente");
        if (!b) return bot("No tienes presupuestos por aprobar.");
        const sp = budgetSplit(p, b, ctx);
        return bot(`Tu presupuesto:\n${b.items.map((i) => `• ${i.name}${i.tooth ? ` (${i.tooth})` : ""}`).join("\n")}\nA tu cargo: ${mxn(sp.patPay)}${sp.insPay ? ` (ya descontado lo que cubre ${sp.insurer!.name})` : ""}`, [["Aprobar", "aprob", b.id], ["Tengo dudas", "dudas"], ...back]);
      }
      case "aprob":
        act((d) => { const i = d.patients.findIndex((x) => x.id === p.id); d.patients[i] = acceptBudget(d.patients[i], v!, d.membershipPlans, d.today); pushFeed(d, `${p.name} aprobó su presupuesto por WhatsApp`, "ok"); });
        return bot("Presupuesto aprobado ✅ Recepción te escribe para agendar.");
      case "dudas":
        act((d) => pushFeed(d, `${p.name} tiene dudas sobre su presupuesto`, "warn"));
        return bot("Ya le avisé a recepción. Te escriben en unos minutos.");
      case "mem": {
        const m = membershipPlan(p, s.membershipPlans);
        if (m) return bot(`Tienes ${m.name}${membershipActive(p, s.today) ? "" : " (pago vencido)"}.\n${Object.entries(m.included).map(([sv, n]) => `• ${sv.split(" (")[0]}: quedan ${Math.max(0, n - (p.mem!.used[sv] ?? 0))}`).join("\n")}`);
        return bot(`Nuestras membresías:\n${s.membershipPlans.map((x) => `• ${x.name}: ${mxn(x.price)}/mes, ${x.disc}% de descuento`).join("\n")}`, [...s.membershipPlans.map((x) => [`Quiero ${x.name}`, "join", x.id] as Opt), ...back]);
      }
      case "join": {
        const m = s.membershipPlans.find((x) => x.id === v)!; const folio = s.folio + 1;
        act((d) => { d.folio = folio; const x = d.patients.find((y) => y.id === p.id)!; x.mem = { planId: m.id, since: d.today, paidThru: addDays(d.today, 30), used: {} }; x.pays.push({ folio, date: d.today, amount: m.price, method: "Tarjeta (liga)", concept: `Membresía ${m.name} · 1er mes`, membership: true }); pushFeed(d, `${p.name} se inscribió a ${m.name} por WhatsApp`, "ok"); });
        return bot(`¡Bienvenido a ${m.name}! 🎉 Pagaste ${mxn(m.price)}, folio ${folio}. Tu descuento ya aplica.`);
      }
      case "tips":
        return bot(`💡 ${TIPS[Math.floor(Math.random() * TIPS.length)]}\n\nMás consejos y juegos para niños:\nconsejos.${s.clinic.slug}.mx`);
      default:
        return bot("¿Algo más en que te ayude?");
    }
  };

  return (
    <section className="panel">
      <div className="spread"><h2>Asistente de WhatsApp</h2>
        <select aria-label="Paciente que escribe" value={pid} style={{ maxWidth: 220 }} onChange={(e) => { setPid(e.target.value); setLog(hello(e.target.value)); setOpts(MENU); }}>
          {s.patients.map((x) => <option key={x.id} value={x.id}>{x.name}</option>)}
        </select>
      </div>
      <div className="wa" style={{ marginTop: 10, maxHeight: 400, overflow: "auto" }} ref={(el) => { if (el) el.scrollTop = el.scrollHeight; }}>
        {log.map((m, i) => <div key={i} className={m.me ? "b" : "r"}>{m.text}</div>)}
      </div>
      <div className="row" style={{ marginTop: 8 }}>{opts.map((o) => <button key={o[0]} className="btn sm" onClick={() => handle(o)}>{o[0]}</button>)}</div>
      <p className="note" style={{ marginTop: 10 }}>Simulación: tú tocas las respuestas del paciente. En producción corre sobre WhatsApp Cloud API con plantillas aprobadas por Meta.</p>
    </section>
  );
}