// screens_clinical.jsx — Anestesia, Consentimiento, Expediente PDF, visor de atención
const { useState: useStateC } = React;

// ---- Módulo de Anestesia (Pre / Trans / Post) ----
function FormAnestesia({ paciente, onBack, faseInicial }) {
  const [fase, setFase] = useStateC(faseInicial || "pre");
  const [signed, setSigned] = useStateC(false);
  const fases = [
    { id: "pre", label: "Pre-anestésica", form: "018" },
    { id: "trans", label: "Trans-anestésico", form: "018A" },
    { id: "post", label: "Recuperación", form: "019" },
  ];
  const cur = fases.find((f) => f.id === fase);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
      <div style={{ position: "sticky", top: 0, zIndex: 30, background: "var(--surface)", borderBottom: "1px solid var(--line)", margin: "-28px -28px 22px", padding: "14px 28px" }} className="g-formbar">
        <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
          <button onClick={onBack} className="g-iconbtn" style={{ border: "1px solid var(--line)", background: "var(--surface)", borderRadius: 9, padding: 8, cursor: "pointer", color: "var(--ink-2)", display: "flex" }}><Icon name="back" size={18} /></button>
          <div style={{ flex: 1, minWidth: 180 }}>
            <h1 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: "var(--ink)" }}>Registro anestésico</h1>
            <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>{paciente.apellidos} {paciente.nombres} · <span style={{ fontFamily: "var(--mono)" }}>{paciente.hc}</span></div>
          </div>
          {signed ? <Badge tone="green" dot>Firmado</Badge> : <Btn icon="sign" size="sm" onClick={() => setSigned(true)}>Firmar fase</Btn>}
        </div>
        <div style={{ display: "flex", gap: 6, marginTop: 14 }}>
          {fases.map((f) => (
            <button key={f.id} onClick={() => setFase(f.id)} style={{ flex: 1, padding: "10px 12px", borderRadius: 10, border: "1px solid", cursor: "pointer", fontFamily: "inherit", fontWeight: 700, fontSize: 13.5, display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
              borderColor: fase === f.id ? "var(--accent)" : "var(--line)", background: fase === f.id ? "var(--accent-soft)" : "var(--surface)", color: fase === f.id ? "var(--accent-ink)" : "var(--ink-3)" }}>
              {f.label} <span style={{ fontFamily: "var(--mono)", fontSize: 11, opacity: .7 }}>{f.form}</span>
            </button>
          ))}
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {fase === "pre" && <AnestPre paciente={paciente} />}
        {fase === "trans" && <AnestTrans />}
        {fase === "post" && <AnestPost />}
        <SignBlock signed={signed} medico={null} />
      </div>
    </div>
  );
}

function AnestPre({ paciente }) {
  const [asa, setAsa] = useStateC("II");
  return (
    <React.Fragment>
      <FormSection id="b" letter="B" title="Valoración preanestésica">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Field label="Diagnóstico"><TextInput defaultValue="Angina inestable (I20.0)" /></Field>
          <Field label="Procedimiento propuesto"><TextInput defaultValue="Cinecoronariografía" /></Field>
          <Field label="Tipo de cirugía"><Select defaultValue="Electiva"><option>Electiva</option><option>Urgente</option><option>Emergente</option></Select></Field>
          <Field label="Ayuno (líquidos claros)"><TextInput defaultValue="6 horas" /></Field>
        </div>
      </FormSection>
      <FormSection id="d" letter="D" title="Examen físico y vía aérea">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(130px,1fr))", gap: 14 }}>
          <Field label="Mallampati"><Select defaultValue="II"><option>I</option><option>II</option><option>III</option><option>IV</option></Select></Field>
          <Field label="Apertura bucal"><Select defaultValue="> 3 cm"><option>&gt; 3 cm</option><option>&lt; 3 cm</option></Select></Field>
          <Field label="Distancia tiromentoniana"><TextInput defaultValue="> 6.5 cm" /></Field>
          <Field label="METS"><TextInput defaultValue="> 4" /></Field>
        </div>
      </FormSection>
      <FormSection id="f" letter="F" title="Escalas e índices">
        <Field label="Estado físico ASA">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {["I", "II", "III", "IV", "V"].map((x) => (
              <button key={x} onClick={() => setAsa(x)} style={{ flex: 1, minWidth: 56, padding: "11px 8px", borderRadius: 10, border: "1px solid", cursor: "pointer", fontFamily: "var(--mono)", fontWeight: 700, fontSize: 15,
                borderColor: asa === x ? "var(--accent)" : "var(--line-2)", background: asa === x ? "var(--accent-soft)" : "var(--field)", color: asa === x ? "var(--accent-ink)" : "var(--ink-3)" }}>ASA {x}</button>
            ))}
          </div>
        </Field>
      </FormSection>
      <FormSection id="h" letter="H" title="Plan anestésico">
        <TextArea defaultValue="Sedación consciente para cinecoronariografía por acceso radial derecho. Monitorización estándar (EKG, PANI, SpO₂). Disponibilidad de carro de paro." style={{ minHeight: 90 }} />
      </FormSection>
    </React.Fragment>
  );
}

