// Config Page — visual design settings for site owners

const CONFIG_ACCENT_PRESETS = [
  { label: 'Gold',      hex: '#C8A86B' },
  { label: 'Amber',     hex: '#D4A020' },
  { label: 'Brass',     hex: '#B8942A' },
  { label: 'Rose Gold', hex: '#C0826A' },
  { label: 'Sage',      hex: '#7A9B76' },
  { label: 'Sky',       hex: '#5B8CB7' },
  { label: 'Plum',      hex: '#8B5E8C' },
  { label: 'Silver',    hex: '#9B9EA6' },
  { label: 'Crimson',   hex: '#B04A5A' },
  { label: 'Teal',      hex: '#4A9B8C' },
];

const CONFIG_THEMES = [
  { value: 'midnight',  label: 'Midnight',  sub: 'Deepest black',    base: '#0A0A0B', elev: '#141416', fg: '#FAF8F4' },
  { value: 'obsidian',  label: 'Obsidian',  sub: 'Warm near-black',  base: '#13130F', elev: '#1C1B16', fg: '#F5EFE1' },
  { value: 'graphite',  label: 'Graphite',  sub: 'Soft dark grey',   base: '#1A1A1D', elev: '#23232A', fg: '#F5F2EB' },
  { value: 'pewter',    label: 'Pewter',    sub: 'Lifted dark',      base: '#262428', elev: '#312E33', fg: '#F7F2E8' },
  { value: 'champagne', label: 'Champagne', sub: 'Warm bronze',      base: '#1F1A14', elev: '#2A241B', fg: '#F5E4C1' },
  { value: 'porcelain', label: 'Porcelain', sub: 'Light cream',      base: '#F4EFE4', elev: '#EAE3D2', fg: '#1C1812' },
];

const CONFIG_DISPLAY_FONTS = [
  { value: 'Italiana',           sample: 'Building Ludhiana.' },
  { value: 'Bodoni Moda',        sample: 'Building Ludhiana.' },
  { value: 'Playfair Display',   sample: 'Building Ludhiana.' },
  { value: 'Cormorant Garamond', sample: 'Building Ludhiana.' },
  { value: 'Cinzel',             sample: 'BUILDING LUDHIANA' },
  { value: 'Marcellus',          sample: 'Building Ludhiana.' },
  { value: 'Libre Caslon Text',  sample: 'Building Ludhiana.' },
  { value: 'Instrument Serif',   sample: 'Building Ludhiana.' },
];

const CONFIG_BODY_FONTS = [
  { value: 'Jost',       sample: 'Premium real estate for investors and families in Punjab.' },
  { value: 'Outfit',     sample: 'Premium real estate for investors and families in Punjab.' },
  { value: 'Manrope',    sample: 'Premium real estate for investors and families in Punjab.' },
  { value: 'Tenor Sans', sample: 'Premium real estate for investors and families in Punjab.' },
  { value: 'Cormorant',  sample: 'Premium real estate for investors and families in Punjab.' },
  { value: 'Geist',      sample: 'Premium real estate for investors and families in Punjab.' },
];

function CfgSection({ title, icon, children }) {
  const Ic = (Icon && Icon[icon]) || null;
  return (
    <div className="glass-light rounded-3xl p-6 sm:p-8">
      <div className="flex items-center gap-3 mb-6">
        {Ic && (
          <div className="h-8 w-8 rounded-xl bg-accent/10 grid place-items-center text-accent flex-shrink-0">
            <Ic size={15}/>
          </div>
        )}
        <h2 className="font-display text-[20px] leading-tight">{title}</h2>
      </div>
      {children}
    </div>
  );
}

