// screens_patients.jsx — Búsqueda + Ficha clínica única (API-driven)
const { useState: useStateP, useEffect: useEffectP, useCallback: useCallbackP } = React;

const RIESGO = { alto: { tone: "red", label: "Alto riesgo" }, medio: { tone: "amber", label: "Riesgo medio" }, bajo: { tone: "green", label: "Riesgo bajo" } };

function parseJson(str, fallback) {
  try { return JSON.parse(str || "null") || fallback; } catch { return fallback; }
}

// ---- Búsqueda de pacientes ----
function PatientSearch({ onOpen, onNuevo }) {
  const [q, setQ] = useStateP("");
  const [patients, setPatients] = useStateP([]);
  const [total, setTotal] = useStateP(0);
  const [loading, setLoading] = useStateP(false);
  const [searched, setSearched] = useStateP(false);

  const doSearch = useCallbackP((query) => {
    setLoading(true);
    const params = query ? `?q=${encodeURIComponent(query)}&limit=30` : "?limit=30";
    window.apiFetch(`/api/patients${params}`)
      .then((data) => {
        setPatients(Array.isArray(data?.patients) ? data.patients : []);
        setTotal(data?.total || 0);
      })
      .catch(() => { setPatients([]); setTotal(0); })
      .finally(() => { setLoading(false); setSearched(true); });
  }, []);

  useEffectP(() => {
    doSearch("");
  }, []);

  useEffectP(() => {
    if (!searched) return;
    const t = setTimeout(() => doSearch(q.trim()), 350);
    return () => clearTimeout(t);
  }, [q]);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 14 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 23, fontWeight: 800, letterSpacing: "-.02em", color: "var(--ink)" }}>Pacientes</h1>
          <p style={{ margin: "4px 0 0", fontSize: 14, color: "var(--ink-3)" }}>{total > 0 ? `${total} paciente${total !== 1 ? "s" : ""} registrado${total !== 1 ? "s" : ""}` : "Cargando…"}</p>
        </div>
        <Btn icon="plus" size="lg" onClick={onNuevo}>Registrar paciente</Btn>
      </div>

      <div style={{ position: "relative" }}>
        <span style={{ position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)", color: "var(--ink-3)", display: "flex" }}><Icon name="search" size={20} /></span>
        <input value={q} onChange={(e) => setQ(e.target.value)} autoFocus
          placeholder="Buscar por cédula, nombre o apellido…"
          className="g-input" style={{ ...window.inputStyle, paddingLeft: 48, paddingTop: 14, paddingBottom: 14, fontSize: 15.5, borderRadius: 13 }} />
        {loading && <span style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)" }}><span className="g-spin" style={{ width: 16, height: 16, border: "2px solid var(--line-2)", borderTopColor: "var(--accent)", borderRadius: 99, display: "inline-block" }} /></span>}
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--line)", borderRadius: 14, overflow: "hidden", border: "1px solid var(--line)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2.2fr 1fr 1fr 1.3fr 0.9fr", gap: 14, padding: "11px 18px", background: "var(--surface)", fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".04em" }} className="g-hide-mobile">
          <span>Paciente</span><span>Cédula</span><span>Seguro</span><span>Grupo sanguíneo</span><span>Registrado</span>
        </div>
        {patients.map((p) => {
          const av = window.avatarText(p.nombres, p.apellidos);
          const col = window.avatarColor(p.id);
          const edad = window.calcEdad(p.fecha_nacimiento);
          return (
            <button key={p.id} onClick={() => onOpen(p)} className="g-patientrow" style={{ display: "grid", gridTemplateColumns: "2.2fr 1fr 1fr 1.3fr 0.9fr", gap: 14, alignItems: "center", padding: "13px 18px", background: "var(--surface)", border: "none", textAlign: "left", cursor: "pointer", fontFamily: "inherit" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
                <Avatar text={av} color={col} size={40} />
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--ink)" }}>{p.apellidos} {p.nombres}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{p.sexo === "F" ? "Femenino" : p.sexo === "M" ? "Masculino" : "—"}{edad !== null ? ` · ${edad} años` : ""}</div>
                </div>
              </div>
              <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--ink-2)" }}>{p.cedula || "—"}</span>
              <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{p.aseguradora || "—"}</span>
              <span style={{ fontFamily: "var(--mono)", fontSize: 13, color: "var(--ink-2)" }}>{p.grupo_sanguineo || "—"}</span>
              <span style={{ fontSize: 12.5, color: "var(--ink-3)" }}>{p.created_at?.slice(0, 10) || "—"}</span>
            </button>
          );
        })}
        {!loading && searched && patients.length === 0 && (
          <div style={{ padding: 32, textAlign: "center", color: "var(--ink-3)", background: "var(--surface)" }}>
            {q ? `Sin resultados para "${q}".` : "No hay pacientes registrados en el sistema."}
          </div>
        )}
      </div>
    </div>
  );
}