// Gráfico de monitoreo trans-anestésico (data viz)
function MonitorChart() {
  const w = 680, h = 220, pad = 30;
  const taS = [120, 132, 128, 140, 135, 130, 138];
  const taD = [78, 82, 76, 88, 84, 80, 85];
  const fc = [72, 80, 76, 70, 68, 74, 72];
  const n = taS.length;
  const x = (i) => pad + (i / (n - 1)) * (w - pad * 2);
  const y = (v) => h - pad - ((v - 40) / (180 - 40)) * (h - pad * 2);
  const line = (arr) => arr.map((v, i) => `${x(i)},${y(v)}`).join(" ");
  return (
    <div style={{ overflowX: "auto" }}>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", minWidth: 520, height: "auto" }}>
        {[40, 80, 120, 160].map((g) => (
          <g key={g}>
            <line x1={pad} y1={y(g)} x2={w - pad} y2={y(g)} stroke="var(--line)" strokeWidth="1" />
            <text x={6} y={y(g) + 4} fontSize="10" fill="var(--ink-3)" fontFamily="var(--mono)">{g}</text>
          </g>
        ))}
        {["09:30", "09:45", "10:00", "10:15", "10:30", "10:45", "11:00"].map((t, i) => (
          <text key={t} x={x(i)} y={h - 8} fontSize="9.5" fill="var(--ink-3)" textAnchor="middle" fontFamily="var(--mono)">{t}</text>
        ))}
        <polyline points={line(taS)} fill="none" stroke="#dc2626" strokeWidth="2" />
        <polyline points={line(taD)} fill="none" stroke="#2563eb" strokeWidth="2" />
        <polyline points={line(fc)} fill="none" stroke="#0d9488" strokeWidth="2" strokeDasharray="4 3" />
        {taS.map((v, i) => <circle key={"s" + i} cx={x(i)} cy={y(v)} r="3" fill="#dc2626" />)}
        {taD.map((v, i) => <circle key={"d" + i} cx={x(i)} cy={y(v)} r="3" fill="#2563eb" />)}
      </svg>
      <div style={{ display: "flex", gap: 18, justifyContent: "center", fontSize: 12, marginTop: 4 }}>
        <Legend c="#dc2626" t="TA sistólica" /><Legend c="#2563eb" t="TA diastólica" /><Legend c="#0d9488" t="Frecuencia cardíaca" />
      </div>
    </div>
  );
}
function Legend({ c, t }) {
  return <span style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--ink-2)" }}><span style={{ width: 14, height: 3, borderRadius: 2, background: c }} /> {t}</span>;
}

function AnestTrans() {
  return (
    <React.Fragment>
      <FormSection id="mon" letter="D" title="Registro transanestésico — monitoreo">
        <MonitorChart />
      </FormSection>
      <FormSection id="drogas" letter="E" title="Drogas administradas">
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
            <thead><tr>{["Medicamento", "Dosis", "Vía", "Hora"].map((c) => <th key={c} style={{ textAlign: "left", padding: "10px 12px", fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)", textTransform: "uppercase", borderBottom: "1px solid var(--line)" }}>{c}</th>)}</tr></thead>
            <tbody>
              {[["Lidocaína 2%", "35 ml", "Local", "09:32"], ["Heparina no fraccionada", "2500 UI", "IV", "09:40"], ["Midazolam", "2 mg", "IV", "09:30"]].map((r, i) => (
                <tr key={i} className="g-trow">{r.map((c, j) => <td key={j} style={{ padding: "11px 12px", borderBottom: "1px solid var(--line)", color: "var(--ink)", fontFamily: j > 0 ? "var(--mono)" : "inherit", fontWeight: j === 0 ? 600 : 400 }}>{c}</td>)}</tr>
              ))}
            </tbody>
          </table>
        </div>
      </FormSection>
      <FormSection id="tec" letter="F" title="Técnica anestésica">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Field label="Técnica"><Select defaultValue="Sedación consciente"><option>Sedación consciente</option><option>General</option><option>Regional</option><option>Local + sedación</option></Select></Field>
          <Field label="Manejo de vía aérea"><Select defaultValue="Cánula nasal O₂"><option>Cánula nasal O₂</option><option>Máscara facial</option><option>Intubación</option></Select></Field>
        </div>
      </FormSection>
    </React.Fragment>
  );
}

function AnestPost() {
  const aldrete = [["Actividad", 2], ["Respiración", 2], ["Circulación", 2], ["Conciencia", 2], ["SatO₂", 2]];
  const total = aldrete.reduce((a, b) => a + b[1], 0);
  return (
    <React.Fragment>
      <FormSection id="ald" letter="D" title="Escala de Aldrete modificado" action={<Badge tone="green">{total}/10 · apto para egreso</Badge>}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {aldrete.map(([k, v]) => (
            <div key={k} style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 120, fontSize: 13, color: "var(--ink-2)" }}>{k}</span>
              <div style={{ flex: 1, height: 8, borderRadius: 99, background: "var(--line)", overflow: "hidden" }}><div style={{ width: `${(v / 2) * 100}%`, height: "100%", background: "var(--ok)" }} /></div>
              <span style={{ fontFamily: "var(--mono)", fontWeight: 700, color: "var(--ink)", width: 24, textAlign: "right" }}>{v}</span>
            </div>
          ))}
        </div>
      </FormSection>
      <FormSection id="egr" letter="H" title="Condición de egreso">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(140px,1fr))", gap: 14 }}>
          <Field label="T/A de entrega"><TextInput defaultValue="138/84" /></Field>
          <Field label="FC"><TextInput defaultValue="72" /></Field>
          <Field label="SatO₂"><TextInput defaultValue="99%" /></Field>
          <Field label="Destino"><Select defaultValue="Hospitalización"><option>Hospitalización</option><option>Alta domiciliaria</option><option>UCI</option></Select></Field>
        </div>
      </FormSection>
    </React.Fragment>
  );
}

