// Tweaks panel

const TweakDefaults = /*EDITMODE-BEGIN*/{
  "sidebarVariant": "classic",
  "accentColor": "#E85D3A"
}/*EDITMODE-END*/;

const TweaksPanel = ({ open, onClose, state, setState }) => {
  if (!open) return null;
  return (
    <div style={{
      position: "fixed", bottom: 20, right: 20, width: 300, zIndex: 80,
      background: "var(--surface)", borderRadius: 14, border: "1px solid var(--border)",
      boxShadow: "var(--shadow-lg)", overflow: "hidden",
      animation: "modalIn .22s ease-out",
    }}>
      <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <Icon name="sparkle" size={15} style={{ color: "var(--accent)" }}/>
          <div style={{ fontSize: 13.5, fontWeight: 600 }}>Tweaks</div>
        </div>
        <button onClick={onClose} style={{ color: "var(--ink-3)", padding: 2 }}><Icon name="x" size={16}/></button>
      </div>
      <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 14 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)", marginBottom: 8 }}>側邊欄樣式</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
            {[
              { v: "classic", label: "分組列表", desc: "含分類標題" },
              { v: "compact", label: "圖標導軌", desc: "深色極簡" },
            ].map(o => (
              <button key={o.v} onClick={() => setState({ sidebarVariant: o.v })} style={{
                padding: 10, borderRadius: 8, textAlign: "center",
                border: "1.5px solid " + (state.sidebarVariant === o.v ? "var(--ink)" : "var(--border)"),
                background: state.sidebarVariant === o.v ? "var(--surface-2)" : "var(--surface)",
              }}>
                <SidebarPreview variant={o.v}/>
                <div style={{ fontSize: 12, fontWeight: 500, marginTop: 6 }}>{o.label}</div>
                <div style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{o.desc}</div>
              </button>
            ))}
          </div>
        </div>

        <div>
          <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-2)", marginBottom: 8 }}>強調色</div>
          <div style={{ display: "flex", gap: 8 }}>
            {[
              { c: "#E85D3A", name: "繪師橘" },
              { c: "#3A6CC6", name: "墨水藍" },
              { c: "#2F8F5A", name: "苔蘚綠" },
              { c: "#8C5AC8", name: "紫羅蘭" },
              { c: "#1A1814", name: "純墨" },
            ].map(o => (
              <button key={o.c} onClick={() => setState({ accentColor: o.c })} title={o.name} style={{
                width: 30, height: 30, borderRadius: 999, background: o.c, padding: 0,
                border: "2px solid " + (state.accentColor === o.c ? "var(--ink)" : "transparent"),
                boxShadow: "inset 0 0 0 2px var(--surface)",
              }}/>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const SidebarPreview = ({ variant }) => {
  if (variant === "classic") return (
    <svg viewBox="0 0 80 50" style={{ width: "100%", height: "auto", display: "block" }}>
      <rect width="80" height="50" rx="4" fill="#fff" stroke="#EAE7E0"/>
      <rect x="0" y="0" width="24" height="50" fill="#FAFAF7"/>
      <rect x="4" y="6" width="16" height="2" fill="#1A1814" rx="1"/>
      <rect x="4" y="12" width="12" height="2" fill="#B8B2A8" rx="1"/>
      <rect x="4" y="16" width="14" height="2" fill="#B8B2A8" rx="1"/>
      <rect x="4" y="22" width="16" height="2" fill="#E85D3A" rx="1"/>
      <rect x="4" y="26" width="12" height="2" fill="#B8B2A8" rx="1"/>
      <rect x="30" y="6" width="46" height="6" rx="1" fill="#F4F2EC"/>
      <rect x="30" y="16" width="46" height="28" rx="2" fill="#F4F2EC"/>
    </svg>
  );
  return (
    <svg viewBox="0 0 80 50" style={{ width: "100%", height: "auto", display: "block" }}>
      <rect width="80" height="50" rx="4" fill="#fff" stroke="#EAE7E0"/>
      <rect x="0" y="0" width="14" height="50" fill="#1A1814"/>
      <circle cx="7" cy="8" r="2.5" fill="#E85D3A"/>
      <circle cx="7" cy="16" r="2" fill="#fff" opacity="0.4"/>
      <circle cx="7" cy="22" r="2" fill="#fff" opacity="0.4"/>
      <circle cx="7" cy="28" r="2" fill="#fff" opacity="0.4"/>
      <rect x="20" y="6" width="56" height="6" rx="1" fill="#F4F2EC"/>
      <rect x="20" y="16" width="56" height="28" rx="2" fill="#F4F2EC"/>
    </svg>
  );
};

window.TweaksPanel = TweaksPanel;
window.TweakDefaults = TweakDefaults;