// Root App

const { useState: useStateApp } = React;

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "tileStyle": "warm",
  "showHalos": true,
  "accent": "#E31E24"
}/*EDITMODE-END*/;

function App() {
  const [selected, setSelected] = useStateApp(null);
  const [view, setView] = useStateApp("panorama");
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(DEFAULT_TWEAKS)
    : [DEFAULT_TWEAKS, () => {}];

  // apply accent dynamically
  React.useEffect(() => {
    document.documentElement.style.setProperty("--red", tweaks.accent || "#E31E24");
  }, [tweaks.accent]);

  // tile style — apply via class on body
  React.useEffect(() => {
    document.body.dataset.tile = tweaks.tileStyle || "warm";
  }, [tweaks.tileStyle]);

  const [panelOpen, setPanelOpen] = useStateApp(false);
  React.useEffect(() => { if (selected !== null) setPanelOpen(true); }, [selected]);

  const data = window.FDB_DATA;

  return (
    <div className="app" data-panel-open={panelOpen ? "true" : "false"}>
      {/* Header */}
      <header className="header">
        <div className="header-left">
          <a href="../nosotros.html" title="Volver al sitio web" style={{ display: "block", lineHeight: 0 }}>
            <div className="logo-horiz">
              <img src="assets/logo-horizontal.png" alt="Fundación Don Bosco · Transformando Vidas" />
            </div>
          </a>
          <div className="header-divider" />
          <div className="header-title">
            <div className="header-eyebrow">FECU Social · 2025</div>
            <div className="header-h1">
              Presencia <em>territorial</em>
            </div>
          </div>
        </div>
        <div className="header-right">
          <div className="stat">
            <div className="v">14</div>
            <div className="k">Proyectos</div>
          </div>
          <div className="stat-divider" />
          <div className="stat">
            <div className="v">19</div>
            <div className="k">Comunas</div>
          </div>
          <div className="stat-divider" />
          <div className="stat">
            <div className="v">2.043</div>
            <div className="k">Personas atendidas</div>
          </div>
          <div className="stat-divider" />
          <div className="stat">
            <div className="v">2</div>
            <div className="k">Regiones</div>
          </div>
        </div>
      </header>

      {/* Map */}
      <window.MapView
        selected={selected}
        setSelected={setSelected}
        view={view}
        setView={setView}
        tweaks={tweaks}
      />

      {/* Legend rail */}
      <div className="legend">
        <span className="legend-title">Áreas Programáticas</span>
        {Object.entries(data.areas).map(([name, def]) => (
          <div className="legend-row" key={name}>
            <div className="legend-dot" style={{ background: def.color }} />
            <span className="legend-label">{name}</span>
          </div>
        ))}
        <div className="legend-divider" />
        <div className="legend-row">
          <svg width="14" height="14" style={{ flexShrink: 0 }}>
            <circle cx="7" cy="7" r="5.5" fill="none" stroke="var(--red)" strokeWidth="1.3" />
            <line x1="2" y1="7" x2="12" y2="7" stroke="var(--red)" strokeWidth="1" />
            <line x1="7" y1="2" x2="7" y2="12" stroke="var(--red)" strokeWidth="1" />
            <circle cx="7" cy="7" r="2" fill="var(--red)" />
          </svg>
          <span className="legend-label">Sede Central · Santiago</span>
        </div>
        <div className="legend-row">
          <svg width="14" height="14" style={{ flexShrink: 0 }}>
            <circle cx="7" cy="7" r="6" fill="var(--paper)" stroke="var(--red)" strokeWidth="1.2" />
            <text x="7" y="10" textAnchor="middle" fontSize="8" fontFamily="JetBrains Mono" fill="var(--red)" fontWeight="600">n</text>
          </svg>
          <span className="legend-label">Comuna con cobertura</span>
        </div>
        <div className="legend-divider" />
        <span className="legend-row" style={{ color: "var(--ink-mute)", fontStyle: "italic" }}>
          → Acercar el mapa revela proyectos individuales
        </span>
      </div>

      {/* Panel */}
      <window.Panel selected={selected} setSelected={setSelected} setView={setView} />

      {/* Footer */}
      <footer className="footer">
        <div className="l">
          <span><span className="footer-pulse"></span>Datos al 31 dic 2025</span>
          <span>· Fuente: FECU Social Fundación Don Bosco</span>
        </div>
        <div className="r">
          <span>Arrastrar para desplazar</span>
          <span>· Rueda para acercar</span>
          <span>· Click en comuna para detalle</span>
        </div>
      </footer>

      {/* Tweaks Panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Estilo del mapa">
            <window.TweakRadio
              label="Tono"
              value={tweaks.tileStyle}
              onChange={(v) => setTweak("tileStyle", v)}
              options={[
                { value: "warm", label: "Cálido" },
                { value: "neutral", label: "Neutral" },
                { value: "mono", label: "Mono" },
              ]}
            />
          </window.TweakSection>
          <window.TweakSection label="Acento institucional">
            <window.TweakColor
              label="Rojo Don Bosco"
              value={tweaks.accent}
              onChange={(v) => setTweak("accent", v)}
              options={["#E30613", "#C2002A", "#A8181E", "#D9531E", "#1F4E8C"]}
            />
          </window.TweakSection>
          <window.TweakSection label="Saltar a vista">
            <window.TweakSelect
              label="Vista actual"
              value={view}
              onChange={setView}
              options={[
                { value: "panorama", label: "Panorámica completa" },
                { value: "valparaiso", label: "Región de Valparaíso" },
                { value: "santiago", label: "Región Metropolitana" },
              ]}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}

      {/* Mobile: backdrop + close + FAB */}
      <div
        className="mobile-backdrop"
        onClick={() => { setPanelOpen(false); setSelected(null); }}
      />
      <button
        className="panel-close-mobile"
        onClick={() => { setPanelOpen(false); setSelected(null); }}
        aria-label="Cerrar panel"
      >✕</button>
      <button
        className="panel-fab"
        onClick={() => setPanelOpen(true)}
        aria-label="Ver proyectos y estadísticas"
      >
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
          <rect x="1" y="2" width="12" height="1.5" rx="0.75" fill="currentColor"/>
          <rect x="1" y="6.25" width="12" height="1.5" rx="0.75" fill="currentColor"/>
          <rect x="1" y="10.5" width="12" height="1.5" rx="0.75" fill="currentColor"/>
        </svg>
        Ver proyectos
      </button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);