// ---- Consentimiento informado (024) ----
function FormConsentimiento({ paciente, onBack }) {
  const [signed, setSigned] = useStateC(false);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <button onClick={onBack} className="g-iconbtn" style={{ border: "1px solid var(--line)", background: "var(--surface)", borderRadius: 9, padding: 8, cursor: "pointer", color: "var(--ink-2)", display: "flex" }}><Icon name="back" size={18} /></button>
        <div style={{ flex: 1 }}>
          <h1 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: "var(--ink)" }}>Consentimiento informado</h1>
          <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>{paciente.apellidos} {paciente.nombres} · Form. 024</div>
        </div>
        {signed ? <Badge tone="green" dot>Firmado por paciente</Badge> : <Btn icon="sign" onClick={() => setSigned(true)}>Registrar firma del paciente</Btn>}
      </div>
      <FormSection id="proc" letter="B" title="Procedimiento">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Field label="Procedimiento recomendado" full><TextInput defaultValue="Cinecoronariografía + cateterismo izquierdo por acceso radial derecho" /></Field>
          <Field label="En qué consiste" full><TextArea defaultValue="Estudio que permite visualizar las arterias coronarias mediante un catéter introducido por la arteria radial, inyectando medio de contraste para detectar obstrucciones." style={{ minHeight: 70 }} /></Field>
          <Field label="Beneficios"><TextArea defaultValue="Diagnóstico preciso de enfermedad coronaria que guía el tratamiento." /></Field>
          <Field label="Riesgos"><TextArea defaultValue="Parada cardíaca, taponamiento, alergia al contraste intravenoso, sangrado del sitio de punción." style={{ borderColor: "var(--warn-ink)" }} /></Field>
        </div>
      </FormSection>
      <FormSection id="decl" letter="C" title="Declaración de consentimiento">
        <div style={{ fontSize: 13, lineHeight: 1.65, color: "var(--ink-2)", background: "var(--field)", borderRadius: 11, padding: "14px 16px", border: "1px solid var(--line)" }}>
          He recibido información completa y comprensible sobre el procedimiento propuesto, sus beneficios, riesgos y alternativas. He tenido la oportunidad de preguntar y aclarar mis dudas, y de forma libre y consciente <strong>autorizo</strong> su realización.
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
          <SignSlot label="Firma del paciente" name={`${paciente.nombres} ${paciente.apellidos}`} signed={signed} />
          <SignSlot label="Firma del profesional" name={(window.CURRENT_USER && window.CURRENT_USER.nombre) || "Médico tratante"} signed={signed} />
        </div>
      </FormSection>
    </div>
  );
}

function SignSlot({ label, name, signed }) {
  return (
    <div style={{ border: "1px solid var(--line)", borderRadius: 12, padding: 14, background: "var(--surface)" }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: "var(--ink-3)", marginBottom: 8 }}>{label}</div>
      <div style={{ height: 56, borderRadius: 8, background: "var(--field)", display: "flex", alignItems: "center", justifyContent: "center", border: "1px dashed var(--line-2)" }}>
        {signed ? <span style={{ fontFamily: "'Caveat', cursive", fontSize: 28, color: "var(--accent)" }}>{name}</span> : <span style={{ fontSize: 12, color: "var(--ink-3)" }}>Pendiente de firma</span>}
      </div>
      <div style={{ fontSize: 11.5, color: "var(--ink-2)", marginTop: 7, fontWeight: 600 }}>{name}</div>
    </div>
  );
}