// ---- Ficha clínica única ----
function PatientDetail({ paciente: pacInicial, onBack, onOpenCopilot, onNewAtencion, onOpenExpediente, onOpenAtencion }) {
  const [tab, setTab] = useStateP("resumen");
  const [p, setP] = useStateP(pacInicial);
  const [records, setRecords] = useStateP([]);
  const [loading, setLoading] = useStateP(true);

  useEffectP(() => {
    if (!pacInicial?.id) { setLoading(false); return; }
    Promise.all([
      window.apiFetch(`/api/patients/${pacInicial.id}`).catch(() => pacInicial),
      window.apiFetch(`/api/records?patient_id=${pacInicial.id}`).catch(() => []),
    ]).then(([fullPac, recs]) => {
      setP(fullPac || pacInicial);
      setRecords(Array.isArray(recs) ? recs : []);
    }).finally(() => setLoading(false));
  }, [pacInicial?.id]);

  const alergias = parseJson(p.alergias, []);
  const antPers = parseJson(p.antecedentes_personales, {});
  const medicacion = parseJson(p.medicacion_habitual, []);
  const edad = window.calcEdad(p.fecha_nacimiento);
  const av = window.avatarText(p.nombres, p.apellidos);
  const col = window.avatarColor(p.id);

  const tabs = [
    { id: "resumen", label: "Resumen" },
    { id: "atenciones", label: `Atenciones (${records.length})` },
    { id: "vitales", label: "Signos vitales" },
    { id: "documentos", label: "Documentos" },
    { id: "adjuntos", label: "Adjuntos" },
  ];

  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>
  );

  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 pacientes
      </button>

      <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 16, padding: 20, boxShadow: "var(--shadow)" }}>
        <div style={{ display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap" }}>
          <Avatar text={av} color={col} size={66} />
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
              <h1 style={{ margin: 0, fontSize: 23, fontWeight: 800, letterSpacing: "-.02em", color: "var(--ink)" }}>{p.apellidos} {p.nombres}</h1>
            </div>
            <div style={{ display: "flex", gap: 16, flexWrap: "wrap", marginTop: 7, fontSize: 13, color: "var(--ink-2)" }}>
              <span><strong style={{ color: "var(--ink-3)", fontWeight: 600 }}>ID</strong> <span style={{ fontFamily: "var(--mono)" }}>{p.id?.slice(0, 8).toUpperCase()}</span></span>
              <span><strong style={{ color: "var(--ink-3)", fontWeight: 600 }}>Cédula</strong> <span style={{ fontFamily: "var(--mono)" }}>{p.cedula || "—"}</span></span>
              <span>{p.sexo === "F" ? "Femenino" : p.sexo === "M" ? "Masculino" : "—"}{edad !== null ? ` · ${edad} años` : ""}</span>
              {p.grupo_sanguineo && <span>Grupo sanguíneo <strong>{p.grupo_sanguineo}</strong></span>}
              {p.aseguradora && <span>{p.aseguradora}</span>}
            </div>
          </div>
          <div style={{ display: "flex", gap: 9, flexWrap: "wrap" }}>
            <Btn variant="soft" icon="ai" onClick={onOpenCopilot}>Copiloto IA</Btn>
            <Btn variant="ghost" icon="pdf" onClick={() => onOpenExpediente(p)}>Expediente PDF</Btn>
            <Btn icon="plus" onClick={() => onNewAtencion(p)}>Nueva atención</Btn>
          </div>
        </div>

        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
          {alergias.length > 0 ? alergias.map((a, i) => {
            const txt = typeof a === "string" ? a : (a.sustancia || JSON.stringify(a));
            return (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 7, padding: "6px 12px", borderRadius: 9, background: "var(--danger-soft)", color: "var(--danger)", fontSize: 12.5, fontWeight: 600 }}>
                <Icon name="alert" size={15} /> Alergia: {txt}
              </div>
            );
          }) : (
            <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "6px 12px", borderRadius: 9, background: "color-mix(in oklch, var(--ok) 14%, transparent)", color: "var(--ok-ink)", fontSize: 12.5, fontWeight: 600 }}>
              <Icon name="checkCircle" size={15} /> Sin alergias conocidas
            </div>
          )}
          {medicacion.map((m, i) => {
            const txt = typeof m === "string" ? m : (m.nombre || JSON.stringify(m));
            return (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 7, padding: "6px 12px", borderRadius: 9, background: "var(--chip)", color: "var(--ink-2)", fontSize: 12.5, fontWeight: 600 }}>
                <Icon name="heart" size={14} /> {txt}
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ display: "flex", gap: 4, borderBottom: "1px solid var(--line)", overflowX: "auto" }}>
        {tabs.map((t) => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: "11px 16px", border: "none", background: "transparent", cursor: "pointer", fontFamily: "inherit",
            fontSize: 14, fontWeight: 600, whiteSpace: "nowrap",
            color: tab === t.id ? "var(--accent)" : "var(--ink-3)",
            borderBottom: tab === t.id ? "2px solid var(--accent)" : "2px solid transparent", marginBottom: -1,
          }}>{t.label}</button>
        ))}
      </div>

      {tab === "resumen" && <ResumenTab p={p} antPers={antPers} records={records} onOpenAtencion={onOpenAtencion} />}
      {tab === "atenciones" && <AtencionesTab records={records} onOpenAtencion={onOpenAtencion} />}
      {tab === "vitales" && <VitalesTab records={records} paciente={p} />}
      {tab === "documentos" && <DocumentosTab records={records} onOpenExpediente={() => onOpenExpediente(p)} />}
      {tab === "adjuntos" && <AdjuntosTab />}
    </div>
  );
}

