// Tweaks panel for font/weight customisation
// Pull shared bits off window (each Babel script runs in its own scope)
const { useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakSlider, TweakButton } = window;

const DISPLAY_FONTS = [
  { value: "Inter Tight",         label: "Inter Tight",         note: "Modern corporate · tight grotesque" },
  { value: "Spectral",            label: "Spectral",            note: "Editorial serif · FT-style gravitas" },
  { value: "IBM Plex Serif",      label: "IBM Plex Serif",      note: "Corporate serif · distinctive" },
  { value: "DM Serif Display",    label: "DM Serif Display",    note: "Magazine serif · high contrast" }
];

const BODY_FONTS = [
  { value: "Inter Tight",         label: "Inter Tight",         note: "Tight corporate workhorse · default" },
  { value: "IBM Plex Sans",       label: "IBM Plex Sans",       note: "IBM corporate · slightly distinctive" },
  { value: "Source Sans 3",       label: "Source Sans 3",       note: "Adobe corporate · neutral" },
  { value: "Hanken Grotesk",      label: "Hanken Grotesk",      note: "Söhne-like neutral · understated" }
];

const FONT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "displayFont": "Inter Tight",
  "bodyFont": "Inter Tight",
  "displayWeight": 600,
  "displayTracking": -3.5,
  "labelWeight": 500,
  "labelTracking": 14
}/*EDITMODE-END*/;

const FontTweaks = () => {
  const [t, setTweak] = useTweaks(FONT_TWEAK_DEFAULTS);

  // Apply font choices live via CSS variables
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--f-display", `'${t.displayFont}', ui-sans-serif, sans-serif`);
    root.style.setProperty("--f-body", `'${t.bodyFont}', ui-sans-serif, sans-serif`);
    root.style.setProperty("--f-mono", `'${t.bodyFont}', ui-sans-serif, sans-serif`);
  }, [t.displayFont, t.bodyFont]);

  // Inject style overrides for weight / tracking — these target attributes
  // we can't reach via CSS variables alone (inline font-weight on many elements).
  const overrideCss = React.useMemo(() => `
    .display, h1.display, h2.display, h3.display, h4.display {
      font-weight: ${t.displayWeight} !important;
      letter-spacing: ${(t.displayTracking / 100).toFixed(3)}em !important;
    }
    .mono {
      font-weight: ${t.labelWeight} !important;
      letter-spacing: ${(t.labelTracking / 100).toFixed(3)}em !important;
    }
  `, [t.displayWeight, t.displayTracking, t.labelWeight, t.labelTracking]);

  return (
    <React.Fragment>
      <style dangerouslySetInnerHTML={{ __html: overrideCss }} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Display font" />
        <TweakSelect
          label="Family"
          value={t.displayFont}
          options={DISPLAY_FONTS.map(f => f.value)}
          onChange={(v) => setTweak("displayFont", v)}
        />
        <FontPreview family={t.displayFont} weight={t.displayWeight} size={24}
          text="Built to displace diesel." note={DISPLAY_FONTS.find(f => f.value === t.displayFont)?.note} />
        <TweakSlider
          label="Weight"
          value={t.displayWeight}
          min={300} max={800} step={100}
          onChange={(v) => setTweak("displayWeight", v)}
        />
        <TweakSlider
          label="Tracking"
          value={t.displayTracking}
          min={-5} max={2} step={0.5}
          unit="·10⁻²em"
          onChange={(v) => setTweak("displayTracking", v)}
        />

        <TweakSection label="Body font" />
        <TweakSelect
          label="Family"
          value={t.bodyFont}
          options={BODY_FONTS.map(f => f.value)}
          onChange={(v) => setTweak("bodyFont", v)}
        />
        <FontPreview family={t.bodyFont} weight={400} size={13.5}
          text="Containerised solar and storage systems for sites that cannot afford downtime."
          note={BODY_FONTS.find(f => f.value === t.bodyFont)?.note} />

        <TweakSection label="Labels (uppercase)" />
        <TweakSlider
          label="Weight"
          value={t.labelWeight}
          min={400} max={700} step={100}
          onChange={(v) => setTweak("labelWeight", v)}
        />
        <TweakSlider
          label="Tracking"
          value={t.labelTracking}
          min={4} max={24} step={1}
          unit="·10⁻²em"
          onChange={(v) => setTweak("labelTracking", v)}
        />
        <div style={{
          fontFamily: `'${t.bodyFont}', sans-serif`,
          fontWeight: t.labelWeight,
          fontSize: 10.5,
          textTransform: "uppercase",
          letterSpacing: `${(t.labelTracking / 100).toFixed(3)}em`,
          color: "var(--ems-green-deep)",
          padding: "6px 0 2px"
        }}>
          § 03 · Engineering specification
        </div>

        <TweakSection label="Quick presets" />
        <div style={{ display: "grid", gap: 6 }}>
          <TweakButton label="Modern corporate sans (default)" onClick={() => {
            setTweak({ displayFont: "Inter Tight", bodyFont: "Inter Tight", displayWeight: 600, displayTracking: -3.5 });
          }} />
          <TweakButton label="Editorial corporate (FT-style)" onClick={() => {
            setTweak({ displayFont: "Spectral", bodyFont: "Inter Tight", displayWeight: 600, displayTracking: -2 });
          }} />
          <TweakButton label="IBM Plex system" onClick={() => {
            setTweak({ displayFont: "IBM Plex Serif", bodyFont: "IBM Plex Sans", displayWeight: 500, displayTracking: -2 });
          }} />
          <TweakButton label="Magazine luxury" onClick={() => {
            setTweak({ displayFont: "DM Serif Display", bodyFont: "Source Sans 3", displayWeight: 400, displayTracking: -2.5 });
          }} />
        </div>
      </TweaksPanel>
    </React.Fragment>
  );
};

const FontPreview = ({ family, weight, size, text, note }) => (
  <div style={{
    background: "rgba(0,0,0,0.04)",
    border: "1px solid rgba(0,0,0,0.06)",
    borderRadius: 8,
    padding: "10px 12px",
    marginTop: 2
  }}>
    <div style={{
      fontFamily: `'${family}', sans-serif`,
      fontWeight: weight,
      fontSize: size,
      lineHeight: 1.1,
      letterSpacing: "-0.02em",
      color: "var(--ems-ink)"
    }}>
      {text}
    </div>
    {note && (
      <div style={{
        marginTop: 6,
        fontSize: 10,
        color: "rgba(41,38,27,0.55)",
        fontFamily: "ui-sans-serif, system-ui, sans-serif"
      }}>
        {note}
      </div>
    )}
  </div>
);

window.FontTweaks = FontTweaks;