// ---- Expediente PDF consolidado ----
function ExpedienteModal({ open, onClose, paciente }) {
  const [gen, setGen] = useStateC("idle");
  if (!paciente) return null;
  const docs = [];
  return (
    <Modal open={open} onClose={onClose} title="Expediente clínico consolidado" width={640}
      footer={<>
        <Btn variant="ghost" onClick={onClose}>Cerrar</Btn>
        <Btn icon="pdf" onClick={() => { setGen("loading"); setTimeout(() => { setGen("done"); window.open("Expediente CIECAV.html", "_blank"); }, 1100); }}>{gen === "done" ? "Abrir de nuevo" : "Generar PDF"}</Btn>
      </>}>
      <div style={{ display: "flex", gap: 14, alignItems: "center", padding: "14px 16px", borderRadius: 12, background: "var(--field)", marginBottom: 16 }}>
        <Avatar text={paciente.avatar} color={paciente.avatarColor} size={44} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--ink)" }}>{paciente.apellidos} {paciente.nombres}</div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", fontFamily: "var(--mono)" }}>{paciente.hc} · {paciente.cedula}</div>
        </div>
        <Badge tone="blue">{docs.length} documentos</Badge>
      </div>
      <p style={{ margin: "0 0 10px", fontSize: 12.5, fontWeight: 700, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".03em" }}>Documentos incluidos</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 7, marginBottom: 8 }}>
        {[{ d: "Portada e índice", fecha: "" }, ...docs].map((doc, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 13px", borderRadius: 10, border: "1px solid var(--line)" }}>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)", width: 22 }}>{String(i + 1).padStart(2, "0")}</span>
            <Icon name="doc" size={16} style={{ color: "var(--accent)" }} />
            <span style={{ flex: 1, fontSize: 13.5, color: "var(--ink)", fontWeight: 600 }}>{doc.d}</span>
            {doc.fecha && <span style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{doc.fecha}</span>}
            <Icon name="check" size={15} style={{ color: "var(--ok-ink)" }} />
          </div>
        ))}
      </div>
      {gen === "loading" && <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px", color: "var(--ink-3)", fontSize: 13.5 }}><span className="g-spin" style={{ width: 16, height: 16, border: "2px solid var(--line-2)", borderTopColor: "var(--accent)", borderRadius: 99 }} /> Consolidando documentos y aplicando firmas…</div>}
      {gen === "done" && <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", borderRadius: 11, background: "color-mix(in oklch, var(--ok) 12%, transparent)", color: "var(--ok-ink)", fontSize: 13.5, fontWeight: 600 }}><Icon name="checkCircle" size={18} /> Expediente_{paciente.hc}.pdf generado con membrete CIECAV — {docs.length + 1} páginas, firmado digitalmente. Se abrió en una pestaña nueva.</div>}
    </Modal>
  );
}

