/* ============================================================
   SYMPHO · ZAMNÁ — Engineer + Client views + app dispatcher
   Visita Técnica (wizard) · Asistente IA · Portal · Reporte & firma
   ============================================================ */

// ============================================================
//  INGENIERO · Mi agenda
// ============================================================
function ZamEngAgenda() {
  const d = window.ZAMNA;
  const nav = useNav();
  return (
    <div className="canvas-in rise">
      <AppHead app="zamna" title="Mi agenda" sub="Iván Solís · ingeniero de campo · 22 jun 2026" />
      {d.agenda.map((g, gi) => (
        <div key={gi} style={{ marginBottom: 20 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>{g.day}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {g.items.map((it, i) => (
              <div key={i} className="card" style={{ padding: 16, display: "flex", gap: 16, alignItems: "center" }}>
                <div style={{ textAlign: "center", width: 56 }}>
                  <div className="disp" style={{ fontSize: 17, fontWeight: 600 }}>{it.hour}</div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--text-4)" }}>{it.type}</div>
                </div>
                <div style={{ width: 1, alignSelf: "stretch", background: "var(--line)" }} />
                <div style={{ flex: 1 }}>
                  <b style={{ fontSize: 14.5 }}>{it.site}</b>
                  <div className="mono" style={{ fontSize: 11, color: "var(--text-4)", marginTop: 3 }}>{it.project}</div>
                </div>
                <Pill status={it.status} />
                {it.status === "En proceso"
                  ? <button className="btn btn-primary" style={{ background: ZAccent }} onClick={() => nav.openApp("zamna", "i-visita")}>Continuar <Icon name="arrowr" size={14} /></button>
                  : <button className="btn" onClick={() => nav.openApp("zamna", "i-visita")}><Icon name="play" size={13} /> Iniciar</button>}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// ============================================================
//  INGENIERO · Visita Técnica (the wizard — heart of the product)
// ============================================================
const ZW_STEPS = [
  { id: "general", n: "01", label: "Información general", sub: "datos del sitio" },
  { id: "checklist", n: "02", label: "Checklist", sub: "tipo de trabajo" },
  { id: "evidencia", n: "03", label: "Evidencia", sub: "antes · durante · después" },
  { id: "plano", n: "04", label: "Plano del sitio", sub: "croquis del MDF" },
  { id: "topologia", n: "05", label: "Topología", sub: "diagrama de red" },
  { id: "inventario", n: "06", label: "Inventario", sub: "activos del sitio" },
  { id: "materiales", n: "07", label: "Materiales", sub: "consumo y compra" },
  { id: "trabajo", n: "08", label: "Actividades & pendientes", sub: "bitácora" },
  { id: "firma", n: "09", label: "Firma", sub: "conformidad" },
  { id: "cierre", n: "10", label: "Cierre", sub: "IA genera el reporte" },
];

function ZamVisit() {
  const v = window.ZAMNA.visit;
  const [step, setStep] = useState("general");
  const idx = ZW_STEPS.findIndex(s => s.id === step);
  const pct = Math.round(((idx) / (ZW_STEPS.length - 1)) * 100);

  return (
    <div className="canvas-in wide rise">
      <AppHead app="zamna" title="Visita técnica" sub={`${v.general.cliente} · ${v.general.sitio} · ${v.general.proyecto}`}
        action={{ label: "Guardar y salir", icon: "check" }} />

      {/* progress strip */}
      <div className="card" style={{ padding: "12px 18px", marginBottom: 16, display: "flex", alignItems: "center", gap: 14 }}>
        <span className="mono" style={{ fontSize: 11.5, color: "var(--text-3)" }}>Paso {idx + 1}/{ZW_STEPS.length}</span>
        <div className="zbar" style={{ flex: 1 }}><i style={{ width: pct + "%" }} /></div>
        <span className="ai-chip"><Icon name="sparkle" size={12} /> IA asistiendo</span>
      </div>

      <div className="zw">
        <div className="zw-rail">
          {ZW_STEPS.map((s, i) => (
            <button key={s.id} className="zw-step" data-on={step === s.id} data-state={i < idx ? "done" : "todo"} onClick={() => setStep(s.id)}>
              <span className="zw-dot">{i < idx ? <Icon name="check" size={13} /> : s.n}</span>
              <span><b>{s.label}</b><small>{s.sub}</small></span>
            </button>
          ))}
        </div>

        <div>
          <div className="card" style={{ padding: 24, minHeight: 420 }}>
            <ZamVisitStep step={step} v={v} />
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14 }}>
            <button className="btn" disabled={idx === 0} onClick={() => setStep(ZW_STEPS[Math.max(0, idx - 1)].id)} style={{ opacity: idx === 0 ? 0.4 : 1 }}>
              <Icon name="chevright" size={15} style={{ transform: "rotate(180deg)" }} /> Anterior
            </button>
            {idx < ZW_STEPS.length - 1
              ? <button className="btn btn-primary" style={{ background: ZAccent }} onClick={() => setStep(ZW_STEPS[idx + 1].id)}>Siguiente <Icon name="arrowr" size={15} /></button>
              : <button className="btn btn-primary" style={{ background: "var(--ok)" }}><Icon name="check" size={15} /> Cerrar visita</button>}
          </div>
        </div>
      </div>
    </div>
  );
}

function ZamVisitStep({ step, v }) {
  if (step === "general") {
    const g = v.general;
    const fields = [["Cliente", g.cliente], ["Sitio", g.sitio], ["Proyecto", g.proyecto], ["Responsable", g.responsable], ["Contacto", g.contacto], ["Tipo de visita", g.tipo]];
    return (
      <div>
        <Section title="Información general" sub="Capturada automáticamente al iniciar la visita" style={{ marginBottom: 18 }} />
        <div className="grid-2">
          {fields.map(([k, val]) => (
            <div key={k}><label className="lbl" style={{ marginTop: 0 }}>{k}</label><input className="field" defaultValue={val} /></div>
          ))}
        </div>
        <label className="lbl">Dirección</label>
        <input className="field" defaultValue={g.direccion} />
        <div style={{ display: "flex", gap: 8, marginTop: 16, flexWrap: "wrap" }}>
          <span className="ai-chip"><Icon name="map" size={12} /> GPS {g.gps}</span>
          <span className="ai-chip"><Icon name="clock" size={12} /> Inicio {g.inicio}</span>
          <span className="ai-chip"><Icon name="globe" size={12} /> {g.clima}</span>
        </div>
      </div>
    );
  }

  if (step === "checklist") {
    return <ChecklistStep items={v.checklist} />;
  }

  if (step === "evidencia") {
    return (
      <div>
        <Section title="Captura fotográfica" sub="La IA reconoce equipos y describe cada toma automáticamente. Cada foto guarda GPS, fecha, hora y autor." style={{ marginBottom: 18 }} />
        {[["antes", "Antes"], ["durante", "Durante"], ["despues", "Después"]].map(([k, lbl]) => (
          <div key={k} style={{ marginBottom: 18 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>{lbl} · {v.photos[k].length} foto{v.photos[k].length !== 1 ? "s" : ""}</div>
            <div className="evi-grid">
              {v.photos[k].map((p, i) => <PhotoTile key={i} photo={p} tag={k} />)}
              <button className="evi-add"><Icon name="camera" size={22} /> Capturar</button>
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (step === "plano") {
    const tools = ["Muro", "Puerta", "Rack", "Canalización", "Escalerilla", "UPS", "PDU", "Contacto", "Gabinete", "Texto"];
    return (
      <div>
        <Section title="Plano del sitio" sub="Dibuja el croquis del MDF arrastrando elementos — sin salir de la app, como si fuera Paint." style={{ marginBottom: 16 }} />
        <div className="palette" style={{ marginBottom: 14 }}>
          {tools.map(t => <span key={t} className="pal-item"><Icon name="plus" size={12} /> {t}</span>)}
        </div>
        <div className="plano"><div style={{ textAlign: "center" }}><Icon name="map" size={30} style={{ opacity: 0.5 }} /><div className="mono" style={{ fontSize: 11, marginTop: 8 }}>arrastra elementos aquí para componer el plano</div></div></div>
      </div>
    );
  }

  if (step === "topologia") {
    const tools = [["shield", "Firewall"], ["grid", "Switch"], ["box", "Servidor"], ["globe", "Access Point"], ["camera", "Cámara"], ["pkg", "UPS"], ["globe", "Internet"]];
    return (
      <div>
        <Section title="Topología de red" sub="Arrastra nodos y conéctalos con líneas. No buscamos reemplazar Visio — sólo dejar el enlace documentado." style={{ marginBottom: 16 }} />
        <div className="palette" style={{ marginBottom: 14 }}>
          {tools.map(([ic, t]) => <span key={t} className="pal-item"><Icon name={ic} size={13} /> {t}</span>)}
        </div>
        <TopoCanvas topo={v.topology} />
      </div>
    );
  }

  if (step === "inventario") {
    return (
      <div>
        <Section title="Inventario del sitio" sub="Las filas marcadas con IA fueron reconocidas por foto/OCR — sólo confirma." style={{ marginBottom: 16 }}
          right={<button className="btn btn-sm" style={{ background: "var(--zamna-dim)", color: "var(--zamna)", borderColor: "transparent" }}><Icon name="sparkle" size={13} /> Llenar con IA</button>} />
        <div style={{ overflowX: "auto" }}>
          <table className="tbl">
            <thead><tr><th>Tipo</th><th>Marca / Modelo</th><th>Serie</th><th>Hostname</th><th>IP</th><th>Ubic.</th><th>Estado</th><th></th></tr></thead>
            <tbody>
              {v.inventory.map((it, i) => (
                <tr key={i}>
                  <td><span className="chip" style={{ height: 21, fontSize: 10.5 }}>{it.cat}</span></td>
                  <td style={{ color: "var(--text)", fontWeight: 500 }}>{it.brand} <span className="muted">{it.model}</span></td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{it.serie}</td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{it.host}</td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{it.ip}</td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{it.ru}</td>
                  <td><Pill status={it.state} /></td>
                  <td>{it.ai && <span className="ai-chip" style={{ padding: "2px 7px", fontSize: 10 }}><Icon name="sparkle" size={10} /> IA</span>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <button className="scan-btn" style={{ marginTop: 14 }}><Icon name="qr" size={18} /> Escanear etiqueta / código de barras</button>
      </div>
    );
  }

  if (step === "materiales") {
    const total = v.materials.reduce((s, m) => s + m.cost, 0);
    return (
      <div>
        <Section title="Materiales" sub="Consumo del servicio y requerimiento de compra" style={{ marginBottom: 16 }} />
        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <table className="tbl">
            <thead><tr><th>Material</th><th>Cant.</th><th>Unidad</th><th>Stock</th><th>Comprar</th><th style={{ textAlign: "right" }}>Costo est.</th></tr></thead>
            <tbody>
              {v.materials.map((m, i) => (
                <tr key={i}>
                  <td style={{ color: "var(--text)", fontWeight: 500 }}>{m.mat}</td>
                  <td className="mono">{m.qty}</td>
                  <td className="mono" style={{ fontSize: 12 }}>{m.unit}</td>
                  <td className="mono" style={{ color: m.stock === 0 ? "var(--bad)" : "var(--text-2)" }}>{m.stock}</td>
                  <td>{m.buy > 0 ? <span className="badge warn dot">{m.buy}</span> : <span className="muted">—</span>}</td>
                  <td className="num">{m.cost > 0 ? window.fmtMoney(m.cost) : "—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 14, gap: 10, alignItems: "center" }}>
          <span className="muted" style={{ fontSize: 13 }}>Requerimiento de compra estimado</span>
          <span className="disp" style={{ fontSize: 22, fontWeight: 600 }}>{window.fmtMoney(total)}</span>
        </div>
      </div>
    );
  }

  if (step === "trabajo") {
    return (
      <div>
        <Section title="Actividades realizadas" style={{ marginBottom: 14 }} />
        <div className="card" style={{ padding: 0, overflow: "hidden", marginBottom: 22 }}>
          <table className="tbl">
            <thead><tr><th>Actividad</th><th>Responsable</th><th>Tiempo</th><th>Estado</th></tr></thead>
            <tbody>
              {v.activities.map((a, i) => (
                <tr key={i}><td style={{ color: "var(--text)", fontWeight: 500 }}>{a.act}</td><td>{a.who}</td><td className="mono" style={{ fontSize: 12 }}>{a.time}</td><td><Pill status={a.state} /></td></tr>
              ))}
            </tbody>
          </table>
        </div>
        <Section title="Pendientes" sub="Se arrastran al expediente del sitio y a la siguiente visita" style={{ marginBottom: 14 }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {v.pending.map((p, i) => (
            <div key={i} className="card" style={{ padding: 14, display: "flex", alignItems: "center", gap: 12 }}>
              <span className={"sev " + (p.prio === "Alta" ? "bad" : "warn")} />
              <div style={{ flex: 1 }}><div style={{ fontSize: 13, color: "var(--text)" }}>{p.desc}</div><div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 3 }}>{p.who} · vence {p.due}</div></div>
              <span className="chip" style={{ height: 22, fontSize: 11 }}>{p.prio}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (step === "firma") {
    return (
      <div>
        <Section title="Firma de conformidad" sub="El cliente y el ingeniero firman digitalmente el cierre del servicio." style={{ marginBottom: 18 }} />
        <div className="grid-2">
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Cliente · {v.general.responsable}</div>
            <div className="sign-pad" data-signed="true"><span className="sign-cursive">Mariana Lugo</span><div className="sign-line" /></div>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 8 }}>firmado 22 jun 2026 · 12:48 · verificado por correo</div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Ingeniero · Iván Solís</div>
            <div className="sign-pad" data-signed="true"><span className="sign-cursive">Iván Solís</span><div className="sign-line" /></div>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--text-4)", marginTop: 8 }}>firmado 22 jun 2026 · 12:49</div>
          </div>
        </div>
      </div>
    );
  }

  // cierre
  return (
    <div>
      <Section title="Cierre de visita" sub="La IA valida la evidencia obligatoria antes de generar el reporte." style={{ marginBottom: 18 }} />
      <div className="ai-card" style={{ marginBottom: 18 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 12 }}>
          <Icon name="sparkle" size={16} style={{ color: ZAccent }} />
          <b style={{ fontSize: 13.5 }}>Verificación automática</b>
        </div>
        {[["Información general", true], ["Evidencia fotográfica (antes/después)", true], ["Inventario capturado", true], ["Topología del sitio", true], ["Fotografía del rack — vista posterior", false], ["Firma de conformidad del cliente", true]].map(([lbl, ok], i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: i < 5 ? "1px solid var(--line)" : "none" }}>
            <span style={{ width: 20, height: 20, borderRadius: 6, display: "grid", placeItems: "center", background: ok ? "color-mix(in oklch, var(--ok) 18%, transparent)" : "color-mix(in oklch, var(--warn) 18%, transparent)", color: ok ? "var(--ok)" : "var(--warn)" }}>
              <Icon name={ok ? "check" : "plus"} size={13} style={{ transform: ok ? "none" : "rotate(45deg)" }} />
            </span>
            <span style={{ fontSize: 13, color: ok ? "var(--text-2)" : "var(--text)" }}>{lbl}</span>
            <div style={{ flex: 1 }} />
            <span className="mono" style={{ fontSize: 11, color: ok ? "var(--ok)" : "var(--warn)" }}>{ok ? "ok" : "sugerido"}</span>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
        <button className="btn btn-primary" style={{ background: ZAccent, height: 46, paddingInline: 22 }}><Icon name="doc" size={16} /> Generar reporte con IA</button>
        <button className="btn" style={{ height: 46 }}><Icon name="download" size={15} /> Vista previa PDF</button>
      </div>
      <p className="muted" style={{ fontSize: 12, marginTop: 14 }}>Genera hoja de servicio, minuta, reporte técnico, inventario, materiales, evidencia, diagrama y plano — en un solo PDF, sin edición manual.</p>
    </div>
  );
}

function ChecklistStep({ items }) {
  const [list, setList] = useState(items);
  const toggle = (i) => setList(ls => ls.map((x, j) => j === i ? { ...x, on: !x.on } : x));
  return (
    <div>
      <Section title="Checklist de la visita" sub="Marca los tipos de trabajo que aplican — define qué evidencia pedirá la IA al cerrar." style={{ marginBottom: 18 }} />
      <div className="chk-grid">
        {list.map((c, i) => (
          <button key={i} className="chk" data-on={c.on} onClick={() => toggle(i)}>
            <span className="chk-box"><Icon name="check" size={13} /></span>{c.label}
          </button>
        ))}
      </div>
    </div>
  );
}

// ============================================================
//  INGENIERO · Asistente IA
// ============================================================
function ZamAI() {
  const ai = window.ZAMNA.visit.ai;
  const [copied, setCopied] = useState(false);
  return (
    <div className="canvas-in rise">
      <AppHead app="zamna" title="Asistente IA" sub="La IA es invisible: trabaja sobre la visita activa V-0142-3 · Flow Suites Condesa" />
      <div className="grid-2" style={{ alignItems: "start", marginBottom: 14 }}>
        <div className="card ai-card">
          <Section title="Reconocimiento de equipos" sub="Detectado desde las fotografías" style={{ marginBottom: 14 }} />
          {ai.detected.map((m, i) => (
            <div key={i} className="ai-row">
              <Icon name="box" size={16} style={{ color: ZAccent }} />
              <span style={{ fontSize: 12.5, color: "var(--text)", width: 200 }}>{m.model}</span>
              <div className="conf"><i style={{ width: Math.round(m.conf * 100) + "%" }} /></div>
              <span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>{Math.round(m.conf * 100)}%</span>
            </div>
          ))}
        </div>
        <div className="card ai-card">
          <Section title="OCR de etiquetas" sub="Lectura de modelo, serie, hostname e IP" style={{ marginBottom: 14 }} />
          <div className="kvs" style={{ gridTemplateColumns: "1fr" }}>
            {ai.ocr.map((o, i) => (
              <div key={i} className="kv"><span>{o.field}</span><span>{o.value}</span></div>
            ))}
          </div>
          <div className="ai-chip" style={{ marginTop: 14 }}><Icon name="check" size={12} /> Volcado al inventario automáticamente</div>
        </div>
      </div>

      <div className="card ai-card" style={{ marginBottom: 14 }}>
        <Section title="Resumen técnico generado" right={<span className="ai-chip"><Icon name="sparkle" size={12} /> redactado por IA</span>} style={{ marginBottom: 14 }} />
        <p style={{ fontSize: 14, color: "var(--text-2)", lineHeight: 1.7 }}>{ai.summary}</p>
        <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
          <button className="btn btn-sm" onClick={() => { setCopied(true); setTimeout(() => setCopied(false), 1500); }}><Icon name={copied ? "check" : "doc"} size={13} /> {copied ? "Copiado" : "Copiar"}</button>
          <button className="btn btn-sm"><Icon name="sparkle" size={13} /> Regenerar</button>
        </div>
      </div>

      <div className="card" style={{ padding: 20 }}>
        <Section title="Información faltante" sub="La visita no podrá cerrarse hasta resolver lo crítico" style={{ marginBottom: 14 }} />
        {ai.missing.map((m, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 0", borderBottom: i < ai.missing.length - 1 ? "1px solid var(--line)" : "none" }}>
            <span className={"sev " + m.level} />
            <span style={{ flex: 1, fontSize: 13, color: "var(--text-2)" }}>{m.item}</span>
            <span className="badge dot" style={{ color: m.level === "bad" ? "var(--bad)" : "var(--warn)" }}>{m.level === "bad" ? "obligatorio" : "sugerido"}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================
//  CLIENTE · Portal del sitio
// ============================================================
function ZamPortal() {
  const d = window.ZAMNA;
  const site = d.sites[0];
  const v = d.visit;
  return (
    <div className="canvas-in rise">
      <AppHead app="zamna" title="Portal del sitio" sub="Flow Suites · acceso de solo lectura — sin cuenta Sympho" />
      <div className="card" style={{ padding: 22, marginBottom: 16, display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
        <span className="feed-ic" style={{ "--c": ZAccent, width: 48, height: 48 }}><Icon name="map" size={20} /></span>
        <div style={{ flex: 1, minWidth: 180 }}>
          <h2 className="disp" style={{ fontSize: 19, fontWeight: 600 }}>{site.name}</h2>
          <div className="mono" style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 3 }}>{site.address}</div>
        </div>
        <span className="badge ok dot">servicio al día</span>
      </div>

      <div className="grid-4" style={{ marginBottom: 16 }}>
        <MiniStat label="Visitas realizadas" value={site.visitas} />
        <MiniStat label="Activos en sitio" value={site.inv} />
        <MiniStat label="Última visita" value="22 jun" color="var(--zamna)" />
        <MiniStat label="Pendientes abiertos" value={v.pending.length} color="var(--warn)" />
      </div>

      <div className="grid-2" style={{ alignItems: "start" }}>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Última visita" sub="Implementación · 22 jun 2026 · Iván Solís" style={{ marginBottom: 14 }} />
          <p style={{ fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.6 }}>{v.ai.summary}</p>
          <div className="evi-grid" style={{ gridTemplateColumns: "1fr 1fr", marginTop: 16 }}>
            <PhotoTile photo={v.photos.antes[0]} tag="antes" />
            <PhotoTile photo={v.photos.despues[0]} tag="después" />
          </div>
        </div>
        <div className="card" style={{ padding: 20 }}>
          <Section title="Tu ingeniero" style={{ marginBottom: 14 }} />
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Avatar name="Iván Solís" initials="IS" hue={ZAccent} size={44} />
            <div><b style={{ fontSize: 14 }}>Iván Solís</b><div className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>Ingeniero de campo · Luxerv</div></div>
          </div>
          <div style={{ marginTop: 18 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Pendientes informados</div>
            {v.pending.map((p, i) => (
              <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: "8px 0", borderBottom: i < v.pending.length - 1 ? "1px solid var(--line)" : "none" }}>
                <span className={"sev " + (p.prio === "Alta" ? "bad" : "warn")} style={{ marginTop: 5 }} />
                <span style={{ fontSize: 12.5, color: "var(--text-2)", lineHeight: 1.5 }}>{p.desc}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
//  CLIENTE · Reporte & firma
// ============================================================
function ZamReporte() {
  const v = window.ZAMNA.visit;
  const [signed, setSigned] = useState(false);
  return (
    <div className="canvas-in rise">
      <AppHead app="zamna" title="Reporte & firma" sub="Hoja de servicio generada automáticamente al cerrar la visita" />
      <div className="grid-2" style={{ alignItems: "start", gridTemplateColumns: "minmax(0,1.6fr) minmax(0,1fr)" }}>
        <div className="sheet">
          <div className="sheet-band" />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: ZAccent }}>HOJA DE SERVICIO · ZAMNÁ</div>
              <h2 className="disp" style={{ fontSize: 22, fontWeight: 600, marginTop: 6 }}>{v.general.proyecto}</h2>
              <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>{v.general.cliente} · {v.general.sitio}</div>
            </div>
            <span className="glyph" style={{ width: 44, height: 44, borderRadius: 12, background: "var(--zamna-dim)", color: "var(--zamna)" }}><Icon name="flow" size={22} /></span>
          </div>

          <h4>Datos de la visita</h4>
          <div className="kvs">
            <div className="kv"><span>Fecha</span><span>22 jun 2026</span></div>
            <div className="kv"><span>Tipo</span><span>{v.general.tipo}</span></div>
            <div className="kv"><span>Ingeniero</span><span>Iván Solís</span></div>
            <div className="kv"><span>Responsable</span><span>{v.general.responsable}</span></div>
            <div className="kv"><span>Inicio</span><span>{v.general.inicio}</span></div>
            <div className="kv"><span>GPS</span><span>{v.general.gps}</span></div>
          </div>

          <h4>Resumen ejecutivo</h4>
          <p style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.65 }}>{v.ai.summary}</p>

          <h4>Actividades</h4>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {v.activities.map((a, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, padding: "5px 0", borderBottom: "1px solid var(--line)" }}>
                <span style={{ color: "var(--text-2)" }}>{a.act}</span><span className="mono" style={{ fontSize: 11, color: "var(--text-4)" }}>{a.time}</span>
              </div>
            ))}
          </div>

          <h4>Evidencia</h4>
          <div className="evi-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            <PhotoTile photo={v.photos.antes[0]} tag="antes" />
            <PhotoTile photo={v.photos.durante[0]} tag="durante" />
            <PhotoTile photo={v.photos.despues[0]} tag="después" />
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14, position: "sticky", top: 0 }}>
          <div className="card" style={{ padding: 20 }}>
            <Section title="Conformidad" sub="Firma para aprobar el servicio" style={{ marginBottom: 14 }} />
            <div className="sign-pad" data-signed={signed} style={{ aspectRatio: "3 / 1.2" }}>
              {signed ? <span className="sign-cursive">Mariana Lugo</span> : <span className="muted" style={{ fontSize: 12 }}>Firma aquí</span>}
              <div className="sign-line" />
            </div>
            {signed
              ? <div className="ai-chip" style={{ marginTop: 14, color: "var(--ok)", borderColor: "color-mix(in oklch, var(--ok) 40%, transparent)", background: "color-mix(in oklch, var(--ok) 12%, transparent)" }}><Icon name="check" size={12} /> Conformidad firmada · 22 jun 12:48</div>
              : <button className="btn btn-primary" style={{ background: ZAccent, width: "100%", justifyContent: "center", height: 44, marginTop: 14 }} onClick={() => setSigned(true)}><Icon name="check" size={16} /> Firmar conformidad</button>}
          </div>
          <div className="card" style={{ padding: 20 }}>
            <Section title="Descargas" style={{ marginBottom: 12 }} />
            {["Reporte completo (PDF)", "Inventario (PDF)", "Evidencia fotográfica (ZIP)"].map((x, i) => (
              <button key={i} className="side-link" style={{ width: "100%", justifyContent: "flex-start", height: 40, marginBottom: 4 }}><Icon name="download" size={15} /> {x}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
//  DISPATCHER
// ============================================================
function ZamnaApp({ sub, role }) {
  const VIEWS = {
    dash: ZamDash, proyectos: ZamProjects, clientes: ZamClients, agenda: ZamAgenda, expediente: ZamExpediente,
    "i-agenda": ZamEngAgenda, "i-visita": ZamVisit, "i-ia": ZamAI,
    "c-portal": ZamPortal, "c-reporte": ZamReporte,
  };
  const fallback = (window.ZAMNA_NAV[role] || window.ZAMNA_NAV.admin)[0].id;
  const Comp = VIEWS[sub] || VIEWS[fallback];
  return Comp ? <Comp /> : null;
}

Object.assign(window, { ZamnaApp, ZamEngAgenda, ZamVisit, ZamAI, ZamPortal, ZamReporte });