const { useState, useMemo, useEffect } = React;

// ===== Overview =====
window.ViewOverview = function ViewOverview({ data, onOpen, setView }) {
  const kpis = useMemo(() => {
    const total = data.length;
    const alto = data.filter(d => d.impacto === "Alto").length;
    const quick = data.filter(d => d.impacto === "Alto" && d.facilidad === "Fácil" && d.coste === 0).length;
    const coste = data.reduce((s, d) => s + d.coste, 0);
    return { total, alto, quick, coste };
  }, [data]);

  const areaCounts = useMemo(() => {
    const m = {};
    data.forEach(d => { m[d.area] = (m[d.area] || 0) + 1; });
    return Object.entries(m).sort((a, b) => b[1] - a[1]).slice(0, 7);
  }, [data]);

  const toolCounts = useMemo(() => {
    const groups = {};
    data.forEach(row => {
      const tools = (row.herramientaPropuesta || "").split(/\s*(?:\+|\by\b|\/)\s*/i).map(t => t.trim()).filter(Boolean);
      tools.forEach(tool => {
        const normalizedTool = tool.toUpperCase();
        if (!groups[normalizedTool]) groups[normalizedTool] = [];
        groups[normalizedTool].push(row.id);
      });
    });
    return Object.entries(groups)
      .map(([name, ids]) => [name, ids.length])
      .sort((a, b) => b[1] - a[1])
      .slice(0, 7);
  }, [data]);

  const impactDist = useMemo(() => {
    const c = { Alto: 0, Medio: 0, Bajo: 0 };
    data.forEach(d => c[d.impacto]++);
    return c;
  }, [data]);

  return (
    <>
      <div className="page-header">
        <div className="page-title">Auditoría de herramientas · Resumen</div>
        <div className="page-subtitle">16 profesionales · 28 pain points identificados · 0 € inversión estructural</div>
      </div>

      <div className="kpi-grid">
        <div className="kpi kpi-accent-purple">
          <div className="kpi-label"><span style={{ width: 12, height: 12, display: "inline-block" }}>{window.Icons.people}</span> Personas auditadas</div>
          <div className="kpi-value">{kpis.total}</div>
          <div className="kpi-sub">en 14 áreas funcionales</div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><span style={{ color: "var(--impact-alto)" }}>●</span> Pain points de alto impacto</div>
          <div className="kpi-value">{kpis.alto}<span style={{ fontSize: 16, color: "var(--fg-muted)", fontWeight: 500 }}> / {kpis.total}</span></div>
          <div className="kpi-sub">{Math.round(kpis.alto / kpis.total * 100)}% del total</div>
        </div>
        <div className="kpi kpi-accent-red">
          <div className="kpi-label">⚡ Quick wins</div>
          <div className="kpi-value">{kpis.quick}</div>
          <div className="kpi-sub">Alto impacto · Fácil · 0 €</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">€ Inversión mensual</div>
          <div className="kpi-value">{kpis.coste} €</div>
          <div className="kpi-sub">{data.filter(d => d.coste > 0).length} licencias Claude Pro</div>
        </div>
      </div>

      <div className="grid-asym" style={{ marginBottom: 14 }}>
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Matriz impacto × facilidad</div>
              <div className="card-subtitle">Cuanto más arriba y a la derecha, mejor candidato para priorizar</div>
            </div>
          </div>
          <div className="card-body">
            <MatrixChart data={data} onOpen={onOpen} />
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="card-title">Estado de implementación</div>
          </div>
          <div className="card-body">
            <ImpactDonut data={data} />
          </div>
        </div>
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Herramientas propuestas más recurrentes</div>
              <div className="card-subtitle">Oportunidad de implementación conjunta</div>
            </div>
            <button className="filter-chip" onClick={() => setView("tools")}>Ver clusters {window.Icons.chevron}</button>
          </div>
          <div className="card-body" style={{ paddingTop: 6 }}>
            {toolCounts.map(([name, count]) => {
              const max = toolCounts[0][1];
              return (
                <div className="bar-row" key={name}>
                  <div className="bar-label"><span className="tool-pill prop">{name}</span></div>
                  <div className="bar-track"><div className="bar-fill purple" style={{ width: `${(count / max) * 100}%` }} /></div>
                  <div className="bar-value">{count} {count === 1 ? "persona" : "personas"}</div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div>
              <div className="card-title">Áreas con más pain points</div>
              <div className="card-subtitle">Concentración por equipo / proyecto</div>
            </div>
          </div>
          <div className="card-body" style={{ paddingTop: 6 }}>
            {areaCounts.map(([name, count]) => {
              const max = areaCounts[0][1];
              return (
                <div className="bar-row" key={name}>
                  <div className="bar-label" title={name}>{name.length > 22 ? name.slice(0, 22) + "…" : name}</div>
                  <div className="bar-track"><div className="bar-fill red" style={{ width: `${(count / max) * 100}%` }} /></div>
                  <div className="bar-value">{count}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};

// ===== Matrix Chart =====
function MatrixChart({ data, onOpen }) {
  const [hover, setHover] = useState(null);
  // X = Facilidad (Media=0.3, Fácil=0.75), Y = Impacto (Bajo=0.15, Medio=0.5, Alto=0.85)
  const posFor = (d) => {
    const fx = d.facilidad === "Fácil" ? 0.78 : 0.32;
    const iy = d.impacto === "Alto" ? 0.18 : d.impacto === "Medio" ? 0.5 : 0.82;
    // spread duplicates with deterministic jitter
    const jitterX = ((d.id * 37) % 9 - 4) * 0.012;
    const jitterY = ((d.id * 53) % 7 - 3) * 0.014;
    return { x: fx + jitterX, y: iy + jitterY };
  };
  return (
    <div className="matrix-chart">
      <div className="matrix-grid-line" style={{ left: "50%", top: 0, bottom: 0, width: 1 }} />
      <div className="matrix-grid-line" style={{ top: "50%", left: 0, right: 0, height: 1 }} />
      <div className="matrix-quadrant" style={{ top: 4, right: 4, color: "var(--success)" }}>🎯 Quick wins</div>
      <div className="matrix-quadrant" style={{ top: 4, left: 4 }}>Big bets</div>
      <div className="matrix-quadrant" style={{ bottom: 4, right: 4 }}>Fill-ins</div>
      <div className="matrix-quadrant" style={{ bottom: 4, left: 4 }}>Descartar</div>
      <div className="matrix-axis-x">Facilidad →</div>
      <div className="matrix-axis-y">Impacto →</div>

      {data.map(d => {
        const { x, y } = posFor(d);
        return (
          <div
            key={d.id}
            className={`matrix-dot ${window.clsImpact(d.impacto)}`}
            style={{ left: `${x * 100}%`, top: `${y * 100}%` }}
            onMouseEnter={() => setHover(d)}
            onMouseLeave={() => setHover(null)}
            onClick={() => onOpen(d)}
          />
        );
      })}
      {hover && (() => {
        const { x, y } = posFor(hover);
        return (
          <div className="matrix-tooltip" style={{ left: `${x * 100}%`, top: `${y * 100}%` }}>
            {hover.persona} · {hover.solucionado === "Sí" ? "✅ Solucionado" : "⏳ Pendiente"}
          </div>
        );
      })()}
    </div>
  );
}

// Gráfico de resumen Solucionado vs Pendiente
function ImpactDonut({ data }) {
  const total = data.length;
  const si = data.filter(d => d.solucionado === "Sí").length;
  const no = total - si;

  const segments = [
    { label: "Solucionado", value: si, color: "var(--success)", pct: (si / total) * 100 },
    { label: "Pendiente",   value: no, color: "var(--bg-3)",    pct: (no / total) * 100 },
  ];

  let offset = 0;
  const R = 40;
  const C = 2 * Math.PI * R;

  return (
    <div className="donut-wrap">
      <div className="donut">
        <svg viewBox="0 0 100 100" className="donut-svg">
          {segments.map((s, i) => {
            const len = (s.pct / 100) * C;
            const el = (
              <circle key={i} cx="50" cy="50" r={R} fill="none" stroke={s.color} strokeWidth="12"
                strokeDasharray={`${len} ${C}`}
                strokeDashoffset={-offset}
                strokeLinecap="butt" />
            );
            offset += len;
            return el;
          })}
        </svg>
        <div className="donut-label">
          <div>
            <strong>{Math.round((si/total)*100)}%</strong>
            <div><span>completado</span></div>
          </div>
        </div>
      </div>
      <div className="legend">
        {segments.map(s => (
          <div key={s.label} className="legend-row">
            <span className="legend-swatch" style={{ background: s.color }} />
            <span className="legend-label">{s.label}</span>
            <span className="legend-value">{s.value}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ===== Table view =====
window.ViewPersonas = function ViewPersonas({ data, onOpen, filters, setFilters, dense, editMode, edits, setEdit, resetEdit }) {
  const { facilidad, prioridad, coste, solucionado, q } = filters;
  const filtered = useMemo(() => {
    return data.filter(d => {
      if (facilidad !== "all" && d.facilidad !== facilidad) return false;
      if (prioridad !== "all" && d.prioridad !== Number(prioridad)) return false;
      if (solucionado !== "all" && d.solucionado !== solucionado) return false;
      if (coste === "free" && d.coste > 0) return false;
      if (coste === "paid" && d.coste === 0) return false;
      if (q && !(`${d.persona} ${d.area} ${d.painPoint} ${d.herramientaActual} ${d.herramientaPropuesta}`).toLowerCase().includes(q.toLowerCase())) return false;
      return true;
    });
  }, [data, facilidad, prioridad, coste, solucionado, q]);

  return (
    <>
      <div className="page-header">
        <div className="page-title">Personas · Pain points y soluciones</div>
        <div className="page-subtitle">Haz clic en una fila para ver la ficha completa</div>
      </div>

      <div className="filters">
        <div className="filter-group">
            <div className="filter-label">Estado</div>
            <div className="filter-chips">
              <FilterChip active={solucionado === "all"} onClick={() => setFilters({ ...filters, solucionado: "all" })}>Todos</FilterChip>
              <FilterChip active={solucionado === "Sí"} onClick={() => setFilters({ ...filters, solucionado: "Sí" })}>Sí</FilterChip>
              <FilterChip active={solucionado === "No"} onClick={() => setFilters({ ...filters, solucionado: "No" })}>No</FilterChip>
            </div>
        </div>
        <FilterChip active={facilidad === "Fácil"} onClick={() => setFilters({ ...filters, facilidad: facilidad === "Fácil" ? "all" : "Fácil" })}>Fácil</FilterChip>
        <FilterChip active={prioridad === 1} onClick={() => setFilters({ ...filters, prioridad: prioridad === 1 ? "all" : 1 })}>Prioridad 1ª</FilterChip>
        <FilterChip active={coste === "free"} onClick={() => setFilters({ ...filters, coste: coste === "free" ? "all" : "free" })}>Sin coste</FilterChip>
        <FilterChip active={coste === "paid"} onClick={() => setFilters({ ...filters, coste: coste === "paid" ? "all" : "paid" })}>Con licencia</FilterChip>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: "var(--fg-muted)" }}>{filtered.length} de {data.length}</span>
      </div>

      <div className="card">
        <div className="tbl-wrap">
          <table className={`tbl${dense ? " dense" : ""}`}>
            <thead>
              <tr>
                <th>Persona</th>
                <th>Área / Proyecto</th>
                <th>Pain point</th>
                <th>Herramienta actual</th>
                <th>Solución propuesta</th>
                <th>Propuesta</th>
                <th>Coste</th>
                <th>Facilidad</th>
                <th>Prio.</th>
                <th>Solucionado</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(d => {
                const isEdited = edits && edits[d.id];
                const rowClick = editMode ? undefined : () => onOpen(d);
                const patch = (p) => setEdit(d.id, p);
                return (
                <tr key={d.id} onClick={rowClick} className={isEdited ? "edited" : ""}>
                  <td>
                    <div className="persona-cell">
                      <window.Avatar name={d.persona} size={26} />
                      {editMode
                        ? <window.EditableText value={d.persona} onChange={(v) => patch({ persona: v })} style={{ fontWeight: 500 }} />
                        : <span style={{ fontWeight: 500 }}>{d.persona}{isEdited && <span className="edited-dot" title="Editado" />}</span>}
                    </div>
                  </td>
                  <td style={{ color: "var(--fg-muted)", fontSize: 12.5, whiteSpace: editMode ? "normal" : "nowrap" }}>
                    {editMode ? <window.EditableText value={d.area} onChange={(v) => patch({ area: v })} /> : d.area}
                  </td>
                  <td className="cell-pain">
                    {editMode ? <window.EditableText multiline value={d.painPoint} onChange={(v) => patch({ painPoint: v })} /> : d.painPoint}
                  </td>
                  <td>
                    {editMode
                      ? <window.EditableText value={d.herramientaActual} onChange={(v) => patch({ herramientaActual: v })} className="tool-pill" style={{ display: "inline-block" }} />
                      : <span className="tool-pill">{d.herramientaActual}</span>}
                  </td>
                  <td className="cell-sol">
                    {editMode ? <window.EditableText multiline value={d.solucion} onChange={(v) => patch({ solucion: v })} /> : d.solucion}
                  </td>
                  <td>
                    {editMode
                      ? <window.EditableText value={d.herramientaPropuesta} onChange={(v) => patch({ herramientaPropuesta: v })} className="tool-pill prop" style={{ display: "inline-block" }} />
                      : <span className="tool-pill prop">{d.herramientaPropuesta}</span>}
                  </td>
                  <td>
                    {editMode
                      ? <window.EditableNumber value={d.coste} onChange={(v) => patch({ coste: v })} suffix="€" />
                      : (d.coste === 0
                          ? <span className="badge badge-coste-0"><span className="dot" /> 0 €</span>
                          : <span className="badge badge-coste-paid"><span className="dot" /> {d.costeLabel}</span>)}
                  </td>
                  <td>
                    {editMode
                      ? <window.EditableSelect value={d.facilidad} options={["Fácil", "Media"]} onChange={(v) => patch({ facilidad: v })}
                          renderValue={(v) => <span className={`badge badge-${window.clsFac(v)}`}>{v}</span>} />
                      : <span className={`badge badge-${window.clsFac(d.facilidad)}`}>{d.facilidad}</span>}
                  </td>
                  <td>
                    {editMode
                      ? <window.EditableSelect value={d.prioridad} options={[{ value: 1, label: "1ª" }, { value: 2, label: "2ª" }, { value: 3, label: "3ª" }]}
                          onChange={(v) => patch({ prioridad: Number(v) })}
                          renderValue={(v) => <span className={`badge badge-prio-${v}`}>{v}ª</span>} />
                      : <span className={`badge badge-prio-${d.prioridad}`}>{d.prioridad}ª</span>}
                  </td>
                  <td style={{ textAlign: "center" }}>
                    {editMode
                      ? <window.EditableSelect value={d.solucionado} options={["Sí", "No"]} onChange={(v) => patch({ solucionado: v })}
                          renderValue={(v) => <span className={`badge ${v === "Sí" ? "badge-coste-0" : "badge-prio-2"}`}>{v}</span>} />
                      : <span className={`badge ${d.solucionado === "Sí" ? "badge-coste-0" : "badge-prio-2"}`}>{d.solucionado}</span>}
                  </td>
                </tr>
                );
              })}
              {filtered.length === 0 && <tr><td colSpan={10} className="empty">Sin resultados con estos filtros.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

function FilterChip({ active, onClick, children }) {
  return <button className={`filter-chip${active ? " active" : ""}`} onClick={onClick}>{children}</button>;
}

// ===== Tools view =====
window.ViewTools = function ViewTools({ data, onOpen }) {
  const groups = useMemo(() => {
    const groups = {};
    data.forEach(row => {
      const tools = (row.herramientaPropuesta || "").split(/\s*(?:\+|\by\b|\/)\s*/i).map(t => t.trim()).filter(Boolean);
      tools.forEach(tool => {
        const normalizedTool = tool.toUpperCase();
        if (!groups[normalizedTool]) groups[normalizedTool] = [];
        groups[normalizedTool].push(row.id);
      });
    });
    return Object.entries(groups)
      .map(([name, ids]) => ({ name, ids, count: ids.length }))
      .sort((a, b) => b.count - a.count);
  }, [data]);

  const shared = groups.filter(g => g.count >= 2);
  const unique = groups.filter(g => g.count === 1);

  return (
    <>
      <div className="page-header">
        <div className="page-title">Soluciones conjuntas · Clusters por herramienta</div>
        <div className="page-subtitle">Al agrupar por herramienta propuesta, {shared.reduce((s, g) => s + g.count, 0)} pain points se pueden resolver con {shared.length} implementaciones compartidas</div>
      </div>

      <div className="card" style={{ marginBottom: 18 }}>
        <div className="card-header">
          <div className="card-title">Mayor palanca de reutilización</div>
          <div style={{ fontSize: 11, color: "var(--fg-muted)" }}>Herramientas que desbloquean a varias personas</div>
        </div>
        <div className="card-body">
          {shared.slice(0, 6).map(g => (
            <div className="bar-row" key={g.name}>
              <div className="bar-label"><span className="tool-pill prop">{g.name}</span></div>
              <div className="bar-track"><div className="bar-fill purple" style={{ width: `${(g.count / shared[0].count) * 100}%` }} /></div>
              <div className="bar-value">{g.count} personas</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--fg-subtle)", fontWeight: 600, margin: "4px 0 10px" }}>Clusters compartidos · {shared.length}</div>
      <div className="cluster-grid">
        {shared.map(g => (
          <div className="cluster" key={g.name}>
            <div className="cluster-head">
              <span className="cluster-name">{g.name}</span>
              <span className="cluster-count">{g.count}</span>
            </div>
            <div className="cluster-body">
              {g.ids.map(id => {
                const row = data.find(r => r.id === id);
                return (
                  <div key={id} className="cluster-person" onClick={() => onOpen(row)}>
                    <window.Avatar name={row.persona} size={22} />
                    <div>
                      <div style={{ fontWeight: 500 }}>{row.persona}</div>
                      <div style={{ fontSize: 10.5, color: "var(--fg-muted)" }}>{row.area}</div>
                    </div>
                    <span className="p-meta"><span className={`badge badge-impact-${window.clsImpact(row.impacto)}`}><span className="dot" /></span></span>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--fg-subtle)", fontWeight: 600, margin: "22px 0 10px" }}>Herramientas puntuales · {unique.length}</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
        {unique.map(g => {
          const row = data.find(r => r.id === g.ids[0]);
          return (
            <button key={g.name} className="filter-chip" onClick={() => onOpen(row)}>
              <span className="tool-pill prop" style={{ background: "transparent", padding: 0 }}>{g.name}</span>
              <span style={{ color: "var(--fg-subtle)" }}>·</span>
              <span>{row.persona}</span>
            </button>
          );
        })}
      </div>
    </>
  );
};

// ===== Roadmap =====
window.ViewRoadmap = function ViewRoadmap({ data, onOpen }) {
  const phases = window.ROADMAP_PHASES.map(p => ({ ...p, rows: data.filter(p.filter) }));
  const assigned = new Set();
  // avoid double counting: a row should only appear in the earliest phase that matches
  const phasesDedup = phases.map(p => {
    const rows = p.rows.filter(r => !assigned.has(r.id));
    rows.forEach(r => assigned.add(r.id));
    return { ...p, rows };
  });

  const total = data.length;
  const progress = phasesDedup.map(p => p.rows.length);

  return (
    <>
      <div className="page-header">
        <div className="page-title">Roadmap de implementación</div>
        <div className="page-subtitle">Secuencia sugerida · 10 semanas estimadas · Ajustable según capacidad del equipo</div>
      </div>

      <div className="cost-stack" style={{ height: 34 }}>
        {progress.map((c, i) => c > 0 && (
          <div key={i} style={{ flex: c, background: i === 0 ? "var(--success)" : i === 1 ? "var(--xul-purple-2)" : i === 2 ? "var(--warn)" : "var(--bg-3)", color: i === 3 ? "var(--fg)" : "white" }}>
            {c}
          </div>
        ))}
      </div>
      <div style={{ display: "flex", gap: 18, marginBottom: 20, fontSize: 11.5, color: "var(--fg-muted)" }}>
        {phasesDedup.map((p, i) => (
          <div key={p.id} style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <span className="legend-swatch" style={{ background: i === 0 ? "var(--success)" : i === 1 ? "var(--xul-purple-2)" : i === 2 ? "var(--warn)" : "var(--bg-3)" }} />
            {p.label.replace(/^Fase \d+ · /, "")} · {p.rows.length}
          </div>
        ))}
      </div>

      <div className="roadmap">
        {phasesDedup.map((p, i) => (
          <div className="phase" key={p.id}>
            <div className="phase-head">
              <div className="phase-index">{i + 1}</div>
              <div>
                <div className="phase-title">{p.label}</div>
                <div className="phase-meta">{p.subtitle}</div>
              </div>
              <span className="phase-count">{p.rows.length} iniciativas</span>
            </div>
            <div className="phase-desc">{p.description}</div>
            {p.rows.length > 0 ? (
              <div className="phase-items">
                {p.rows.map(row => (
                  <div key={row.id} className="phase-item" onClick={() => onOpen(row)}>
                    <window.Avatar name={row.persona} size={24} />
                    <div className="phase-item-body">
                      <div className="phase-item-name">{row.persona}</div>
                      <div className="phase-item-tool">{row.herramientaPropuesta}</div>
                    </div>
                    <span className={`badge badge-impact-${window.clsImpact(row.impacto)}`}><span className="dot" /></span>
                  </div>
                ))}
              </div>
            ) : <div className="empty" style={{ padding: 20 }}>Sin iniciativas en esta fase.</div>}
          </div>
        ))}
      </div>
    </>
  );
};

// ===== Costs =====
window.ViewCosts = function ViewCosts({ data, onOpen }) {
  const free = data.filter(d => d.coste === 0);
  const micro = data.filter(d => d.coste > 0 && d.coste < 10);
  const paid = data.filter(d => d.coste >= 10);
  const totalMo = data.reduce((s, d) => s + d.coste, 0);
  const totalYr = totalMo * 12;

  return (
    <>
      <div className="page-header">
        <div className="page-title">Distribución de costes</div>
        <div className="page-subtitle">{data.length} iniciativas · {totalMo} €/mes · {totalYr} €/año</div>
      </div>

      <div className="kpi-grid">
        <div className="kpi">
          <div className="kpi-label" style={{ color: "var(--success)" }}>● Sin coste adicional</div>
          <div className="kpi-value">{free.length}</div>
          <div className="kpi-sub">{Math.round(free.length / data.length * 100)}% del total</div>
        </div>
        <div className="kpi">
          <div className="kpi-label" style={{ color: "var(--warn)" }}>● Coste puntual</div>
          <div className="kpi-value">{micro.length}</div>
          <div className="kpi-sub">~1 € puntual</div>
        </div>
        <div className="kpi kpi-accent-purple">
          <div className="kpi-label">● Licencia Claude Pro</div>
          <div className="kpi-value">{paid.length}</div>
          <div className="kpi-sub">20 €/mes por usuario</div>
        </div>
        <div className="kpi kpi-accent-red">
          <div className="kpi-label">Total anualizado</div>
          <div className="kpi-value">{totalYr.toLocaleString("es-ES")} €</div>
          <div className="kpi-sub">{totalMo} €/mes recurrente</div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-header">
          <div className="card-title">Distribución de iniciativas por nivel de coste</div>
        </div>
        <div className="card-body">
          <div className="cost-stack">
            <div className="cost-stack-free" style={{ flex: free.length }}>{free.length} gratis</div>
            {micro.length > 0 && <div className="cost-stack-micro" style={{ flex: micro.length }}>{micro.length}</div>}
            <div className="cost-stack-paid" style={{ flex: paid.length }}>{paid.length} licencia</div>
          </div>
          <div style={{ fontSize: 12.5, color: "var(--fg-muted)", marginTop: 8 }}>
            El <b style={{ color: "var(--fg)" }}>{Math.round(free.length / data.length * 100)}%</b> de las propuestas no requieren ninguna inversión — usan n8n self-hosted, Gemini incluido en Google Workspace y herramientas ya presentes en el stack.
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div className="card-title">Inversiones recurrentes — Claude Pro</div>
          <div style={{ fontSize: 11, color: "var(--fg-muted)" }}>20 €/mes · usuario</div>
        </div>
        <div className="card-body" style={{ padding: 0 }}>
          <table className="tbl">
            <thead>
              <tr><th>Persona</th><th>Área</th><th>Motivo</th><th>Coste/mes</th><th>Coste/año</th></tr>
            </thead>
            <tbody>
              {paid.map(d => (
                <tr key={d.id} onClick={() => onOpen(d)}>
                  <td><div className="persona-cell"><window.Avatar name={d.persona} size={24} /><span style={{ fontWeight: 500 }}>{d.persona}</span></div></td>
                  <td style={{ color: "var(--fg-muted)", fontSize: 12.5 }}>{d.area}</td>
                  <td className="cell-sol" style={{ maxWidth: 360 }}>{d.solucion}</td>
                  <td><span className="badge badge-coste-paid"><span className="dot" /> 20 €</span></td>
                  <td style={{ fontVariantNumeric: "tabular-nums", fontWeight: 500 }}>240 €</td>
                </tr>
              ))}
              <tr style={{ background: "var(--bg-2)", fontWeight: 600 }}>
                <td colSpan={3} style={{ textAlign: "right", color: "var(--fg-muted)" }}>Total</td>
                <td style={{ fontVariantNumeric: "tabular-nums" }}>{totalMo} €</td>
                <td style={{ fontVariantNumeric: "tabular-nums" }}>{totalYr} €</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

// ===== Drawer =====
window.Drawer = function Drawer({ row, onClose, onNav, data, editMode, setEdit, resetEdit, isEdited }) {
  useEffect(() => {
    const h = (e) => {
      // Don't intercept keys while editing an input
      const tag = (e.target && e.target.tagName) || "";
      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowDown" || e.key === "j") onNav(1);
      if (e.key === "ArrowUp" || e.key === "k") onNav(-1);
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose, onNav]);

  if (!row) return null;

  const patch = (p) => setEdit(row.id, p);

  // Others sharing any proposed tool
  const mineTools = row.herramientaPropuesta.split(/\s*\+\s*/).map(t => t.trim());
  const related = data.filter(d => d.id !== row.id && mineTools.some(t => d.herramientaPropuesta.includes(t))).slice(0, 5);

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="drawer">
        <div className="drawer-head">
          <window.Avatar name={row.persona} size={44} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="drawer-persona-name">
              {editMode
                ? <window.EditableText value={row.persona} onChange={(v) => patch({ persona: v })} />
                : <>{row.persona}{isEdited && <span className="edited-dot" title="Editado" />}</>}
            </div>
            <div className="drawer-persona-area">
              {editMode ? <window.EditableText value={row.area} onChange={(v) => patch({ area: v })} /> : row.area}
            </div>
          </div>
          {editMode && isEdited && (
            <button className="drawer-close" onClick={() => resetEdit(row.id)} title="Revertir cambios" style={{ width: "auto", padding: "0 10px", fontSize: 11, color: "var(--fg-muted)" }}>
              Revertir
            </button>
          )}
          <button className="drawer-close" onClick={onClose}>{window.Icons.close}</button>
        </div>
        <div className="drawer-body">
          <div className="field-row" style={{ marginBottom: 22 }}>
            {editMode ? (
              <>
                <window.EditableSelect value={row.impacto} options={["Alto", "Medio", "Bajo"]} onChange={(v) => patch({ impacto: v })}
                  renderValue={(v) => <span className={`badge badge-impact-${window.clsImpact(v)}`}><span className="dot" /> {v} impacto</span>} />
                <window.EditableSelect value={row.facilidad} options={["Fácil", "Media"]} onChange={(v) => patch({ facilidad: v })}
                  renderValue={(v) => <span className={`badge badge-${window.clsFac(v)}`}>{v}</span>} />
                <window.EditableSelect value={row.prioridad} options={[{ value: 1, label: "1ª" }, { value: 2, label: "2ª" }, { value: 3, label: "3ª" }]}
                  onChange={(v) => patch({ prioridad: Number(v) })}
                  renderValue={(v) => <span className={`badge badge-prio-${v}`}>Prioridad {v}ª</span>} />
                <window.EditableNumber value={row.coste} onChange={(v) => patch({ coste: v })} suffix="€" />
              </>
            ) : (
              <>
                <span className={`badge badge-impact-${window.clsImpact(row.impacto)}`}><span className="dot" /> {row.impacto} impacto</span>
                <span className={`badge badge-${window.clsFac(row.facilidad)}`}>{row.facilidad}</span>
                <span className={`badge badge-prio-${row.prioridad}`}>Prioridad {row.prioridad}ª</span>
                {row.coste === 0
                  ? <span className="badge badge-coste-0"><span className="dot" /> 0 € adicional</span>
                  : <span className="badge badge-coste-paid"><span className="dot" /> {row.costeLabel}</span>}
              </>
            )}
          </div>

          <div className="field">
            <div className="field-label">Pain point detectado</div>
            <div className="field-value">
              {editMode ? <window.EditableText multiline value={row.painPoint} onChange={(v) => patch({ painPoint: v })} /> : row.painPoint}
            </div>
          </div>

          <div className="field">
            <div className="field-label">Stack actual → propuesto</div>
            <div className="arrow">
              {editMode
                ? <window.EditableText value={row.herramientaActual} onChange={(v) => patch({ herramientaActual: v })} className="tool-pill" />
                : <span className="tool-pill">{row.herramientaActual}</span>}
              <span className="arrow-icon">→</span>
              {editMode
                ? <window.EditableText value={row.herramientaPropuesta} onChange={(v) => patch({ herramientaPropuesta: v })} className="tool-pill prop" />
                : <span className="tool-pill prop">{row.herramientaPropuesta}</span>}
            </div>
          </div>

          <div className="solution-box" style={{ marginBottom: 22 }}>
            <div className="field-label">Solución IA / Automatización</div>
            <div className="field-value">
              {editMode ? <window.EditableText multiline value={row.solucion} onChange={(v) => patch({ solucion: v })} /> : row.solucion}
            </div>
          </div>

          {related.length > 0 && (
            <div className="field">
              <div className="field-label">Personas con solución compartida</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 4 }}>
                {related.map(r => (
                  <button key={r.id} className="phase-item" style={{ width: "100%" }} onClick={() => { /* handled by parent via onOpen */
                    const ev = new CustomEvent("open-row", { detail: r });
                    window.dispatchEvent(ev);
                  }}>
                    <window.Avatar name={r.persona} size={22} />
                    <div className="phase-item-body">
                      <div className="phase-item-name">{r.persona}</div>
                      <div className="phase-item-tool">{r.herramientaPropuesta}</div>
                    </div>
                    <span className={`badge badge-impact-${window.clsImpact(r.impacto)}`}><span className="dot" /></span>
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="field" style={{ marginTop: 22, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
            <div style={{ fontSize: 11, color: "var(--fg-subtle)", display: "flex", gap: 12 }}>
              <span><kbd style={{ fontFamily: "var(--mono)", padding: "1px 5px", background: "var(--bg-3)", borderRadius: 4, border: "1px solid var(--border)" }}>↑↓</kbd> navegar</span>
              <span><kbd style={{ fontFamily: "var(--mono)", padding: "1px 5px", background: "var(--bg-3)", borderRadius: 4, border: "1px solid var(--border)" }}>Esc</kbd> cerrar</span>
              <span style={{ marginLeft: "auto" }}>Ficha {row.id} de {data.length}</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

// ===== Login View =====
window.ViewLogin = function ViewLogin({ onLogin }) {
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (user && pass) {
      onLogin();
    }
  };

  return (
    <div className="login-screen">
      <div className="login-bg-blob" />
      <div className="login-card">
        <img src="logo-xul.png" className="login-logo" alt="XUL Logo" />
        <div className="login-header">
          <h1>XUL Technologies</h1>
          <p>Bienvenido. Introduce tus credenciales.</p>
        </div>
        <form className="login-form" onSubmit={handleSubmit}>
          <div className="login-input-group">
            <label>Usuario</label>
            <input type="text" className="login-input" placeholder="p.ej. auditor" value={user} onChange={e => setUser(e.target.value)} required />
          </div>
          <div className="login-input-group">
            <label>Contraseña</label>
            <input type="password" className="login-input" placeholder="••••••••" value={pass} onChange={e => setPass(e.target.value)} required />
          </div>
          <button type="submit" className="login-submit">Acceder al Panel</button>
        </form>
        <div className="login-footer">
          XUL · © 2026
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { 
  ViewOverview: window.ViewOverview, 
  ViewPersonas: window.ViewPersonas, 
  ViewTools: window.ViewTools, 
  ViewRoadmap: window.ViewRoadmap, 
  ViewCosts: window.ViewCosts, 
  Drawer: window.Drawer,
  ViewLogin: window.ViewLogin
});