// FashionFactoryDirect — main app

const PALETTES = [
  { name: 'Ivory · Ink · Burgundy', bg: '#F4F1EC', bgElev: '#FAF8F4', ink: '#1A1815', accent: '#6B2A1E' },
  { name: 'Bone · Charcoal · Terracotta', bg: '#EEE9DF', bgElev: '#F7F2E8', ink: '#22201D', accent: '#A04A2A' },
  { name: 'Pure · Black · Crimson', bg: '#FFFFFF', bgElev: '#FAFAFA', ink: '#0E0E0E', accent: '#B01529' },
  { name: 'Pearl · Navy · Gold', bg: '#F1EEE7', bgElev: '#F8F5EE', ink: '#0F1A2E', accent: '#8C6A2A' },
];

const TYPE_PAIRS = [
  { name: 'Instrument Serif + Manrope', display: "'Instrument Serif', serif", body: "'Manrope', system-ui, sans-serif" },
  { name: 'Bodoni Moda + DM Sans', display: "'Bodoni Moda', serif", body: "'DM Sans', system-ui, sans-serif" },
  { name: 'Cormorant + Geist', display: "'Cormorant Garamond', serif", body: "'Geist', system-ui, sans-serif" },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "paletteIdx": 0,
  "typeIdx": 2,
  "heroVariant": "fullbleed",
  "servicesVariant": "list",
  "lang": "tr",
  "heroVideo": "assets/hero.mp4"
}/*EDITMODE-END*/;

const LS_TWEAKS_KEY = 'ffd-tweaks';

// Merge EDITMODE defaults with any saved user overrides from localStorage,
// so the user's last picks survive page reloads regardless of host behavior.
function loadInitialTweaks() {
  try {
    const raw = localStorage.getItem(LS_TWEAKS_KEY);
    if (!raw) return TWEAK_DEFAULTS;
    const saved = JSON.parse(raw);
    return { ...TWEAK_DEFAULTS, ...saved };
  } catch (_) {
    return TWEAK_DEFAULTS;
  }
}

function applyTheme(t) {
  const p = PALETTES[t.paletteIdx] || PALETTES[0];
  const f = TYPE_PAIRS[t.typeIdx] || TYPE_PAIRS[0];
  const root = document.documentElement.style;
  root.setProperty('--bg', p.bg);
  root.setProperty('--bg-elev', p.bgElev);
  root.setProperty('--ink', p.ink);
  root.setProperty('--accent', p.accent);
  // derive
  const hex = p.ink.replace('#','');
  const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16);
  root.setProperty('--ink-2', `rgba(${r},${g},${b},0.78)`);
  root.setProperty('--ink-3', `rgba(${r},${g},${b},0.55)`);
  root.setProperty('--ink-4', `rgba(${r},${g},${b},0.32)`);
  root.setProperty('--line',  `rgba(${r},${g},${b},0.12)`);
  root.setProperty('--line-2',`rgba(${r},${g},${b},0.18)`);
  root.setProperty('--f-display', f.display);
  root.setProperty('--f-body', f.body);
  root.setProperty('--accent-ink', p.bgElev);
}

