/* Gaby · App — shell de 3 zonas, cambio de pantalla, tweaks. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "avatarFace": "bun",
  "avatarRing": "dashed",
  "glow": "normal",
  "depth": "regular",
  "kpiStyle": "accent"
}/*EDITMODE-END*/;

const SCREEN_LABEL = {
  dashboard: "Dashboard", pendientes: "Pendientes", agenda: "Agenda",
  workshop: "Workshop", personal: "Personal",
  correo: "Correo electrónico", seguimiento: "Seguimiento de proyectos",
};

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState("dashboard");
  const [gabyOpen, setGabyOpen] = React.useState(false);
  const scrollRef = React.useRef(null);

  const go = (id) => {
    setActive(id);
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  };

  const Dashboard = window.GabyDashboard;
  const M = window.GabyModules;
  const face = t.avatarFace, ring = t.avatarRing;

  const renderScreen = () => {
    switch (active) {
      case "dashboard":  return <Dashboard face={face} ring={ring} kpiStyle={t.kpiStyle} onOpenGaby={() => setGabyOpen(true)} />;
      case "pendientes": return <M.Pendientes />;
      case "agenda":     return <M.Agenda />;
      case "workshop":   return <M.Workshop />;
      case "personal":   return <M.Personal />;
      case "correo":     return <M.Correo />;
      case "seguimiento": return <M.Seguimiento />;
      default:           return null;
    }
  };

  const {
    TweaksPanel, TweakSection, TweakRadio, TweakSelect,
  } = window;

  return (
    <div className="cy-stage" data-glow={t.glow} data-depth={t.depth}>
      <span className="cy-glow cy-glow--orange" />
      <span className="cy-glow cy-glow--petrol" />

      <div className="cy-shell">
        <window.GabySidebar active={active} onNav={go} />

        <main className="cy-main">
          {/* Breadcrumb desktop */}
          <div className="cy-crumb cy-mono" style={{ fontSize: 11 }}>
            <span style={{ color: "var(--cy-muted)" }}>Cinthia</span>
            <span className="cy-crumb__sep">›</span>
            <span className="cy-crumb__here">{SCREEN_LABEL[active]}</span>
            <span className="cy-crumb__spacer" />
            <span className="cy-crumb__time">{window.GABY_DATA.fecha.hora}</span>
          </div>

          {/* Top bar móvil */}
          <div className="cy-mobile-top">
            <window.GabyBrandMark size={26} />
            <div className="cy-brand__word" style={{ fontSize: "1.25rem" }}>Gaby</div>
            <span className="cy-crumb__spacer" style={{ flex: 1 }} />
            <span className="cy-id__avatar" style={{ width: 32, height: 32, fontSize: 13 }}>C</span>
          </div>

          <div className="cy-scroll" ref={scrollRef}>
            <div className="cy-wrap">
              {renderScreen()}
            </div>
          </div>
        </main>
      </div>

      <window.GabyMobileTabs active={active} onNav={go} />

      <window.GabyDock open={gabyOpen} setOpen={setGabyOpen} face={face} ring={ring} />
      <window.GabyToasts />

      <TweaksPanel>
        <TweakSection label="El rostro de Gaby" />
        <TweakRadio label="Retrato" value={t.avatarFace}
          options={["bun", "wave", "mark"]}
          onChange={(v) => setTweak("avatarFace", v)} />
        <TweakRadio label="Anillo" value={t.avatarRing}
          options={["dashed", "double", "travel"]}
          onChange={(v) => setTweak("avatarRing", v)} />

        <TweakSection label="Ambiente" />
        <TweakRadio label="Brillo de fondo" value={t.glow}
          options={["calm", "normal", "warm"]}
          onChange={(v) => setTweak("glow", v)} />
        <TweakRadio label="Profundidad navy" value={t.depth}
          options={["regular", "deep"]}
          onChange={(v) => setTweak("depth", v)} />

        <TweakSection label="Tarjetas KPI" />
        <TweakRadio label="Estilo" value={t.kpiStyle}
          options={["accent", "filled", "plain"]}
          onChange={(v) => setTweak("kpiStyle", v)} />
      </TweaksPanel>
    </div>
  );
}

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