// RBAC + form catalog (mirrors workers/routes/forms.js)
const FORM_CATALOG = [
  { type: "admision",            label: "Admisión",                     icon: "user",        roles: ['superadmin','admin','reception','nurse'] },
  { type: "emergencia_08",       label: "Form. 008 — Emergencia",       icon: "alert",       roles: ['superadmin','admin','nurse','doctor','surgeon','lab'] },
  { type: "epicrisis",           label: "Epicrisis",                    icon: "doc",         roles: ['superadmin','admin','nurse','doctor','surgeon'] },
  { type: "protocolo",           label: "Protocolo quirúrgico",         icon: "heart",       roles: ['superadmin','admin','nurse','doctor','surgeon','lab'] },
  { type: "evoluciones",         label: "Evoluciones",                  icon: "stethoscope", roles: ['superadmin','admin','nurse','doctor','surgeon'] },
  { type: "kardex",              label: "Kardex de medicamentos",       icon: "pill",        roles: ['superadmin','admin','nurse'] },
  { type: "preparacion_pcte",    label: "Preparación del paciente",     icon: "vitals",      roles: ['superadmin','admin','nurse','doctor','surgeon'] },
  { type: "recuperacion",        label: "Recuperación postoperatoria",  icon: "heart",       roles: ['superadmin','admin','nurse','doctor','surgeon'] },
  { type: "quirofano",           label: "Quirófano",                    icon: "heart",       roles: ['superadmin','admin','nurse','doctor','surgeon'] },
  { type: "oxigeno",             label: "Control de oxígeno",           icon: "vitals",      roles: ['superadmin','admin','nurse','doctor','surgeon'] },
  { type: "ingesta",             label: "Ingesta y excreta",            icon: "doc",         roles: ['superadmin','admin','nurse'] },
  { type: "sol_sangre",          label: "Sol. de sangre",               icon: "heart",       roles: ['superadmin','admin','nurse','doctor','surgeon'] },
  { type: "transf_sanguinea",    label: "Transfusión sanguínea",        icon: "heart",       roles: ['superadmin','admin','nurse','doctor','surgeon'] },
  { type: "interconsulta",       label: "Interconsulta",                icon: "doc",         roles: ['superadmin','admin','doctor','surgeon'] },
  { type: "solicitud_012a",      label: "Solicitud 012A (Imagenología)",icon: "folder",      roles: ['superadmin','admin','doctor','surgeon'] },
  { type: "solicitud_post_012a", label: "Sol. Post 012A",               icon: "folder",      roles: ['superadmin','admin','doctor','surgeon'] },
  { type: "informe_012b",        label: "Informe 012B (Imagenología)",  icon: "folder",      roles: ['superadmin','admin','lab'] },
  { type: "informe_post_012b",   label: "Informe Post 012B",            icon: "folder",      roles: ['superadmin','admin','lab'] },
  { type: "lab_010a_anv",        label: "010A Lab (anverso)",           icon: "folder",      roles: ['superadmin','admin','doctor','surgeon'] },
  { type: "lab_010a_rev",        label: "010A Lab (reverso)",           icon: "folder",      roles: ['superadmin','admin','nurse','doctor','surgeon'] },
  { type: "lab_010b_anv",        label: "010B Inf. Lab (anverso)",      icon: "folder",      roles: ['superadmin','admin','lab'] },
  { type: "lab_010b_rev",        label: "010B Inf. Lab (reverso)",      icon: "folder",      roles: ['superadmin','admin','lab'] },
  { type: "referencia_053",      label: "Form. 053 Referencia",         icon: "doc",         roles: ['superadmin','admin','doctor','surgeon'] },
  { type: "entrega_documentos",  label: "Entrega de documentos",        icon: "folder",      roles: ['superadmin','admin','nurse','doctor','surgeon','lab'] },
  { type: "pre_1",               label: "Preanestésico 1",              icon: "vitals",      roles: ['superadmin','admin','doctor','surgeon','anesthesiologist'] },
  { type: "pre_2",               label: "Preanestésico 2",              icon: "vitals",      roles: ['superadmin','admin','doctor','surgeon','anesthesiologist'] },
  { type: "trans_018a_anv",      label: "Trans-anestésico 018A (anv.)", icon: "heart",       roles: ['superadmin','admin','doctor','surgeon','anesthesiologist'] },
  { type: "trans_018a_rev",      label: "Trans-anestésico 018A (rev.)", icon: "heart",       roles: ['superadmin','admin','doctor','surgeon','anesthesiologist'] },
  { type: "019_post_anv",        label: "Post-anestésico 019 (anv.)",   icon: "heart",       roles: ['superadmin','admin','doctor','surgeon','anesthesiologist'] },
  { type: "019_post_rev",        label: "Post-anestésico 019 (rev.)",   icon: "heart",       roles: ['superadmin','admin','doctor','surgeon','anesthesiologist'] },
];

function VitalChip({ label, value, unit }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "6px 12px", borderRadius: 9, background: "var(--field)", border: "1px solid var(--line)" }}>
      <span style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 600 }}>{label}</span>
      <span style={{ fontFamily: "var(--mono)", fontWeight: 700, color: "var(--ink)", fontSize: 14 }}>{value}</span>
      <span style={{ fontSize: 11, color: "var(--ink-3)" }}>{unit}</span>
    </div>
  );
}

// ---- Visor y editor de atención ----
const FINALIZE_OPTIONS = [
  { value: "cerrado",     label: "Cerrar atención",  icon: "x",           desc: "Finaliza sin acción adicional" },
  { value: "alta",        label: "Dar alta médica",   icon: "checkCircle", desc: "Paciente dado de alta" },
  { value: "transferido", label: "Transferir",         icon: "folder",      desc: "Derivado a otro servicio" },
  { value: "fallecido",   label: "Registrar fallecimiento", icon: "alert", desc: "Cierre por fallecimiento" },
];