function App() {
  const [t, setTweakRaw] = useTweaks(loadInitialTweaks());

  // Wrap setTweak so each change is also persisted to localStorage. The host
  // protocol still updates the EDITMODE block on disk; localStorage just
  // guarantees the user's session survives reloads regardless.
  const setTweak = React.useCallback((keyOrEdits, val) => {
    setTweakRaw(keyOrEdits, val);
    try {
      const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
        ? keyOrEdits : { [keyOrEdits]: val };
      const prev = JSON.parse(localStorage.getItem(LS_TWEAKS_KEY) || '{}');
      localStorage.setItem(LS_TWEAKS_KEY, JSON.stringify({ ...prev, ...edits }));
    } catch (_) {}
  }, [setTweakRaw]);

  const [page, setPage] = React.useState('home');
  const [lang, setLang] = React.useState(() => {
    // Manual override (set when user clicks the toggle) wins
    const manual = localStorage.getItem('ffd-lang-manual');
    if (manual === 'tr' || manual === 'en') return manual;
    // Else stored tweak default
    return t.lang || 'tr';
  });

  // Auto-detect language by geo/browser on first load — only if user hasn't manually picked yet
  React.useEffect(() => {
    const manual = localStorage.getItem('ffd-lang-manual');
    if (manual) return; // respect manual override

    let cancelled = false;
    const browserLangIsTR = (navigator.language || '').toLowerCase().startsWith('tr');

    // Try IP-based country first; fall back to browser language
    fetch('https://ipapi.co/json/', { signal: AbortSignal.timeout ? AbortSignal.timeout(2500) : undefined })
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (cancelled) return;
        const country = (data && data.country_code) || '';
        const detected = country === 'TR' ? 'tr' : (browserLangIsTR ? 'tr' : 'en');
        setLang(detected);
      })
      .catch(() => {
        if (cancelled) return;
        setLang(browserLangIsTR ? 'tr' : 'en');
      });

    return () => { cancelled = true; };
  }, []);

  // Persist lang as a manual choice when user toggles
  const onSetLang = (l) => {
    setLang(l);
    setTweak('lang', l);
    try { localStorage.setItem('ffd-lang-manual', l); } catch(_) {}
  };

  React.useEffect(() => { applyTheme(t); }, [t.paletteIdx, t.typeIdx]);
  React.useEffect(() => { applyTheme(t); }, []); // initial

  const onNav = (p) => {
    setPage(p);
    window.scrollTo({top: 0, behavior: 'instant'});
  };

  const tr = I18N[lang];

  let Page = HomePage;
  if (page === 'services') Page = ServicesPage;
  else if (page === 'forbrands') Page = ForBrandsPage;
  else if (page === 'joor') Page = JoorPage;
  else if (page === 'about') Page = AboutPage;
  else if (page === 'contact') Page = ContactPage;

  return (
    <div data-screen-label={`page-${page}`}>
      <Nav page={page} onNav={onNav} lang={lang} setLang={onSetLang} t={tr} />
      <Page t={tr} onNav={onNav} tweaks={t} />
      <Footer t={tr} onNav={onNav} />

      <TweaksPanel>
        <TweakSection label="Identity" />
        <TweakSelect label="Color palette"
                     value={t.paletteIdx}
                     options={PALETTES.map((p, i) => ({ value: i, label: p.name }))}
                     onChange={(v) => setTweak('paletteIdx', Number(v))} />
        <TweakSelect label="Typography"
                     value={t.typeIdx}
                     options={TYPE_PAIRS.map((p, i) => ({ value: i, label: p.name }))}
                     onChange={(v) => setTweak('typeIdx', Number(v))} />

        <TweakSection label="Hero" />
        <TweakRadio  label="Layout"
                     value={t.heroVariant}
                     options={[
                       { value: 'fullbleed', label: 'Full-bleed' },
                       { value: 'split', label: 'Split' },
                       { value: 'stack', label: 'Stack' },
                     ]}
                     onChange={(v) => setTweak('heroVariant', v)} />
        <TweakText   label="Hero video URL"
                     value={t.heroVideo}
                     placeholder="https://… .mp4"
                     onChange={(v) => setTweak('heroVideo', v)} />

        <TweakSection label="Services" />
        <TweakRadio  label="Card layout"
                     value={t.servicesVariant}
                     options={[
                       { value: 'list', label: 'List' },
                       { value: 'grid', label: 'Grid' },
                       { value: 'editorial', label: 'Editor.' },
                     ]}
                     onChange={(v) => setTweak('servicesVariant', v)} />

        <TweakSection label="Language" />
        <TweakRadio  label="Site language"
                     value={lang}
                     options={[
                       { value: 'tr', label: 'Türkçe' },
                       { value: 'en', label: 'English' },
                     ]}
                     onChange={onSetLang} />
      </TweaksPanel>
    </div>
  );
}

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