function ConfigPage({ t, setTweak, onReset }) {
  const [copied, setCopied] = React.useState(false);

  const copyConfig = () => {
    try {
      const text = JSON.stringify(t, null, 2);
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).catch(() => {});
      }
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch(e) {}
  };

  const trackingLabel = t.displayTracking > 0
    ? `+${t.displayTracking}`
    : `${t.displayTracking}`;

  return (
    <main className="page-enter pt-32 pb-24">
      <div className="mx-auto max-w-[1320px] px-5 sm:px-8">

        {/* ── Header ── */}
        <div className="mb-14">
          <div className="text-[11px] uppercase tracking-[0.22em] text-accent mb-4">
            Site Settings · Changes save automatically
          </div>
          <h1 className="font-display text-[28px] sm:text-[56px] lg:text-[90px] leading-[0.96] tracking-tightest">
            Design <span className="italic text-accent-soft">Configuration.</span>
          </h1>
          <p className="mt-4 text-bone-50/60 text-[15px] leading-relaxed max-w-xl">
            All changes apply instantly across the site and are saved to your browser. Reload the page — they persist.
          </p>
        </div>

        <div className="grid lg:grid-cols-12 gap-8">

          {/* ── Left column ── */}
          <div className="lg:col-span-7 space-y-8">

            {/* Background Theme */}
            <CfgSection title="Background Theme" icon="Layers">
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                {CONFIG_THEMES.map(th => (
                  <button
                    key={th.value}
                    onClick={() => setTweak('theme', th.value)}
                    className="relative rounded-2xl p-4 text-left transition"
                    style={{
                      background: th.base,
                      border: `1.5px solid ${t.theme === th.value ? 'var(--accent)' : 'rgba(255,255,255,0.08)'}`,
                      boxShadow: t.theme === th.value ? '0 0 0 1px var(--accent)' : 'none',
                    }}
                  >
                    {t.theme === th.value && (
                      <div className="absolute top-2.5 right-2.5 h-5 w-5 rounded-full bg-accent grid place-items-center">
                        <Icon.Check size={11} color="#000"/>
                      </div>
                    )}
                    <div className="h-5 w-5 rounded-full mb-3" style={{ background: th.fg, opacity: 0.75 }}/>
                    <div className="text-[13px] font-medium leading-tight" style={{ color: th.fg }}>{th.label}</div>
                    <div className="text-[11px] mt-0.5" style={{ color: th.fg, opacity: 0.45 }}>{th.sub}</div>
                  </button>
                ))}
              </div>
            </CfgSection>

            {/* Accent Color */}
            <CfgSection title="Accent Color" icon="Palette">
              {/* Presets */}
              <div className="flex flex-wrap gap-2.5 mb-5">
                {CONFIG_ACCENT_PRESETS.map(p => (
                  <button
                    key={p.hex}
                    onClick={() => setTweak('accent', p.hex)}
                    title={p.label}
                    className="h-9 w-9 rounded-xl transition"
                    style={{
                      background: p.hex,
                      border: t.accent.toLowerCase() === p.hex.toLowerCase()
                        ? '2.5px solid #fff'
                        : '2px solid transparent',
                      transform: t.accent.toLowerCase() === p.hex.toLowerCase() ? 'scale(1.15)' : 'scale(1)',
                      boxShadow: t.accent.toLowerCase() === p.hex.toLowerCase() ? `0 0 0 2px ${p.hex}` : 'none',
                    }}
                  />
                ))}
              </div>
              {/* Custom picker */}
              <div className="flex items-center gap-4">
                <label className="flex items-center gap-3 flex-1 cursor-pointer">
                  <span className="text-[12px] uppercase tracking-[0.18em] text-bone-50/45 shrink-0">Custom</span>
                  <input
                    type="color"
                    value={t.accent}
                    onChange={e => setTweak('accent', e.target.value)}
                    className="h-10 w-20 rounded-lg cursor-pointer bg-transparent p-0.5"
                    style={{ border: '1px solid rgba(255,255,255,0.15)' }}
                  />
                </label>
                <div
                  className="h-10 px-4 rounded-xl flex items-center text-[13px] font-mono font-medium"
                  style={{ background: t.accent, color: '#000' }}
                >
                  {t.accent.toUpperCase()}
                </div>
              </div>
            </CfgSection>

            {/* Display Font */}
            <CfgSection title="Display / Heading Font" icon="Type">
              <div className="grid grid-cols-2 gap-3">
                {CONFIG_DISPLAY_FONTS.map(f => (
                  <button
                    key={f.value}
                    onClick={() => setTweak('displayFont', f.value)}
                    className="rounded-2xl p-4 text-left transition"
                    style={{
                      border: `1.5px solid ${t.displayFont === f.value ? 'var(--accent)' : 'rgba(250,248,244,0.10)'}`,
                      background: t.displayFont === f.value ? 'rgba(var(--accent-rgb,200,168,107),0.07)' : 'transparent',
                    }}
                  >
                    <div className="text-[10px] uppercase tracking-[0.18em] text-bone-50/35 mb-2">{f.value}</div>
                    <div
                      className="text-[26px] leading-tight text-bone-50"
                      style={{ fontFamily: `'${f.value}', serif`, fontWeight: t.displayWeight }}
                    >
                      {f.sample}
                    </div>
                  </button>
                ))}
              </div>
            </CfgSection>

            {/* Body Font */}
            <CfgSection title="Body / UI Font" icon="AlignLeft">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {CONFIG_BODY_FONTS.map(f => (
                  <button
                    key={f.value}
                    onClick={() => setTweak('bodyFont', f.value)}
                    className="rounded-2xl p-4 text-left transition"
                    style={{
                      border: `1.5px solid ${t.bodyFont === f.value ? 'var(--accent)' : 'rgba(250,248,244,0.10)'}`,
                      background: t.bodyFont === f.value ? 'rgba(var(--accent-rgb,200,168,107),0.07)' : 'transparent',
                    }}
                  >
                    <div className="text-[10px] uppercase tracking-[0.18em] text-bone-50/35 mb-2">{f.value}</div>
                    <div
                      className="text-[13px] leading-snug text-bone-50/70"
                      style={{ fontFamily: `'${f.value}', system-ui, sans-serif` }}
                    >
                      {f.sample}
                    </div>
                  </button>
                ))}
              </div>
            </CfgSection>

          </div>

          {/* ── Right column ── */}
          <div className="lg:col-span-5 space-y-6">

            {/* Typography fine-tuning */}
            <CfgSection title="Typography" icon="Sliders">
              <div className="space-y-7">

                {/* Letter spacing */}
                <div>
                  <div className="flex justify-between items-center mb-3">
                    <span className="text-[12px] uppercase tracking-[0.18em] text-bone-50/50">Letter Spacing</span>
                    <span className="text-[13px] font-mono text-accent">{trackingLabel}</span>
                  </div>
                  <input
                    type="range"
                    min={-6} max={4} step={0.5}
                    value={t.displayTracking}
                    onChange={e => setTweak('displayTracking', Number(e.target.value))}
                    className="w-full"
                    style={{ accentColor: t.accent }}
                  />
                  <div className="flex justify-between text-[10px] text-bone-50/30 mt-1.5">
                    <span>Tight</span><span>Normal</span><span>Wide</span>
                  </div>
                </div>

                {/* Font weight */}
                <div>
                  <div className="flex justify-between items-center mb-3">
                    <span className="text-[12px] uppercase tracking-[0.18em] text-bone-50/50">Heading Weight</span>
                    <span className="text-[13px] font-mono text-accent">{t.displayWeight}</span>
                  </div>
                  <div className="grid grid-cols-5 gap-2">
                    {[300, 400, 500, 600, 700].map(w => (
                      <button
                        key={w}
                        onClick={() => setTweak('displayWeight', w)}
                        className="py-2.5 rounded-xl text-[12px] transition"
                        style={{
                          fontWeight: w,
                          border: `1.5px solid ${t.displayWeight === w ? 'var(--accent)' : 'rgba(250,248,244,0.10)'}`,
                          color: t.displayWeight === w ? 'var(--accent)' : 'rgba(250,248,244,0.55)',
                          background: t.displayWeight === w ? 'rgba(var(--accent-rgb,200,168,107),0.07)' : 'transparent',
                        }}
                      >
                        {w}
                      </button>
                    ))}
                  </div>
                </div>

              </div>
            </CfgSection>

            {/* Live Preview */}
            <div className="glass rounded-3xl p-6 border border-accent/20">
              <div className="text-[10px] uppercase tracking-[0.22em] text-accent mb-4">Live Preview</div>
              <div
                className="font-display text-[38px] leading-[0.96] text-bone-50"
                style={{
                  letterSpacing: `${t.displayTracking / 100}em`,
                  fontWeight: t.displayWeight,
                }}
              >
                Building <span className="italic" style={{ color: t.accent }}>Ludhiana.</span>
              </div>
              <p
                className="mt-3 text-bone-50/60 text-[13px] leading-relaxed"
                style={{ fontFamily: `'${t.bodyFont}', system-ui, sans-serif` }}
              >
                Premium real estate across commercial and residential formats — designed for the long view.
              </p>
              <div className="mt-4 pt-4 border-t border-bone-50/10 flex items-center gap-3">
                <div
                  className="h-8 px-4 rounded-full text-[12px] font-medium flex items-center"
                  style={{
                    background: t.accent,
                    color: '#000',
                    fontFamily: `'${t.bodyFont}', system-ui, sans-serif`,
                  }}
                >
                  Explore Projects
                </div>
                <div
                  className="h-8 px-4 rounded-full text-[12px] flex items-center text-bone-50/65"
                  style={{
                    border: '1px solid rgba(250,248,244,0.18)',
                    fontFamily: `'${t.bodyFont}', system-ui, sans-serif`,
                  }}
                >
                  Learn More
                </div>
              </div>
            </div>

            {/* Current config readout */}
            <div className="glass-light rounded-3xl p-6">
              <div className="flex items-center justify-between mb-4">
                <div className="text-[10px] uppercase tracking-[0.22em] text-bone-50/45">Current Config</div>
                <button
                  onClick={copyConfig}
                  className="text-[11px] uppercase tracking-[0.18em] flex items-center gap-1.5 transition"
                  style={{ color: copied ? t.accent : 'rgba(250,248,244,0.50)' }}
                >
                  <Icon.Copy size={12}/> {copied ? 'Copied!' : 'Copy JSON'}
                </button>
              </div>
              <div className="space-y-2.5">
                {[
                  ['Theme',        t.theme],
                  ['Accent',       t.accent.toUpperCase()],
                  ['Display Font', t.displayFont],
                  ['Body Font',    t.bodyFont],
                  ['Tracking',     trackingLabel],
                  ['Weight',       String(t.displayWeight)],
                ].map(([k, v]) => (
                  <div key={k} className="flex justify-between items-center">
                    <span className="text-[12px] text-bone-50/38">{k}</span>
                    <span className="text-[12px] font-mono text-bone-50/75">{v}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Actions */}
            <div className="flex gap-3">
              <button
                onClick={onReset}
                className="flex-1 h-12 rounded-2xl text-[13px] transition flex items-center justify-center gap-2 text-bone-50/55 hover:text-bone-50"
                style={{ border: '1px solid rgba(250,248,244,0.13)' }}
                onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(250,248,244,0.28)'}
                onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(250,248,244,0.13)'}
              >
                <Icon.RotateCcw size={14}/> Reset to Default
              </button>
              <button
                onClick={copyConfig}
                className="flex-1 h-12 rounded-2xl text-[13px] font-medium text-ink-950 transition flex items-center justify-center gap-2 hover:opacity-90"
                style={{ background: t.accent }}
              >
                <Icon.Download size={14}/> {copied ? 'Copied!' : 'Export Config'}
              </button>
            </div>

          </div>
        </div>
      </div>
    </main>
  );
}

window.ConfigPage = ConfigPage;