// Side panel — adapts based on selection. Brand-aligned per CLAUDE.md.

const { useMemo: useMemoPanel } = React;

const backBtnStyle = {
  background: "transparent",
  border: "none",
  cursor: "pointer",
  fontFamily: "Montserrat, sans-serif",
  fontSize: 10,
  letterSpacing: "0.16em",
  color: "var(--ink-mute)",
  fontWeight: 700,
  textTransform: "uppercase",
};

const kindCopy = {
  Ambulatorio:
    "Equipos que acompañan a NNA y sus familias en sus territorios, mediante visitas domiciliarias, trabajo de calle y atención diurna en sede.",
  Residencial:
    "Las personas viven en el dispositivo mientras reciben tratamiento, asistencia y acompañamiento integral los 365 días del año.",
  Comunitario:
    "Espacio de encuentro abierto al barrio con talleres educativos, deportivos, formativos y recreativos para NNA y familias.",
  Asistencia:
    "Centro de día con servicios básicos —higiene, alimentación, vestuario— y apoyo psicosocial a personas adultas en situación de calle.",
};

function Panel({ selected, setSelected, setView }) {
  const data = window.FDB_DATA;

  // ============= PROJECT VIEW =============
  if (selected?.type === "project") {
    const p = data.projects.find((x) => x.id === selected.id);
    if (!p) return null;
    const area = data.areas[p.area];
    return (
      <aside className="panel">
        <div className="panel-header" style={{ position: "relative", overflow: "hidden" }}>
          <div
            className="panel-eyebrow"
            style={{
              color: area.color,
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span
                style={{
                  width: 6,
                  height: 6,
                  borderRadius: "50%",
                  background: area.color,
                  display: "inline-block",
                }}
              />
              Proyecto · {p.area}
            </span>
            <button onClick={() => setSelected(null)} style={backBtnStyle} aria-label="Volver al panel principal">
              ← Volver
            </button>
          </div>
          <div className="panel-title">{p.name}</div>
          <div className="panel-sub">{p.target}</div>
        </div>
        <div className="panel-body">
          {/* Stats grid */}
          <div className="stat-pair">
            <div className="stat-cell">
              <div className="stat-cell-v" style={{ color: area.color }}>{p.coverage}</div>
              <div className="stat-cell-k">Cobertura<br />mensual</div>
            </div>
            <div className="stat-cell">
              <div className="stat-cell-v">{p.annual}</div>
              <div className="stat-cell-k">Atendidos<br />en 2025</div>
            </div>
          </div>

          <div className="section-head">
            Modalidad <span className="count">{p.kind}</span>
          </div>
          <p className="body-copy">{kindCopy[p.kind]}</p>

          <div className="section-head">
            Territorio <span className="count">{p.comunas.length} comuna{p.comunas.length === 1 ? "" : "s"}</span>
          </div>
          <div className="comuna-list">
            {p.comunas.map((c) => (
              <div key={c} className="comuna-list-row">
                <span className="comuna-list-name">{c}</span>
                <span className="comuna-list-tag">
                  {p.region === "V" ? "V Región" : "RM"}
                </span>
              </div>
            ))}
          </div>
          {p.sector && (
            <div className="sector-pill">
              <span>Sector</span>
              <b>{p.sector}</b>
            </div>
          )}

          <div className="brand-ribbon">
            <img src="assets/icon-mark.png" alt="" />
            <div>
              <div className="brand-ribbon-tag">Transformando vidas</div>
              <div className="brand-ribbon-text">Fundación Don Bosco · Obra de la Congregación Salesiana de Chile</div>
            </div>
          </div>
        </div>
      </aside>
    );
  }

  // ============= COMUNA VIEW =============
  if (selected?.type === "comuna") {
    const c = data.comunas.find((x) => x.name === selected.name);
    if (!c) return null;
    const projectsHere = data.projects.filter(
      (p) => !p.generic && p.comunas.includes(c.name)
    );
    const totalCoverage = projectsHere.reduce((s, p) => s + p.coverage, 0);
    const totalAnnual = projectsHere.reduce((s, p) => s + p.annual, 0);
    return (
      <aside className="panel">
        <div className="panel-header">
          <div
            className="panel-eyebrow"
            style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}
          >
            <span>Comuna · {c.region === "V" ? "Región de Valparaíso" : "Región Metropolitana"}</span>
            <button onClick={() => setSelected(null)} style={backBtnStyle} aria-label="Volver al panel principal">
              ← Volver
            </button>
          </div>
          <div className="panel-title">
            {c.name === "Santiago" ? <em>{c.name}</em> : c.name}
          </div>
          <div className="panel-sub">
            {projectsHere.length > 0
              ? `${projectsHere.length} proyecto${projectsHere.length === 1 ? "" : "s"} de la Fundación Don Bosco operan en esta comuna.`
              : "Comuna sin proyectos directos en este momento."}
          </div>
        </div>
        <div className="panel-body">
          {/* coords + stats */}
          <div className="comuna-summary">
            <div className="comuna-summary-coord">
              {Math.abs(c.lat).toFixed(3)}° S · {Math.abs(c.lon).toFixed(3)}° W
            </div>
            <div className="stat-pair" style={{ marginTop: 10 }}>
              <div className="stat-cell">
                <div className="stat-cell-v">{totalCoverage}</div>
                <div className="stat-cell-k">Cobertura<br />mensual</div>
              </div>
              <div className="stat-cell">
                <div className="stat-cell-v">{totalAnnual}</div>
                <div className="stat-cell-k">Atendidos<br />en 2025</div>
              </div>
            </div>
          </div>

          {c.name === "Santiago" && (
            <div className="sede-card">
              <img src="assets/icon-mark.png" className="sede-card-mark" alt="" />
              <div className="sede-card-eyebrow">SEDE CENTRAL</div>
              <div className="sede-card-title">Jécar Nehgme 11</div>
              <div className="sede-card-sub">Santiago Centro · Casa matriz de la Fundación</div>
              <div className="sede-card-line" />
              <div className="sede-card-cite">+56 2 2697 0245 · fundaciondonbosco.cl</div>
            </div>
          )}

          {projectsHere.length > 0 && (
            <>
              <div className="section-head">
                Proyectos en {c.name} <span className="count">{projectsHere.length}</span>
              </div>
              {projectsHere.map((p) => {
                const area = data.areas[p.area];
                return (
                  <div
                    key={p.id}
                    className="proj-card"
                    onClick={() => setSelected({ type: "project", id: p.id })}
                  >
                    <div className="proj-card-head">
                      <div className="proj-card-name">{p.name}</div>
                      <span className="proj-card-area" style={{ background: area.color }}>
                        {area.short}
                      </span>
                    </div>
                    <div className="proj-card-meta">
                      <span><b>{p.coverage}</b> /mes</span>
                      <span><b>{p.annual}</b> /año</span>
                      <span style={{ color: "var(--ink-mute)" }}>{p.kind}</span>
                    </div>
                    <div className="proj-card-target">{p.target}</div>
                  </div>
                );
              })}
            </>
          )}

          {projectsHere.length === 0 && (
            <div className="empty">
              No hay proyectos directos en {c.name}.
              <div className="empty-hint">→ Volver a la vista regional</div>
            </div>
          )}
        </div>
      </aside>
    );
  }

  // ============= OVERVIEW (nothing selected) =============
  const totalsByArea = useMemoPanel(() => {
    const groups = {};
    data.projects.forEach((p) => {
      groups[p.area] = groups[p.area] || { count: 0, coverage: 0, annual: 0 };
      groups[p.area].count += 1;
      groups[p.area].coverage += p.coverage;
      groups[p.area].annual += p.annual;
    });
    return groups;
  }, [data.projects]);

  return (
    <aside className="panel">
      {/* Brand hero */}
      <div className="brand-hero">
        <div className="brand-hero-mark">
          <img src="assets/icon-mark.png" alt="Fundación Don Bosco" />
        </div>
        <div className="brand-hero-quote">
          “Acoger, acompañar y comprometerse incondicionalmente con cada niño, niña y joven.”
        </div>
        <div className="brand-hero-tag">TRANSFORMANDO VIDAS · DESDE 2004</div>
      </div>

      <div className="panel-header">
        <div className="panel-eyebrow">Vista general · FECU Social 2025</div>
        <div className="panel-title">
          Presencia <em>territorial</em>
        </div>
        <div className="panel-sub">
          La Fundación Don Bosco opera 14 proyectos en 19 comunas de la Región Metropolitana y la Región de Valparaíso, fortaleciendo el tejido social en torno a niños, niñas, jóvenes, familias y adultos en situación de exclusión.
        </div>
      </div>

      <div className="panel-body">
        <div className="comuna-summary">
          <div className="stat-pair">
            <div className="stat-cell">
              <div className="stat-cell-v" style={{ color: "var(--red)" }}>2.043</div>
              <div className="stat-cell-k">Personas<br />atendidas 2025</div>
            </div>
            <div className="stat-cell">
              <div className="stat-cell-v">84,9%</div>
              <div className="stat-cell-k">Indicador global<br />de recuperación</div>
            </div>
          </div>
        </div>

        <div className="section-head">
          Por Área Programática
          <span className="count">{data.projects.filter(p => !p.generic).length} PROYECTOS</span>
        </div>
        {Object.entries(totalsByArea).map(([area, t]) => {
          const def = data.areas[area];
          return (
            <div key={area} className="area-row">
              <div className="area-bar" style={{ background: def.color }} />
              <div style={{ flex: 1 }}>
                <div className="area-name">{area}</div>
                <div className="area-meta">
                  {t.count} proyecto{t.count === 1 ? "" : "s"} · cobertura {t.coverage}/mes
                </div>
              </div>
              <div className="area-figure" style={{ color: def.color }}>
                {t.annual}
              </div>
            </div>
          );
        })}

        <div className="section-head">
          Saltar a Vista <span className="count">2 REGIONES</span>
        </div>
        <div className="region-jumps">
          <button onClick={() => setView("santiago")} className="region-jump">
            <div className="region-jump-eyebrow">Región Metropolitana</div>
            <div className="region-jump-title">Santiago</div>
            <div className="region-jump-meta">
              17 COMUNAS <span style={{ color: "var(--red)" }}>→</span>
            </div>
          </button>
          <button onClick={() => setView("valparaiso")} className="region-jump">
            <div className="region-jump-eyebrow">V Región</div>
            <div className="region-jump-title">Valparaíso</div>
            <div className="region-jump-meta">
              2 COMUNAS <span style={{ color: "var(--red)" }}>→</span>
            </div>
          </button>
        </div>

        <div className="section-head">
          Explorar Proyectos <span className="count">{data.projects.filter(p => !p.generic).length}</span>
        </div>
        <div className="proj-browser">
          {data.projects.filter(p => !p.generic).map((p) => {
            const area = data.areas[p.area];
            return (
              <button
                key={p.id}
                className="proj-browser-item"
                onClick={() => setSelected({ type: "project", id: p.id })}
                style={{ "--area-color": area.color }}
              >
                <div className="proj-browser-dot" style={{ background: area.color }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="proj-browser-name">{p.name}</div>
                </div>
                <div className="proj-browser-addr">{p.sedeComuna}</div>
                <div className="proj-browser-arrow">→</div>
              </button>
            );
          })}
        </div>

        <div className="section-head">
          Dispositivos sin comuna fija <span className="count">{data.projects.filter(p => p.generic).length}</span>
        </div>
        <p className="body-copy" style={{ marginBottom: 10 }}>
          Residencias y casas compartidas distribuidas en la RM (dirección protegida por seguridad de las personas atendidas):
        </p>
        {data.projects
          .filter((p) => p.generic)
          .map((p) => (
            <div
              key={p.id}
              className="proj-card"
              onClick={() => setSelected({ type: "project", id: p.id })}
              style={{ padding: "10px 12px" }}
            >
              <div className="proj-card-name" style={{ fontSize: 12.5 }}>
                {p.name}
              </div>
              <div className="proj-card-meta" style={{ fontSize: 10 }}>
                <span><b>{p.coverage}</b> CUPOS</span>
                <span style={{ color: "var(--ink-mute)" }}>{p.kind}</span>
              </div>
            </div>
          ))}

        <div className="brand-footer">
          <div className="brand-footer-line" />
          <div className="brand-footer-text">
            Obra que pertenece a la <b>Congregación Salesiana de Chile</b>. Personalidad jurídica concedida por Decreto Supremo N°1293 del 20 de abril de 2004.
          </div>
        </div>
      </div>
    </aside>
  );
}

window.Panel = Panel;