function ResumenTab({ p, antPers, records, onOpenAtencion }) {
  const lastRecord = records[0];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 18, alignItems: "start" }} className="g-dash-grid">
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        <Card title="Resumen clínico IA" icon="ai">
          <AISummary paciente={p} />
        </Card>
        <Card title="Últimas atenciones" icon="folder" pad={false}>
          <div style={{ padding: 8 }}>
            {records.length === 0 ? (
              <div style={{ padding: "20px 14px", textAlign: "center", color: "var(--ink-3)", fontSize: 13 }}>Sin atenciones registradas.</div>
            ) : records.slice(0, 3).map((r) => <RecordItem key={r.id} r={r} onOpen={() => onOpenAtencion(r)} />)}
          </div>
        </Card>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {lastRecord && (
          <Card title="Último registro de signos vitales" subtitle={lastRecord.fecha_ingreso?.slice(0, 10)} icon="vitals">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {lastRecord.presion_arterial && <VitalMini label="T/A" value={lastRecord.presion_arterial} unit="mmHg" />}
              {lastRecord.frecuencia_cardiaca && <VitalMini label="FC" value={lastRecord.frecuencia_cardiaca} unit="lpm" />}
              {lastRecord.frecuencia_respiratoria && <VitalMini label="FR" value={lastRecord.frecuencia_respiratoria} unit="rpm" />}
              {lastRecord.saturacion_o2 && <VitalMini label="SatO₂" value={`${lastRecord.saturacion_o2}%`} unit="" />}
              {lastRecord.temperatura && <VitalMini label="Temp" value={lastRecord.temperatura} unit="°C" />}
              {lastRecord.peso_kg && <VitalMini label="Peso" value={`${lastRecord.peso_kg} kg`} unit="" />}
            </div>
          </Card>
        )}
        <Card title="Datos de contacto" icon="user">
          <DL rows={[
            ["Teléfono", p.telefono || "—"],
            ["Teléfono 2", p.telefono_secundario || "—"],
            ["Email", p.email || "—"],
            ["Dirección", [p.direccion, p.ciudad, p.provincia].filter(Boolean).join(", ") || "—"],
            ["Estado civil", p.estado_civil || "—"],
            ["Contacto emergencia", p.contacto_emergencia || "—"],
            ["Tel. emergencia", p.telefono_emergencia || "—"],
          ].filter(([, v]) => v && v !== "—")} />
        </Card>
        {(antPers.quirurgicos || antPers.patologicos || antPers.alergias) && (
          <Card title="Antecedentes personales" icon="heart">
            <DL rows={[
              antPers.quirurgicos && ["Quirúrgicos", antPers.quirurgicos],
              antPers.patologicos && ["Patológicos", antPers.patologicos],
              antPers.gineco && ["Gineco-obstétrico", antPers.gineco],
              antPers.alergias && ["Alergias", antPers.alergias],
            ].filter(Boolean)} />
          </Card>
        )}
      </div>
    </div>
  );
}

function VitalMini({ label, value, unit }) {
  return (
    <div style={{ background: "var(--field)", borderRadius: 10, padding: "10px 12px" }}>
      <div style={{ fontSize: 11.5, color: "var(--ink-3)", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 19, fontWeight: 800, color: "var(--ink)", fontFamily: "var(--mono)", letterSpacing: "-.02em" }}>{value} <span style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-3)" }}>{unit}</span></div>
    </div>
  );
}