function AtencionView({ atencion: record, paciente, role, onBack, onOpenExpediente, onEditForm }) {
  const [detail, setDetail] = useStateC(null);
  const [loading, setLoading] = useStateC(true);
  const [showFinalizeMenu, setShowFinalizeMenu] = useStateC(false);
  const [finalizing, setFinalizing] = useStateC(false);
  const [finalizeError, setFinalizeError] = useStateC("");

  React.useEffect(() => {
    if (!record?.id) { setLoading(false); return; }
    window.apiFetch(`/api/records/${record.id}`)
      .then((d) => setDetail(d))
      .catch(() => setDetail({ ...record, forms: [] }))
      .finally(() => setLoading(false));
  }, [record?.id]);

  const userRole = role?.apiRole || 'doctor';
  const existingForms = detail?.forms || [];
  const existingMap = Object.fromEntries(existingForms.map((f) => [f.form_type, f]));
  const rec = detail || record || {};
  const allowedTypes = window.FORMS_BY_TIPO?.[rec.tipo_atencion] || null;
  const visibleForms = allowedTypes ? FORM_CATALOG.filter((f) => allowedTypes.includes(f.type)) : FORM_CATALOG;

  const isOpen = rec.estado === "activo";
  const canFinalize = isOpen && ["doctor", "surgeon", "nurse"].includes(userRole);

  const finalizeRecord = async (nuevoEstado) => {
    setFinalizing(true); setFinalizeError("");
    try {
      await window.apiFetch(`/api/records/${rec.id}`, {
        method: "PATCH",
        body: JSON.stringify({ estado: nuevoEstado }),
      });
      // Re-fetch el expediente completo para obtener todos los campos con JOINs
      const fresh = await window.apiFetch(`/api/records/${rec.id}`);
      setDetail(fresh);
      setShowFinalizeMenu(false);
    } catch (e) {
      setFinalizeError(e.message || "No se pudo finalizar la atención.");
    } finally {
      setFinalizing(false);
    }
  };

  if (loading) return (
    <div style={{ textAlign: "center", padding: 60, color: "var(--ink-3)" }}>
      <span className="g-spin" style={{ width: 28, height: 28, border: "3px solid var(--line-2)", borderTopColor: "var(--accent)", borderRadius: 99, display: "inline-block" }} />
    </div>
  );

  const estadoBadgeTone = rec.estado === "activo" ? "amber" : rec.estado === "alta" ? "green" : rec.estado === "fallecido" ? "red" : "neutral";
  const ESTADO_LABELS = { activo: "Activo", cerrado: "Cerrado", alta: "Alta médica", transferido: "Transferido", fallecido: "Fallecido" };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <button onClick={onBack} style={{ display: "inline-flex", alignItems: "center", gap: 7, alignSelf: "flex-start", border: "none", background: "transparent", color: "var(--ink-3)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>
        <Icon name="back" size={17} /> Volver a la ficha
      </button>

      {/* Banner de solo lectura */}
      {!isOpen && (
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "11px 15px", borderRadius: 11, background: "color-mix(in oklch, var(--ink-3) 8%, transparent)", border: "1px solid var(--line)" }}>
          <Icon name="lock" size={16} style={{ color: "var(--ink-3)", flexShrink: 0 }} />
          <span style={{ fontSize: 13, color: "var(--ink-2)", fontWeight: 600 }}>Atención <strong>{ESTADO_LABELS[rec.estado] || rec.estado}</strong> — modo lectura. No se pueden agregar ni editar formularios.</span>
        </div>
      )}

      <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 16, padding: 20, boxShadow: "var(--shadow)" }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", flexWrap: "wrap", gap: 14 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
              <h2 style={{ margin: 0, fontSize: 20, fontWeight: 800, color: "var(--ink)", textTransform: "capitalize" }}>{rec.tipo_atencion || "Atención"}</h2>
              <Badge tone="blue" style={{ fontFamily: "var(--mono)" }}>{rec.record_number}</Badge>
              <Badge tone={estadoBadgeTone}>{ESTADO_LABELS[rec.estado] || rec.estado}</Badge>
            </div>
            <p style={{ margin: "5px 0 0", fontSize: 13, color: "var(--ink-3)" }}>
              {rec.fecha_ingreso?.slice(0, 16).replace("T", " ")} · {rec.medico_nombre || "Sin médico asignado"} · {rec.servicio || "—"}
            </p>
            {rec.motivo_consulta && <p style={{ margin: "6px 0 0", fontSize: 13.5, color: "var(--ink-2)", fontStyle: "italic" }}>"{rec.motivo_consulta}"</p>}
          </div>
          <div style={{ display: "flex", gap: 9, flexWrap: "wrap", alignItems: "flex-start" }}>
            <Btn variant="ghost" icon="pdf" onClick={onOpenExpediente}>Exportar PDF</Btn>
            {canFinalize && (
              <div style={{ position: "relative" }}>
                <Btn icon="checkCircle" onClick={() => setShowFinalizeMenu((v) => !v)} disabled={finalizing}>
                  {finalizing ? "Finalizando…" : "Finalizar atención"}
                </Btn>
                {showFinalizeMenu && (
                  <div style={{ position: "absolute", right: 0, top: "calc(100% + 6px)", zIndex: 60, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, boxShadow: "0 16px 40px -8px rgba(0,0,0,.25)", minWidth: 230, overflow: "hidden" }}>
                    {FINALIZE_OPTIONS.map((opt) => (
                      <button key={opt.value} onClick={() => finalizeRecord(opt.value)} disabled={finalizing}
                        style={{ display: "flex", gap: 12, alignItems: "flex-start", width: "100%", textAlign: "left", padding: "11px 14px", border: "none", background: "transparent", cursor: "pointer", borderBottom: "1px solid var(--line)", fontFamily: "inherit" }}>
                        <Icon name={opt.icon} size={15} style={{ color: "var(--ink-3)", marginTop: 2, flexShrink: 0 }} />
                        <div>
                          <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink)" }}>{opt.label}</div>
                          <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{opt.desc}</div>
                        </div>
                      </button>
                    ))}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
        {finalizeError && (
          <div style={{ marginTop: 10, padding: "8px 12px", borderRadius: 9, background: "var(--danger-soft)", color: "var(--danger)", fontSize: 13 }}>{finalizeError}</div>
        )}
        {(rec.presion_arterial || rec.frecuencia_cardiaca || rec.temperatura || rec.saturacion_o2) && (
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--line)" }}>
            {rec.presion_arterial && <VitalChip label="T/A" value={rec.presion_arterial} unit="mmHg" />}
            {rec.frecuencia_cardiaca && <VitalChip label="FC" value={rec.frecuencia_cardiaca} unit="lpm" />}
            {rec.frecuencia_respiratoria && <VitalChip label="FR" value={rec.frecuencia_respiratoria} unit="rpm" />}
            {rec.temperatura && <VitalChip label="Temp" value={rec.temperatura} unit="°C" />}
            {rec.saturacion_o2 && <VitalChip label="SatO₂" value={rec.saturacion_o2} unit="%" />}
          </div>
        )}
      </div>

      <div>
        <div style={{ fontSize: 12, fontWeight: 800, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 12 }}>
          Formularios clínicos — {isOpen ? `${visibleForms.filter((f) => f.roles.includes(userRole)).length} editables · ` : "Solo lectura · "}{visibleForms.length} en este expediente
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(270px, 1fr))", gap: 9 }}>
          {visibleForms.map((f) => {
            const existing = existingMap[f.type];
            const canEdit = isOpen && f.roles.includes(userRole);
            return (
              <div key={f.type} style={{ background: "var(--surface)", border: `1px solid ${existing ? "color-mix(in oklch, var(--accent) 28%, var(--line))" : "var(--line)"}`, borderRadius: 11, padding: "11px 13px", display: "flex", gap: 10, alignItems: "center" }}>
                <span style={{ width: 34, height: 34, borderRadius: 8, background: canEdit ? "var(--accent-soft)" : "var(--chip)", color: canEdit ? "var(--accent)" : "var(--ink-3)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name={f.icon} size={16} />
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700, color: canEdit ? "var(--ink)" : "var(--ink-3)", lineHeight: 1.2 }}>{f.label}</div>
                  <div style={{ fontSize: 11.5, marginTop: 3 }}>
                    {existing
                      ? <Badge tone={existing.status === "firmado" ? "green" : "amber"} dot>{existing.status}</Badge>
                      : <span style={{ color: "var(--ink-3)" }}>Sin registro</span>}
                  </div>
                </div>
                {canEdit ? (
                  <button onClick={() => onEditForm && onEditForm(f.type, rec)}
                    style={{ border: "1px solid var(--accent)", background: "var(--accent-soft)", color: "var(--accent-ink)", borderRadius: 8, padding: "5px 11px", cursor: "pointer", fontFamily: "inherit", fontSize: 12, fontWeight: 700, whiteSpace: "nowrap", flexShrink: 0 }}>
                    {existing ? "Editar" : "Nuevo"}
                  </button>
                ) : existing ? (
                  <button onClick={() => onEditForm && onEditForm(f.type, rec)}
                    style={{ border: "1px solid var(--line)", background: "var(--chip)", color: "var(--ink-3)", borderRadius: 8, padding: "5px 11px", cursor: "pointer", fontFamily: "inherit", fontSize: 12, fontWeight: 700, whiteSpace: "nowrap", flexShrink: 0 }}>
                    Ver
                  </button>
                ) : null}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ---- Editor genérico para formularios sin pantalla dedicada ----
function GenericFormScreen({ paciente, record, formType, onBack }) {
  const [notas, setNotas] = useStateC("");
  const [fields, setFields] = useStateC([{ key: "", value: "" }]);
  const [saving, setSaving] = useStateC(false);
  const [saved, setSaved] = useStateC(false);
  const [error, setError] = useStateC("");

  const catalog = FORM_CATALOG.find((f) => f.type === formType);

  React.useEffect(() => {
    if (!record?.id || !formType) return;
    window.apiFetch(`/api/forms?record_id=${record.id}&form_type=${formType}`)
      .then((forms) => {
        if (!Array.isArray(forms) || !forms.length) return;
        try {
          const raw = forms[0].form_data;
          const d = (typeof raw === "string" ? JSON.parse(raw) : raw) || {};
          if (d.notas) setNotas(d.notas);
          if (Array.isArray(d.campos) && d.campos.length) setFields(d.campos);
        } catch (_) {}
      }).catch(() => {});
  }, [record?.id, formType]);

  const save = async () => {
    if (!record?.id) { setError("No hay expediente asociado. Acceda desde una atención."); return; }
    if (record.estado && record.estado !== "activo") { setError("El expediente está cerrado. No se pueden editar formularios."); return; }
    setSaving(true); setError("");
    try {
      const camposValidos = fields.filter((f) => f.key.trim());
      await window.apiFetch("/api/forms", {
        method: "POST",
        body: JSON.stringify({ record_id: record.id, form_type: formType, form_data: { notas, campos: camposValidos } }),
      });
      setSaved(true);
      setTimeout(() => onBack(), 500);
    } catch (ex) {
      setError(ex.message || "Error al guardar");
    } finally {
      setSaving(false);
    }
  };

  const setField = (i, k, v) => setFields((fs) => fs.map((f, j) => j === i ? { ...f, [k]: v } : f));

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18, maxWidth: 860, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <button onClick={onBack} className="g-iconbtn" style={{ border: "1px solid var(--line)", background: "var(--surface)", borderRadius: 9, padding: 8, cursor: "pointer", color: "var(--ink-2)", display: "flex" }}>
          <Icon name="back" size={18} />
        </button>
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <h1 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: "var(--ink)" }}>{catalog?.label || formType}</h1>
            {saved && <Badge tone="green" dot>Guardado</Badge>}
          </div>
          <div style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 2 }}>
            {paciente?.apellidos} {paciente?.nombres} · <span style={{ fontFamily: "var(--mono)" }}>{record?.record_number || "—"}</span>
          </div>
        </div>
        <Btn size="sm" onClick={save} disabled={saving}>{saving ? "Guardando…" : "Guardar borrador"}</Btn>
      </div>

      {error && (
        <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "10px 14px", borderRadius: 10, background: "var(--danger-soft)", color: "var(--danger)", fontSize: 13, fontWeight: 600 }}>
          <Icon name="alert" size={15} /> {error}
        </div>
      )}

      <Card>
        <div style={{ fontSize: 11.5, fontWeight: 800, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 12 }}>Campos del formulario</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {fields.map((f, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 2fr auto", gap: 10, alignItems: "center" }}>
              <input value={f.key} onChange={(e) => setField(i, "key", e.target.value)}
                placeholder="Campo" className="g-input" style={{ ...window.inputStyle, fontSize: 13 }} />
              <input value={f.value} onChange={(e) => setField(i, "value", e.target.value)}
                placeholder="Valor" className="g-input" style={{ ...window.inputStyle, fontSize: 13 }} />
              <button type="button" onClick={() => setFields((fs) => fs.length > 1 ? fs.filter((_, j) => j !== i) : fs)}
                style={{ border: "none", background: "transparent", color: "var(--ink-3)", cursor: "pointer", padding: 6, borderRadius: 7, display: "flex", alignItems: "center" }}>
                <Icon name="x" size={16} />
              </button>
            </div>
          ))}
          <button type="button" onClick={() => setFields((fs) => [...fs, { key: "", value: "" }])}
            style={{ display: "inline-flex", alignItems: "center", gap: 7, border: "1px dashed var(--line-2)", background: "transparent", color: "var(--ink-3)", cursor: "pointer", padding: "8px 14px", borderRadius: 9, fontFamily: "inherit", fontSize: 13, fontWeight: 600, alignSelf: "flex-start" }}>
            <Icon name="plus" size={14} /> Agregar campo
          </button>
        </div>
      </Card>

      <Card>
        <div style={{ fontSize: 11.5, fontWeight: 800, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".06em", marginBottom: 10 }}>Notas / observaciones</div>
        <textarea value={notas} onChange={(e) => setNotas(e.target.value)}
          placeholder="Ingrese notas u observaciones del formulario…" rows={5}
          className="g-input" style={{ ...window.inputStyle, resize: "vertical", width: "100%", lineHeight: 1.6, boxSizing: "border-box" }} />
      </Card>

      <div style={{ display: "flex", justifyContent: "flex-end", gap: 10 }}>
        <Btn variant="ghost" onClick={onBack}>Cancelar</Btn>
        <Btn size="lg" onClick={save} disabled={saving}>{saving ? "Guardando…" : "Guardar"}</Btn>
      </div>
    </div>
  );
}

Object.assign(window, { FormAnestesia, FormConsentimiento, ExpedienteModal, AtencionView, MonitorChart, GenericFormScreen, FORM_CATALOG });