// wf/app.jsx — DesignCanvas root: assembles every section and mounts a small tweaks panel.

const { useState, useEffect } = React;

const ACCENTS = [
  { id:'sky',    label:'Bleu mer',  bg:'var(--sky-300)',  deep:'var(--sky-500)'  },
  { id:'sage',   label:'Sauge',     bg:'var(--sage-300)', deep:'var(--sage-500)' },
  { id:'copper', label:'Cuivre',    bg:'#E0B27B',         deep:'#A56A2C'         },
  { id:'cream',  label:'Crème',     bg:'#FCF2D9',         deep:'var(--brown-800)'},
];

function TweaksPanel() {
  const [open, setOpen] = useState(true);
  const [acc, setAcc] = useState('sky');
  const [available, setAvailable] = useState(false);

  // Apply accent to CSS variables
  useEffect(() => {
    const a = ACCENTS.find(x => x.id === acc) || ACCENTS[0];
    document.documentElement.style.setProperty('--wf-accent', a.bg);
    document.documentElement.style.setProperty('--wf-accent-deep', a.deep);
  }, [acc]);

  // Wire to host toolbar Tweaks toggle
  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode')   setOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    setAvailable(true);
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const dismiss = () => {
    setOpen(false);
    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
  };

  if (!open) {
    return (
      <button className="tk-toggle" onClick={() => setOpen(true)}>Tweaks</button>
    );
  }

  return (
    <div className="tk">
      <button className="close" onClick={dismiss} aria-label="Fermer">×</button>
      <h4>Tweaks</h4>
      <div style={{ fontSize: 11, color:'var(--fg-2)' }}>Quelques essais rapides.</div>

      <div className="lbl">Couleur d'accent</div>
      <div className="swatches">
        {ACCENTS.map(a => (
          <div key={a.id}
               title={a.label}
               className={'sw' + (acc === a.id ? ' on' : '')}
               style={{ background: a.bg }}
               onClick={() => setAcc(a.id)}
          />
        ))}
      </div>
      <div style={{ fontSize: 10, color:'var(--fg-2)', marginTop: 6 }}>
        {ACCENTS.find(x => x.id === acc)?.label}
      </div>
    </div>
  );
}

// ─── The Design Canvas root ─────────────────────────────────────────────
function App() {
  return (
    <>
      <DesignCanvas>
        {/* SECTION 1 — HOME (mobile, 4 directions) */}
        <DCSection
          id="home-mobile"
          title="Page d'accueil · mobile"
          subtitle="4 directions à comparer — choisissez celle qui vous parle, on raffinera ensuite.">
          <DCArtboard id="home-a" label="A · Grille d'icônes" width={360} height={780}>
            <CenterFrame><HomeGrid /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="home-b" label="B · Liste éditoriale" width={360} height={780}>
            <CenterFrame><HomeEditorial /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="home-c" label="C · Photo héro" width={360} height={780}>
            <CenterFrame><HomeHero /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="home-d" label="D · Index typographique" width={360} height={780}>
            <CenterFrame><HomeIndex /></CenterFrame>
          </DCArtboard>
        </DCSection>

        {/* SECTION 2 — HOME desktop */}
        <DCSection
          id="home-desktop"
          title="Page d'accueil · desktop"
          subtitle="Mêmes directions adaptées au format large.">
          <DCArtboard id="d-home-a" label="A · Grille d'icônes" width={1100} height={620}>
            <CenterFrame><DeskGrid /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="d-home-b" label="B · Liste éditoriale" width={1100} height={620}>
            <CenterFrame><DeskEditorial /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="d-home-c" label="C · Photo héro" width={1100} height={620}>
            <CenterFrame><DeskHero /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="d-home-d" label="D · Index typographique" width={1100} height={620}>
            <CenterFrame><DeskIndex /></CenterFrame>
          </DCArtboard>
        </DCSection>

        {/* SECTION 3 — CATEGORY (Restaurants) */}
        <DCSection
          id="category"
          title="Catégorie · ex. Restaurants"
          subtitle="Comment se présentent les 15 adresses dans chaque rubrique.">
          <DCArtboard id="cat-a" label="A · Liste classique" width={360} height={780}>
            <CenterFrame><CatList /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="cat-b" label="B · Magazine éditorial" width={360} height={780}>
            <CenterFrame><CatMagazine /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="cat-c" label="C · Carte + liste" width={360} height={780}>
            <CenterFrame><CatMap /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="cat-d" label="D · Mosaïque immersive" width={360} height={780}>
            <CenterFrame><CatMosaic /></CenterFrame>
          </DCArtboard>
        </DCSection>

        {/* SECTION 4 — DETAIL */}
        <DCSection
          id="detail"
          title="Fiche d'une adresse"
          subtitle="Photo · note Google · description perso · lien Maps · téléphone · site.">
          <DCArtboard id="det-a" label="A · Arche centrée" width={360} height={780}>
            <CenterFrame><DetailA /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="det-b" label="B · Plein cadre" width={360} height={780}>
            <CenterFrame><DetailB /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="det-c" label="C · Éditorial 2 cols" width={360} height={780}>
            <CenterFrame><DetailC /></CenterFrame>
          </DCArtboard>
        </DCSection>

        {/* SECTION 5 — UTILITY */}
        <DCSection
          id="utility"
          title="Écrans utiles"
          subtitle="Wi-Fi, règles, urgences, check-in — proposés en un seul style pour l'instant.">
          <DCArtboard id="util-wifi" label="Wi-Fi" width={360} height={780}>
            <CenterFrame><Wifi /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="util-rules" label="Règles de la maison" width={360} height={780}>
            <CenterFrame><Rules /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="util-check" label="Check-in / out" width={360} height={780}>
            <CenterFrame><CheckIn /></CenterFrame>
          </DCArtboard>
          <DCArtboard id="util-help" label="Urgences" width={360} height={780}>
            <CenterFrame><Urgences /></CenterFrame>
          </DCArtboard>
        </DCSection>

      </DesignCanvas>

      <TweaksPanel />
    </>
  );
}

// Tiny wrapper that vertically + horizontally centres a fixed-width child
// inside its DCArtboard, with a soft page-color backdrop.
function CenterFrame({ children }) {
  return (
    <div style={{
      width:'100%', height:'100%',
      display:'flex', alignItems:'center', justifyContent:'center',
      background: 'var(--beige-100)',
      padding: 24,
    }}>
      {children}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('canvas-root')).render(<App />);