// Tweaks panel — accent color, radius, density, watermark

function TweaksPanel({ tweaks, setTweaks, onClose }) {
  const accents = [
    { v: "#00A99D", label: "CleverConnect" },
    { v: "#0E7C86", label: "Deep teal" },
    { v: "#2F6DF6", label: "Azure" },
    { v: "#1D1D1B", label: "Ink" },
    { v: "#6B4FEA", label: "Violet" },
  ];
  return (
    <div className="tweaks">
      <button className="tweaks-close" onClick={onClose} aria-label="Close">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
      </button>
      <h4>Tweaks</h4>

      <div className="row">
        <div className="rlabel">Accent</div>
        <div className="swatches">
          {accents.map(a => (
            <div key={a.v}
              className={`sw ${tweaks.accent === a.v ? "active" : ""}`}
              style={{ background: a.v }}
              title={a.label}
              onClick={() => setTweaks({ ...tweaks, accent: a.v })} />
          ))}
        </div>
      </div>

      <div className="row">
        <div className="rlabel">Corner radius · {tweaks.cornerRadius}px</div>
        <input type="range" min="4" max="24" step="1"
          value={tweaks.cornerRadius}
          onChange={(e) => setTweaks({ ...tweaks, cornerRadius: Number(e.target.value) })} />
      </div>

      <div className="row">
        <div className="rlabel">Density</div>
        <div className="seg" style={{ alignSelf: "flex-start" }}>
          {["compact", "comfortable", "spacious"].map(d => (
            <button key={d}
              aria-pressed={tweaks.density === d}
              onClick={() => setTweaks({ ...tweaks, density: d })}>{d}</button>
          ))}
        </div>
      </div>

      <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--ink-3)" }}>
        <input type="checkbox" checked={tweaks.showWatermark}
          onChange={(e) => setTweaks({ ...tweaks, showWatermark: e.target.checked })} />
        Show "Internal tool" watermark
      </label>
    </div>
  );
}

// Apply tweaks to CSS variables
function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty("--accent", t.accent);
  // derive hover / darker variants from accent
  const { h, s, l } = hexToHsl(t.accent);
  r.style.setProperty("--accent-600", hslToHex(h, s, Math.max(l - 7, 10)));
  r.style.setProperty("--accent-700", hslToHex(h, s, Math.max(l - 16, 6)));
  r.style.setProperty("--accent-50",  hslToHex(h, Math.min(s, 40), 96));
  r.style.setProperty("--accent-tint", `hsl(${h} ${s}% ${l}% / 0.08)`);
  r.style.setProperty("--accent-tint-strong", `hsl(${h} ${s}% ${l}% / 0.18)`);
  r.style.setProperty("--radius", `${t.cornerRadius}px`);
  r.style.setProperty("--radius-sm", `${Math.max(6, t.cornerRadius - 4)}px`);
  r.style.setProperty("--radius-lg", `${t.cornerRadius + 6}px`);
  const pad = t.density === "compact" ? "32" : t.density === "spacious" ? "80" : "56";
  r.style.setProperty("--pad-x", `${pad}px`);
}

function hexToHsl(hex) {
  const m = hex.replace("#","");
  const r = parseInt(m.slice(0,2),16)/255, g = parseInt(m.slice(2,4),16)/255, b = parseInt(m.slice(4,6),16)/255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h=0, s=0, l=(max+min)/2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h *= 60;
  }
  return { h: Math.round(h), s: Math.round(s*100), l: Math.round(l*100) };
}
function hslToHex(h, s, l) {
  s/=100; l/=100;
  const k = n => (n + h/30) % 12;
  const a = s * Math.min(l, 1-l);
  const f = n => {
    const c = l - a * Math.max(-1, Math.min(k(n)-3, Math.min(9-k(n), 1)));
    return Math.round(255*c).toString(16).padStart(2,"0");
  };
  return `#${f(0)}${f(8)}${f(4)}`;
}

Object.assign(window, { TweaksPanel, applyTweaks });