function DL({ rows }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
      {rows.map(([k, v]) => (
        <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 14, fontSize: 13 }}>
          <span style={{ color: "var(--ink-3)" }}>{k}</span>
          <span style={{ color: "var(--ink)", fontWeight: 600, textAlign: "right" }}>{v}</span>
        </div>
      ))}
    </div>
  );
}

const TIPO_ICON = { emergencia: "alert", cirugia: "heart", ambulatorio: "stethoscope", hospitalizacion: "vitals", consulta: "doc" };
const ESTADO_REC_TONE = { activo: "amber", cerrado: "neutral", alta: "green", transferido: "blue", fallecido: "red" };

function RecordItem({ r, onOpen }) {
  return (
    <button onClick={onOpen} className="g-agendarow" style={{ display: "flex", gap: 13, width: "100%", textAlign: "left", padding: "11px 12px", border: "none", borderRadius: 10, background: "transparent", cursor: "pointer", fontFamily: "inherit" }}>
      <span style={{ width: 36, height: 36, borderRadius: 9, background: "var(--accent-soft)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name={TIPO_ICON[r.tipo_atencion] || "doc"} size={18} /></span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
          <span style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink)" }}>{r.tipo_atencion}</span>
          <Badge tone={ESTADO_REC_TONE[r.estado] || "neutral"}>{r.estado}</Badge>
          <span style={{ fontSize: 12, color: "var(--ink-3)", fontFamily: "var(--mono)" }}>{r.record_number}</span>
        </div>
        <div style={{ fontSize: 12.5, color: "var(--ink-2)", marginTop: 2 }}>{r.motivo_consulta || r.diagnostico_principal || "—"}</div>
        <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 3 }}>{r.fecha_ingreso?.slice(0, 10)} {r.hora_ingreso ? `· ${r.hora_ingreso}` : ""}{r.medico_nombre ? ` · ${r.medico_nombre}` : ""}</div>
      </div>
      <span style={{ color: "var(--ink-3)", alignSelf: "center" }}><Icon name="chevron" size={17} /></span>
    </button>
  );
}

function AtencionesTab({ records, onOpenAtencion }) {
  return (
    <Card pad={false}>
      {records.length === 0 ? (
        <div style={{ padding: 32, textAlign: "center", color: "var(--ink-3)", fontSize: 13 }}>No hay atenciones registradas para este paciente.</div>
      ) : (
        <div style={{ padding: 10, display: "flex", flexDirection: "column", gap: 4 }}>
          {records.map((r, i) => (
            <React.Fragment key={r.id}>
              {i > 0 && <div style={{ height: 1, background: "var(--line)", margin: "0 12px" }} />}
              <RecordItem r={r} onOpen={() => onOpenAtencion(r)} />
            </React.Fragment>
          ))}
        </div>
      )}
    </Card>
  );
}

function VitalesInputModal({ open, onClose, paciente, onSaved }) {
  const todayStr = () => new Date().toISOString().slice(0, 10);
  const nowStr   = () => { const d = new Date(); return `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}`; };

  const [saving, setSaving] = React.useState(false);
  const [error, setError]   = React.useState("");
  const [fecha, setFecha]   = React.useState(todayStr());
  const [hora, setHora]     = React.useState(nowStr());
  const [v, setV] = React.useState({ presion_arterial: "", frecuencia_cardiaca: "", frecuencia_respiratoria: "", saturacion_o2: "", temperatura: "", glucosa: "", peso_kg: "", talla_cm: "" });

  React.useEffect(() => { if (open) { setFecha(todayStr()); setHora(nowStr()); setError(""); } }, [open]);

  const set = (k, val) => setV((prev) => ({ ...prev, [k]: val }));

  const save = async () => {
    const NUMERIC = ["frecuencia_cardiaca","frecuencia_respiratoria","saturacion_o2","temperatura","glucosa","peso_kg","talla_cm"];
    const hasVital = Object.values(v).some((x) => x.trim());
    if (!hasVital) { setError("Ingrese al menos un signo vital"); return; }
    setSaving(true); setError("");
    try {
      const body = { patient_id: paciente.id, tipo_atencion: "consulta", fecha_ingreso: fecha + "T" + hora + ":00Z", hora_ingreso: hora };
      if (v.presion_arterial.trim()) body.presion_arterial = v.presion_arterial.trim();
      NUMERIC.forEach((k) => { if (v[k].trim()) body[k] = Number(v[k]); });
      const record = await window.apiFetch("/api/records", { method: "POST", body: JSON.stringify(body) });
      onSaved(record);
      onClose();
      setV({ presion_arterial: "", frecuencia_cardiaca: "", frecuencia_respiratoria: "", saturacion_o2: "", temperatura: "", glucosa: "", peso_kg: "", talla_cm: "" });
    } catch (ex) {
      setError(ex.message || "Error al guardar");
    } finally {
      setSaving(false);
    }
  };

  const inp = (label, k, placeholder) => (
    <Field label={label}>
      <input value={v[k]} onChange={(e) => set(k, e.target.value)} placeholder={placeholder}
        className="g-input" style={{ ...window.inputStyle }} />
    </Field>
  );

  return (
    <Modal open={open} onClose={onClose} title="Registrar signos vitales" width={560}
      footer={<>
        <Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
        <Btn onClick={save} disabled={saving}>{saving ? "Guardando…" : "Registrar"}</Btn>
      </>}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 16 }}>
        <Field label="Fecha del registro">
          <input type="date" value={fecha} onChange={(e) => setFecha(e.target.value)}
            className="g-input" style={{ ...window.inputStyle }} />
        </Field>
        <Field label="Hora del registro">
          <input type="time" value={hora} onChange={(e) => setHora(e.target.value)}
            className="g-input" style={{ ...window.inputStyle }} />
        </Field>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {inp("T/A (mmHg)", "presion_arterial", "120/80")}
        {inp("FC (lpm)", "frecuencia_cardiaca", "72")}
        {inp("FR (rpm)", "frecuencia_respiratoria", "18")}
        {inp("SatO₂ (%)", "saturacion_o2", "98")}
        {inp("Temperatura (°C)", "temperatura", "36.5")}
        {inp("Glucosa (mg/dl)", "glucosa", "100")}
        {inp("Peso (kg)", "peso_kg", "70")}
        {inp("Talla (cm)", "talla_cm", "165")}
      </div>
      {error && (
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 13px", borderRadius: 9, background: "var(--danger-soft)", color: "var(--danger)", fontSize: 13, fontWeight: 600, marginTop: 12 }}>
          <Icon name="alert" size={14} /> {error}
        </div>
      )}
    </Modal>
  );
}

