// Auri DM landing — Tweaks integration
// Lets the user swap accent palette, theme (dark/light), display font,
// and hero variant from the floating Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#5BC8E5", "#3FA5C7", "rgba(91, 200, 229, 0.16)", "rgba(91, 200, 229, 0.35)"],
  "dark": true,
  "displayFont": "Manrope",
  "heroVariant": "photo",
  "heroPhoto": "sunset"
}/*EDITMODE-END*/;

const PALETTES = [
  // [gold, gold-2, gold-soft, gold-glow]
  ["#E5B25D", "#C99445", "rgba(229, 178, 93, 0.16)", "rgba(229, 178, 93, 0.35)"], // Aurum (default)
  ["#5BC8E5", "#3FA5C7", "rgba(91, 200, 229, 0.16)", "rgba(91, 200, 229, 0.35)"], // Cockpit cyan
  ["#E56B5D", "#C44A3F", "rgba(229, 107, 93, 0.16)", "rgba(229, 107, 93, 0.35)"], // Runway red
  ["#9EE57E", "#71BD55", "rgba(158, 229, 126, 0.14)", "rgba(158, 229, 126, 0.32)"], // Radar green
];

const HERO_PHOTOS = {
  sunset:  "https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1200&q=80&auto=format&fit=crop",
  cockpit: "https://images.unsplash.com/photo-1540962351504-03099e0a754b?w=1200&q=80&auto=format&fit=crop",
  jet:     "https://images.unsplash.com/photo-1583500178690-f7fd39158bd2?w=1200&q=80&auto=format&fit=crop",
  wing:    "https://images.unsplash.com/photo-1474302770737-173ee21bab63?w=1200&q=80&auto=format&fit=crop",
};

function applyPalette(p) {
  const root = document.documentElement;
  root.style.setProperty('--gold',      p[0]);
  root.style.setProperty('--gold-2',    p[1]);
  root.style.setProperty('--gold-soft', p[2]);
  root.style.setProperty('--gold-glow', p[3]);
}

function applyTheme(dark) {
  document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
}

function applyFont(name) {
  document.documentElement.style.setProperty('--font-display', `"${name}", system-ui, sans-serif`);
}

function applyHero(variant, photoKey) {
  const v = document.getElementById('heroVisual');
  if (!v) return;
  // Reset variant classes
  v.classList.remove('var-photo', 'var-dashboard', 'var-routes');
  v.classList.add('var-' + variant);

  // Clear non-overlay children — keep .hero-card elements
  [...v.querySelectorAll(':scope > img, :scope > .hero-mock, :scope > .hero-routes')].forEach(n => n.remove());

  if (variant === 'photo') {
    const img = document.createElement('img');
    img.src = HERO_PHOTOS[photoKey] || HERO_PHOTOS.sunset;
    img.alt = 'Lotnictwo';
    img.loading = 'eager';
    v.insertBefore(img, v.firstChild);
  } else if (variant === 'dashboard') {
    const m = document.createElement('div');
    m.className = 'hero-mock';
    m.innerHTML = `
      <div class="hm-bar">
        <div class="hm-dots"><i></i><i></i><i></i></div>
        <div class="hm-url">app.auridm.aero</div>
      </div>
      <div class="hm-grid">
        <div class="hm-side">
          <div class="hm-row act"></div>
          <div class="hm-row"></div>
          <div class="hm-row"></div>
          <div class="hm-row"></div>
          <div class="hm-row sm"></div>
          <div class="hm-row"></div>
          <div class="hm-row"></div>
        </div>
        <div class="hm-main">
          <div class="hm-h">
            <div class="hm-title"></div>
            <div class="hm-tabs"><i class="on"></i><i></i><i></i></div>
          </div>
          <div class="hm-map">
            <svg viewBox="0 0 200 110" preserveAspectRatio="none">
              <path d="M30,40 Q60,30 100,50 T180,70" fill="none" stroke="var(--gold)" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.8"/>
              <path d="M20,80 Q60,70 110,75 T185,40" fill="none" stroke="var(--info, #6BA8E5)" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.6"/>
              <circle cx="30" cy="40" r="2" fill="var(--gold)"/>
              <circle cx="100" cy="50" r="2" fill="var(--gold)"/>
              <circle cx="180" cy="70" r="2" fill="var(--gold)"/>
              <circle cx="20" cy="80" r="1.6" fill="var(--ink)"/>
              <circle cx="185" cy="40" r="1.6" fill="var(--ink)"/>
            </svg>
          </div>
          <div class="hm-kpis">
            <div class="hm-kpi"><b>128</b><span>loty</span></div>
            <div class="hm-kpi"><b>96%</b><span>punkt.</span></div>
            <div class="hm-kpi"><b>87%</b><span>wykorz.</span></div>
          </div>
        </div>
      </div>
    `;
    v.insertBefore(m, v.firstChild);
  } else if (variant === 'routes') {
    const r = document.createElement('div');
    r.className = 'hero-routes';
    r.innerHTML = `
      <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
        <defs>
          <radialGradient id="hrGlow" cx="50%" cy="40%" r="60%">
            <stop offset="0%" stop-color="var(--gold)" stop-opacity="0.18"/>
            <stop offset="100%" stop-color="var(--gold)" stop-opacity="0"/>
          </radialGradient>
        </defs>
        <rect width="400" height="500" fill="url(#hrGlow)"/>
        <g stroke="rgba(244,239,226,0.06)" stroke-width="0.4">
          ${Array.from({length: 11}, (_, i) => `<line x1="0" y1="${i * 50}" x2="400" y2="${i * 50}"/>`).join('')}
          ${Array.from({length: 9}, (_, i) => `<line x1="${i * 50}" y1="0" x2="${i * 50}" y2="500"/>`).join('')}
        </g>
        <g fill="none" stroke="var(--gold)" stroke-width="1.5" stroke-linecap="round">
          <path d="M50,420 Q120,180 200,200 T380,90" stroke-dasharray="4 4" opacity="0.9">
            <animate attributeName="stroke-dashoffset" from="0" to="-80" dur="3s" repeatCount="indefinite"/>
          </path>
          <path d="M80,80 Q180,300 260,260 T350,400" stroke="var(--info, #6BA8E5)" stroke-dasharray="3 5" opacity="0.6">
            <animate attributeName="stroke-dashoffset" from="0" to="-64" dur="4s" repeatCount="indefinite"/>
          </path>
          <path d="M30,250 Q200,180 370,260" stroke-dasharray="2 6" opacity="0.4"/>
        </g>
        <g>
          <circle cx="50" cy="420" r="4" fill="var(--gold)"/>
          <circle cx="200" cy="200" r="3.5" fill="var(--gold)"/>
          <circle cx="380" cy="90" r="4" fill="var(--gold)"/>
          <circle cx="80" cy="80" r="3" fill="var(--info, #6BA8E5)"/>
          <circle cx="350" cy="400" r="3" fill="var(--info, #6BA8E5)"/>
        </g>
        <g font-family="'Space Grotesk', sans-serif" font-size="10" fill="rgba(244,239,226,0.5)">
          <text x="58" y="437">WAW</text>
          <text x="208" y="200">FRA</text>
          <text x="350" y="80">LHR</text>
          <text x="88" y="80">ARN</text>
          <text x="320" y="418">ATH</text>
        </g>
      </svg>
    `;
    v.insertBefore(r, v.firstChild);
  }
}

function TweakApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply on mount + on every change
  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  React.useEffect(() => { applyTheme(t.dark); }, [t.dark]);
  React.useEffect(() => { applyFont(t.displayFont); }, [t.displayFont]);
  React.useEffect(() => { applyHero(t.heroVariant, t.heroPhoto); }, [t.heroVariant, t.heroPhoto]);

  return (
    <TweaksPanel title="Tweaks · Auri DM">
      <TweakSection label="Motyw" />
      <TweakToggle label="Tryb ciemny" value={t.dark}
                   onChange={(v) => setTweak('dark', v)} />

      <TweakSection label="Paleta akcentu" />
      <TweakColor label="Akcent" value={t.palette}
                  options={PALETTES}
                  onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="Typografia" />
      <TweakSelect label="Font headline" value={t.displayFont}
                   options={[
                     { value: "Space Grotesk", label: "Space Grotesk" },
                     { value: "Bricolage Grotesque", label: "Bricolage Grotesque" },
                     { value: "Instrument Serif", label: "Instrument Serif" },
                     { value: "Manrope", label: "Manrope" },
                   ]}
                   onChange={(v) => setTweak('displayFont', v)} />

      <TweakSection label="Wariant hero" />
      <TweakRadio label="Treść" value={t.heroVariant}
                  options={[
                    { value: "photo",     label: "Zdjęcie" },
                    { value: "dashboard", label: "Dashboard" },
                    { value: "routes",    label: "Trasy" },
                  ]}
                  onChange={(v) => setTweak('heroVariant', v)} />
      {t.heroVariant === 'photo' && (
        <TweakSelect label="Zdjęcie" value={t.heroPhoto}
                     options={[
                       { value: "sunset",  label: "Skrzydło o zachodzie" },
                       { value: "cockpit", label: "Kokpit nocą" },
                       { value: "jet",     label: "Samolot na płycie" },
                       { value: "wing",    label: "Widok z lotu" },
                     ]}
                     onChange={(v) => setTweak('heroPhoto', v)} />
      )}
    </TweaksPanel>
  );
}

const __twk_root = document.getElementById('tweaks-root');
if (__twk_root) {
  ReactDOM.createRoot(__twk_root).render(<TweakApp />);
}