"use client";
import { useStore, currentDoctor, uid } from "@/lib/store";
import { mxn0 } from "@/lib/logic";
import type { Clinic, Doctor } from "@/lib/types";
import { LogoMark, Note, PageHead, useUI, WaBubble } from "@/components/ui";
import { DocHeader } from "@/components/docs";
import { reminderText } from "@/components/modals";

const C1 = ["#0f7c8c", "#2f5fbf", "#7a3fb8", "#c2372f", "#1f8a4c", "#b4559a", "#24323a"];
const C2 = ["#d98a2b", "#e0533d", "#3fa7d6", "#8bbf3f", "#c9a227", "#6b7a85"];

export default function MiConsultorioPage() {
  const { s, mutate } = useStore();
  const { toast } = useUI();
  const c = s.clinic;
  const set = (k: keyof Clinic, v: string | boolean | null) => mutate((d) => { (d.clinic as unknown as Record<string, unknown>)[k] = v; });
  const field = (k: keyof Clinic, l: string, extra?: React.InputHTMLAttributes<HTMLInputElement>) => (
    <label className="f">{l}<input value={String(c[k] ?? "")} onChange={(e) => set(k, e.target.value)} {...extra} /></label>
  );
  const setDoc = (id: string, k: keyof Doctor, v: string) => mutate((d) => { d.doctors.find((x) => x.id === id)![k] = v; });
  const plan = s.plans.find((p) => p.name === c.plan)!;

  return (
    <>
      <PageHead eyebrow="Mi consultorio" title="Tu consultorio, con tu imagen"
        sub="Tus datos, logotipo y colores aparecen en todo el sistema y en lo que reciben tus pacientes: recetas, recibos, órdenes de estudio, WhatsApp y el formulario de citas." />
      <div className="grid g2">
        <div className="panel" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <h2>Datos del consultorio</h2>
          <div className="fgrid">
            {field("name", "Nombre comercial")}{field("razon", "Razón social")}
            {field("rfc", "RFC", { style: { textTransform: "uppercase" } })}{field("tel", "Teléfono")}
            {field("wa", "WhatsApp del consultorio")}{field("horario", "Horario de atención")}
          </div>
          {field("addr", "Dirección")}
          {field("slug", "Dirección web", { pattern: "[a-z0-9]+" })}
          <small className="muted">Tus pacientes entran a <span className="mono">citas.{c.slug}.mx</span></small>
        </div>
        <div className="panel" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <h2>Logotipo y colores</h2>
          <div className="row" style={{ gap: 14 }}>
            <LogoMark size={72} />
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <label className="btn pri" style={{ cursor: "pointer" }}>Subir logotipo
                <input type="file" hidden accept="image/png,image/jpeg,image/svg+xml,image/webp" onChange={(e) => {
                  const f = e.target.files?.[0]; if (!f) return;
                  if (f.size > 2e6) return toast("El logotipo debe pesar menos de 2 MB");
                  const r = new FileReader(); r.onload = () => { set("logo", String(r.result)); toast("Logotipo actualizado"); }; r.readAsDataURL(f);
                }} />
              </label>
              {c.logo ? <button className="btn sm" onClick={() => set("logo", null)}>Quitar logotipo</button>
                : <label className="f" style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>Sin logo, usar iniciales<input maxLength={3} value={c.short} onChange={(e) => set("short", e.target.value)} style={{ width: 70 }} /></label>}
            </div>
          </div>
          <small className="muted">PNG, JPG o SVG, de preferencia cuadrado y con fondo transparente.</small>
          {([["color", "Color principal · botones y encabezados", C1], ["color2", "Color secundario · documentos y detalles", C2]] as const).map(([k, label, list]) => (
            <div key={k}>
              <div className="eyebrow" style={{ marginBottom: 6 }}>{label}</div>
              <div className="swatches">
                {list.map((col) => <button key={col} className="sw" style={{ background: col }} aria-pressed={c[k] === col} aria-label={`Color ${col}`} onClick={() => set(k, col)} />)}
                <input type="color" aria-label={`${label} personalizado`} value={c[k]} onChange={(e) => set(k, e.target.value)} style={{ width: 44, padding: 2, height: 32 }} />
              </div>
            </div>
          ))}
          <Note>El color del texto sobre tus botones se ajusta solo para que siempre se lea, aunque elijas un color claro.</Note>
        </div>
      </div>
      <div className="panel">
        <div className="spread"><h2>Doctores</h2>
          <button className="btn" onClick={() => { mutate((d) => { d.doctors.push({ id: uid(), name: "Dr. Nuevo doctor", esp: "Cirujano dentista", ced: "", cedEsp: "", inst: "" }); }); toast("Captura nombre y cédula del nuevo doctor"); }}>Agregar doctor</button></div>
        <p className="muted" style={{ fontSize: ".88rem", margin: ".3em 0 8px" }}>Cada receta, orden de estudio y formato de aseguradora sale con el nombre y la cédula del doctor que atiende.</p>
        <div className="tscroll"><table>
          <thead><tr><th>Nombre</th><th>Especialidad</th><th>Cédula profesional</th><th>Cédula de especialidad</th><th>Institución</th><th>En turno</th></tr></thead>
          <tbody>{s.doctors.map((d) => (
            <tr key={d.id}>
              {([["name", 220], ["esp", 200], ["ced", 110], ["cedEsp", 110], ["inst", 90]] as const).map(([k, w]) => (
                <td key={k}><input aria-label={k} value={d[k]} onChange={(e) => setDoc(d.id, k, e.target.value)} style={{ minWidth: w }} /></td>
              ))}
              <td><input type="radio" name="docOn" aria-label="Doctor en turno" checked={d.id === s.doctorId} style={{ width: "auto" }} onChange={() => { mutate((x) => { x.doctorId = d.id; }); toast("En turno: " + d.name); }} /></td>
            </tr>
          ))}</tbody>
        </table></div>
      </div>
      <div className="grid g2">
        <div className="panel">
          <h3>Así se ve una receta</h3>
          <div className="doc" style={{ maxWidth: "none", marginTop: 10 }}>
            <DocHeader title="RECETA MÉDICA" right="Ejemplo" doctor={currentDoctor(s)} />
            <div style={{ fontSize: ".85rem" }}>Paciente: <b>María Fernanda Torres</b> · Edad: 34 · Alergias: <b>Penicilina</b></div>
            <ol style={{ paddingLeft: 18, fontSize: ".88rem" }}><li><b>Ibuprofeno 400 mg tabletas</b><br />Ejemplo de indicación</li></ol>
          </div>
        </div>
        <div className="panel" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <h3>Recordatorio por WhatsApp</h3>
          <WaBubble text={reminderText(s, s.appointments[1] ?? s.appointments[0])} />
          <h3>Tu plan</h3>
          <div className="spread" style={{ padding: 10, background: "var(--sunk)", borderRadius: 8 }}>
            <span><b>{plan.name}</b> · <span className="mono">{mxn0(plan.price)}/mes + IVA</span></span><span className="pill p-ok">Activo</span>
          </div>
          <div className="row">{s.plans.filter((p) => p.name !== c.plan).map((p) => (
            <button key={p.name} className="btn sm" onClick={() => { set("plan", p.name); toast("Plan cambiado a " + p.name); }}>Cambiar a {p.name} · {mxn0(p.price)}</button>
          ))}</div>
          <label className="chk"><input type="checkbox" checked={c.insurersAddon} onChange={(e) => set("insurersAddon", e.target.checked)} /> Complemento aseguradoras (+$299/mes)</label>
        </div>
      </div>
    </>
  );
}