function VitalesTab({ records: initialRecords, paciente }) {
  const [records, setRecords] = React.useState(initialRecords || []);
  const [showInput, setShowInput] = React.useState(false);

  React.useEffect(() => setRecords(initialRecords || []), [initialRecords]);

  const withVitals = records.filter((r) => r.presion_arterial || r.frecuencia_cardiaca || r.temperatura || r.saturacion_o2);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", justifyContent: "flex-end" }}>
        <Btn icon="plus" size="sm" onClick={() => setShowInput(true)}>Registrar signos vitales</Btn>
      </div>
      {withVitals.length === 0 ? (
        <Card>
          <div style={{ textAlign: "center", padding: 28, color: "var(--ink-3)", fontSize: 13 }}>No hay signos vitales registrados.</div>
        </Card>
      ) : (
        <Card pad={false}>
          <div style={{ overflowX: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
              <thead>
                <tr>{["Fecha", "T/A", "FC", "FR", "SatO₂", "Temp", "Peso", "Talla"].map((l) => (
                  <th key={l} style={{ textAlign: l === "Fecha" ? "left" : "center", padding: "12px 14px", fontSize: 11.5, fontWeight: 700, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".03em", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap" }}>{l}</th>
                ))}</tr>
              </thead>
              <tbody>
                {withVitals.map((r) => (
                  <tr key={r.id} className="g-trow">
                    <td style={{ padding: "12px 14px", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap" }}>{r.fecha_ingreso?.slice(0, 16).replace("T", " ")}</td>
                    {[r.presion_arterial, r.frecuencia_cardiaca ? r.frecuencia_cardiaca + " lpm" : null,
                      r.frecuencia_respiratoria ? r.frecuencia_respiratoria + " rpm" : null,
                      r.saturacion_o2 ? r.saturacion_o2 + "%" : null,
                      r.temperatura ? r.temperatura + "°C" : null,
                      r.peso_kg ? r.peso_kg + " kg" : null,
                      r.talla_cm ? r.talla_cm + " cm" : null].map((val, i) => (
                      <td key={i} style={{ padding: "12px 14px", textAlign: "center", borderBottom: "1px solid var(--line)", fontFamily: "var(--mono)", color: "var(--ink)", fontWeight: 600, whiteSpace: "nowrap" }}>{val || "—"}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}
      {paciente && (
        <VitalesInputModal open={showInput} onClose={() => setShowInput(false)} paciente={paciente}
          onSaved={(rec) => setRecords((prev) => [rec, ...prev])} />
      )}
    </div>
  );
}

function DocumentosTab({ records, onOpenExpediente }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 10 }}>
        <p style={{ margin: 0, fontSize: 13, color: "var(--ink-3)" }}>{records.length} expediente{records.length !== 1 ? "s" : ""} clínico{records.length !== 1 ? "s" : ""}</p>
        <Btn icon="pdf" onClick={onOpenExpediente}>Generar expediente consolidado</Btn>
      </div>
      {records.length === 0 ? (
        <Card>
          <div style={{ textAlign: "center", padding: 28, color: "var(--ink-3)", fontSize: 13 }}>No hay documentos registrados.</div>
        </Card>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 12 }}>
          {records.map((r) => (
            <div key={r.id} style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, padding: 14, boxShadow: "var(--shadow)", display: "flex", gap: 12, alignItems: "flex-start" }}>
              <span style={{ width: 38, height: 38, borderRadius: 9, background: "var(--danger-soft)", color: "var(--danger)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name="pdf" size={19} /></span>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 13.5, fontWeight: 700, color: "var(--ink)" }}>{r.record_number}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 3 }}>{r.fecha_ingreso?.slice(0, 10)} · {r.tipo_atencion}</div>
                <div style={{ marginTop: 6 }}><Badge tone={ESTADO_REC_TONE[r.estado] || "neutral"}>{r.estado}</Badge></div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function AdjuntosTab() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ border: "2px dashed var(--line-2)", borderRadius: 14, padding: 26, textAlign: "center", color: "var(--ink-3)" }}>
        <Icon name="attach" size={26} style={{ opacity: .6 }} />
        <p style={{ margin: "8px 0 0", fontSize: 13.5, fontWeight: 600, color: "var(--ink-2)" }}>Arrastra archivos clínicos aquí</p>
        <p style={{ margin: "2px 0 0", fontSize: 12 }}>PDF, imágenes DICOM, videos · hasta 50 MB</p>
        <div style={{ marginTop: 14 }}><Btn variant="ghost" size="sm" icon="attach">Seleccionar archivo</Btn></div>
      </div>
    </div>
  );
}

// ---- Registro de nuevo paciente ----
function PatientCreate({ onBack, onCreated }) {
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState("");
  const [form, setForm] = React.useState({
    nombres: "", apellidos: "", cedula: "", fecha_nacimiento: "",
    sexo: "U", grupo_sanguineo: "?", etnia: "", estado_civil: "",
    instruccion: "", ocupacion: "", empresa: "",
    telefono: "", telefono_secundario: "", email: "",
    direccion: "", ciudad: "Guayaquil", provincia: "Guayas",
    aseguradora: "", numero_afiliacion: "",
    contacto_emergencia: "", telefono_emergencia: "", parentesco_emergencia: "",
  });
  const [alergias, setAlergias] = React.useState([]);
  const [alergiasInput, setAlergiasInput] = React.useState("");
  const [medicacion, setMedicacion] = React.useState([]);
  const [medicacionInput, setMedicacionInput] = React.useState("");
  const [antPers, setAntPers] = React.useState({ quirurgicos: "", patologicos: "", gineco: "" });
  const [antFam, setAntFam] = React.useState({ cardio: "", diabetes: "", cancer: "", otros: "" });

  const set = (field, value) => setForm((f) => ({ ...f, [field]: value }));

  const addAlergia = () => {
    const v = alergiasInput.trim();
    if (v && !alergias.includes(v)) setAlergias((a) => [...a, v]);
    setAlergiasInput("");
  };
  const addMed = () => {
    const v = medicacionInput.trim();
    if (v && !medicacion.includes(v)) setMedicacion((m) => [...m, v]);
    setMedicacionInput("");
  };

  const submit = async (e) => {
    e.preventDefault();
    if (!form.nombres.trim() || !form.apellidos.trim()) { setError("Nombres y apellidos son requeridos"); return; }
    setSaving(true); setError("");
    try {
      const body = {
        ...form,
        nombres: form.nombres.trim(), apellidos: form.apellidos.trim(),
        alergias,
        medicacion_habitual: medicacion,
        antecedentes_personales: Object.fromEntries(Object.entries(antPers).filter(([, v]) => v)),
        antecedentes_familiares: Object.fromEntries(Object.entries(antFam).filter(([, v]) => v)),
      };
      const patient = await window.apiFetch("/api/patients", { method: "POST", body: JSON.stringify(body) });
      onCreated(patient);
    } catch (ex) {
      setError(ex.message || "Error al registrar paciente"); setSaving(false);
    }
  };

  const Sec = ({ label }) => (
    <div style={{ fontSize: 11.5, fontWeight: 800, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: ".08em", paddingBottom: 10, borderBottom: "1px solid var(--line)", marginBottom: 14 }}>{label}</div>
  );
  const inp = (label, field, type = "text", placeholder = "") => (
    <Field label={label}>
      <input value={form[field]} onChange={(e) => set(field, e.target.value)}
        type={type} placeholder={placeholder} className="g-input" style={{ ...window.inputStyle }} />
    </Field>
  );
  const sel = (label, field, options) => (
    <Field label={label}>
      <select value={form[field]} onChange={(e) => set(field, e.target.value)}
        className="g-input" style={{ ...window.inputStyle }}>
        {options.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
      </select>
    </Field>
  );
  const g2 = { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 };
  const g3 = { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20, maxWidth: 920, margin: "0 auto" }}>
      <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 pacientes
      </button>
      <div>
        <h1 style={{ margin: 0, fontSize: 23, fontWeight: 800, letterSpacing: "-.02em", color: "var(--ink)" }}>Registrar nuevo paciente</h1>
        <p style={{ margin: "4px 0 0", fontSize: 14, color: "var(--ink-3)" }}>Formulario de admisión MSP-001 — complete todos los datos disponibles</p>
      </div>

      <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        <Card>
          <Sec label="Datos de identificación" />
          <div style={g2} className="g-form-grid">
            {inp("Apellidos *", "apellidos", "text", "Apellidos del paciente")}
            {inp("Nombres *", "nombres", "text", "Nombres del paciente")}
            {inp("Cédula / Pasaporte", "cedula", "text", "0000000000")}
            {inp("Fecha de nacimiento", "fecha_nacimiento", "date")}
            {sel("Sexo", "sexo", [["U","—"],["M","Masculino"],["F","Femenino"]])}
            {sel("Grupo sanguíneo", "grupo_sanguineo", [["?","—"],["A+","A+"],["A-","A-"],["B+","B+"],["B-","B-"],["AB+","AB+"],["AB-","AB-"],["O+","O+"],["O-","O-"]])}
            {sel("Estado civil", "estado_civil", [["","—"],["soltero","Soltero/a"],["casado","Casado/a"],["divorciado","Divorciado/a"],["viudo","Viudo/a"],["union_libre","Unión libre"]])}
            {sel("Nivel de instrucción", "instruccion", [["","—"],["ninguna","Ninguna"],["primaria","Primaria"],["secundaria","Secundaria"],["universitaria","Universitaria"],["postgrado","Postgrado"]])}
            {inp("Etnia / Pueblo", "etnia", "text", "Mestizo, indígena, afrodescendiente…")}
            {inp("Ocupación", "ocupacion", "text", "Profesión u oficio")}
          </div>
        </Card>

        <Card>
          <Sec label="Datos de contacto" />
          <div style={g2} className="g-form-grid">
            {inp("Teléfono principal", "telefono", "tel", "0999 000 000")}
            {inp("Teléfono secundario", "telefono_secundario", "tel", "Opcional")}
            {inp("Correo electrónico", "email", "email", "paciente@email.com")}
            {inp("Dirección domicilio", "direccion", "text", "Calle, número, referencia")}
            {inp("Ciudad", "ciudad", "text", "Ciudad")}
            {inp("Provincia", "provincia", "text", "Provincia")}
          </div>
        </Card>

        <Card>
          <Sec label="Seguro / Afiliación" />
          <div style={g2} className="g-form-grid">
            {inp("Aseguradora / Seguro", "aseguradora", "text", "IESS, Seguros Sucre, privado…")}
            {inp("Número de afiliación / póliza", "numero_afiliacion", "text", "Número de póliza o afiliación")}
          </div>
        </Card>

        <Card>
          <Sec label="Contacto de emergencia" />
          <div style={g3} className="g-form-grid">
            {inp("Nombre del contacto", "contacto_emergencia", "text", "Familiar o responsable")}
            {inp("Teléfono de contacto", "telefono_emergencia", "tel", "0999 000 000")}
            {inp("Parentesco", "parentesco_emergencia", "text", "Padre, madre, cónyuge…")}
          </div>
        </Card>

        <Card>
          <Sec label="Alergias conocidas" />
          <div style={{ display: "flex", gap: 10, marginBottom: 10 }}>
            <input value={alergiasInput} onChange={(e) => setAlergiasInput(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addAlergia(); } }}
              placeholder="Escribir alergia y presionar Agregar o Enter…"
              className="g-input" style={{ ...window.inputStyle, flex: 1 }} />
            <Btn type="button" variant="soft" size="sm" onClick={addAlergia}>Agregar</Btn>
          </div>
          {alergias.length > 0 ? (
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {alergias.map((a, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 7, padding: "5px 11px", borderRadius: 8, background: "var(--danger-soft)", color: "var(--danger)", fontSize: 12.5, fontWeight: 600 }}>
                  <Icon name="alert" size={13} /> {a}
                  <button type="button" onClick={() => setAlergias((al) => al.filter((_, j) => j !== i))}
                    style={{ border: "none", background: "transparent", color: "var(--danger)", cursor: "pointer", padding: "0 0 0 6px", lineHeight: 1, fontSize: 17, fontWeight: 700 }}>×</button>
                </div>
              ))}
            </div>
          ) : <div style={{ fontSize: 13, color: "var(--ink-3)" }}>Sin alergias registradas. Dejar vacío si no se conocen.</div>}
        </Card>

        <Card>
          <Sec label="Medicación habitual" />
          <div style={{ display: "flex", gap: 10, marginBottom: 10 }}>
            <input value={medicacionInput} onChange={(e) => setMedicacionInput(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addMed(); } }}
              placeholder="Medicamento y dosis, luego Agregar o Enter…"
              className="g-input" style={{ ...window.inputStyle, flex: 1 }} />
            <Btn type="button" variant="soft" size="sm" onClick={addMed}>Agregar</Btn>
          </div>
          {medicacion.length > 0 && (
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {medicacion.map((m, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 7, padding: "5px 11px", borderRadius: 8, background: "var(--chip)", color: "var(--ink-2)", fontSize: 12.5, fontWeight: 600 }}>
                  <Icon name="heart" size={13} /> {m}
                  <button type="button" onClick={() => setMedicacion((med) => med.filter((_, j) => j !== i))}
                    style={{ border: "none", background: "transparent", color: "var(--ink-3)", cursor: "pointer", padding: "0 0 0 6px", lineHeight: 1, fontSize: 17, fontWeight: 700 }}>×</button>
                </div>
              ))}
            </div>
          )}
        </Card>

        <Card>
          <Sec label="Antecedentes personales" />
          <div style={g3} className="g-form-grid">
            <Field label="Quirúrgicos">
              <textarea value={antPers.quirurgicos} onChange={(e) => setAntPers((a) => ({ ...a, quirurgicos: e.target.value }))}
                rows={2} placeholder="Cirugías previas, fecha aprox." className="g-input" style={{ ...window.inputStyle, resize: "vertical" }} />
            </Field>
            <Field label="Patológicos">
              <textarea value={antPers.patologicos} onChange={(e) => setAntPers((a) => ({ ...a, patologicos: e.target.value }))}
                rows={2} placeholder="HTA, DM, enfermedades crónicas…" className="g-input" style={{ ...window.inputStyle, resize: "vertical" }} />
            </Field>
            <Field label="Gineco-obstétrico">
              <textarea value={antPers.gineco} onChange={(e) => setAntPers((a) => ({ ...a, gineco: e.target.value }))}
                rows={2} placeholder="Gestas, partos, abortos, FUM…" className="g-input" style={{ ...window.inputStyle, resize: "vertical" }} />
            </Field>
          </div>
        </Card>

        <Card>
          <Sec label="Antecedentes familiares" />
          <div style={g2} className="g-form-grid">
            <Field label="Cardiopatías">
              <input value={antFam.cardio} onChange={(e) => setAntFam((a) => ({ ...a, cardio: e.target.value }))}
                placeholder="HTA, infarto, ACV, arritmias…" className="g-input" style={{ ...window.inputStyle }} />
            </Field>
            <Field label="Diabetes mellitus">
              <input value={antFam.diabetes} onChange={(e) => setAntFam((a) => ({ ...a, diabetes: e.target.value }))}
                placeholder="Padre, madre, tipo…" className="g-input" style={{ ...window.inputStyle }} />
            </Field>
            <Field label="Cáncer">
              <input value={antFam.cancer} onChange={(e) => setAntFam((a) => ({ ...a, cancer: e.target.value }))}
                placeholder="Tipo, parentesco…" className="g-input" style={{ ...window.inputStyle }} />
            </Field>
            <Field label="Otros">
              <input value={antFam.otros} onChange={(e) => setAntFam((a) => ({ ...a, otros: e.target.value }))}
                placeholder="Enfermedades hereditarias u otras…" className="g-input" style={{ ...window.inputStyle }} />
            </Field>
          </div>
        </Card>

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

        <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", paddingBottom: 8 }}>
          <Btn type="button" variant="ghost" onClick={onBack}>Cancelar</Btn>
          <Btn type="submit" size="lg" disabled={saving}>
            {saving
              ? <><span className="g-spin" style={{ width: 16, height: 16, border: "2px solid rgba(255,255,255,.4)", borderTopColor: "#fff", borderRadius: 99, display: "inline-block", marginRight: 8 }} />Registrando…</>
              : <><Icon name="plus" size={17} style={{ marginRight: 6 }} />Registrar paciente</>}
          </Btn>
        </div>
      </form>
    </div>
  );
}

Object.assign(window, { PatientSearch, PatientDetail, PatientCreate, RIESGO });