// Tweaks panel — live-edit the landing

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#22d3ee",
  "heroVariant": "v1",
  "trustVariant": "a",
  "density": "normal",
  "darkness": "base",
  "sectionOrder": "default",
  "mockupMinimal": false
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  { k:'cyan',    color:'#22d3ee', label:'Cyan (기본)' },
  { k:'emerald', color:'#34d399', label:'Emerald' },
  { k:'violet',  color:'#a78bfa', label:'Violet' },
  { k:'amber',   color:'#fbbf24', label:'Amber' },
  { k:'rose',    color:'#fb7185', label:'Rose' },
  { k:'sky',     color:'#60a5fa', label:'Sky' },
];

function TweaksPanel({ state, setState, visible, onClose }) {
  const update = (k, v) => {
    setState(s => ({...s, [k]: v}));
    try { window.parent.postMessage({type:'__edit_mode_set_keys', edits:{[k]:v}}, '*'); } catch(e) {}
  };
  if (!visible) return null;
  return (
    <div className="fixed bottom-4 right-4 z-[100] w-[320px] max-h-[80vh] overflow-y-auto bg-[#0d1117]/95 backdrop-blur-md border border-white/15 rounded-xl shadow-2xl text-white" style={{fontFamily:'Pretendard, sans-serif'}}>
      <div className="px-4 py-3 flex items-center justify-between border-b border-white/10 bg-black/40 sticky top-0">
        <div className="flex items-center gap-2">
          <I.Sliders size={14}/>
          <span className="text-sm font-semibold">Tweaks</span>
        </div>
        <button onClick={onClose} className="text-neutral-400 hover:text-white"><I.X size={16}/></button>
      </div>
      <div className="p-4 space-y-5 text-[12px]">

        <div>
          <div className="text-[10px] uppercase tracking-wider text-neutral-500 mb-2">Accent color</div>
          <div className="grid grid-cols-6 gap-1.5">
            {ACCENT_PRESETS.map(p => (
              <button key={p.k} title={p.label} onClick={()=>update('accent', p.color)}
                className="aspect-square rounded-md border-2 transition"
                style={{background: p.color, borderColor: state.accent===p.color?'#fff':'transparent'}}/>
            ))}
          </div>
          <div className="mt-2 flex items-center gap-2">
            <input type="color" value={state.accent} onChange={e=>update('accent', e.target.value)} className="w-8 h-8 rounded border border-white/10 bg-transparent"/>
            <code className="text-[11px] text-neutral-400">{state.accent}</code>
          </div>
        </div>

        <div>
          <div className="text-[10px] uppercase tracking-wider text-neutral-500 mb-2">Hero 카피</div>
          <div className="space-y-1">
            {heroCopyVariants.map(v => (
              <button key={v.k} onClick={()=>update('heroVariant', v.k)}
                className={`w-full text-left px-3 py-2 rounded border transition ${state.heroVariant===v.k?'border-white/30 bg-white/[0.04]':'border-white/10 hover:border-white/20'}`}>
                <div className="text-[11px] text-neutral-400">{v.label}</div>
              </button>
            ))}
          </div>
        </div>

        <div>
          <div className="text-[10px] uppercase tracking-wider text-neutral-500 mb-2">TrustBar 문구</div>
          <div className="space-y-1">
            {[
              {k:'a', l:'860% + 290명 (원안)'},
              {k:'b', l:'펀딩 성공 + 현직 작가'},
              {k:'c', l:'플랫폼 리스트'},
            ].map(o => (
              <button key={o.k} onClick={()=>update('trustVariant', o.k)}
                className={`w-full text-left px-3 py-2 rounded border transition ${state.trustVariant===o.k?'border-white/30 bg-white/[0.04]':'border-white/10 hover:border-white/20'}`}>
                <div className="text-[11px] text-neutral-300">{o.l}</div>
              </button>
            ))}
          </div>
        </div>

        <div>
          <div className="text-[10px] uppercase tracking-wider text-neutral-500 mb-2">목업 밀도</div>
          <div className="grid grid-cols-2 gap-1.5">
            {[{k:'normal',l:'여백 넓게'},{k:'tight',l:'더 조밀하게'}].map(o => (
              <button key={o.k} onClick={()=>update('density', o.k)}
                className={`px-3 py-2 rounded border transition ${state.density===o.k?'border-white/30 bg-white/[0.04]':'border-white/10 hover:border-white/20'}`}>
                {o.l}
              </button>
            ))}
          </div>
        </div>

        <div>
          <div className="text-[10px] uppercase tracking-wider text-neutral-500 mb-2">Dark 강도</div>
          <div className="grid grid-cols-3 gap-1.5">
            {[
              {k:'base',   l:'Base',  c:'#0a0a0f'},
              {k:'deeper', l:'Deeper',c:'#050507'},
              {k:'softer', l:'Softer',c:'#111118'},
            ].map(o => (
              <button key={o.k} onClick={()=>update('darkness', o.k)}
                className={`px-2 py-2 rounded border transition ${state.darkness===o.k?'border-white/30':'border-white/10'}`}
                style={{background: o.c}}>
                <div className="text-[11px] text-white">{o.l}</div>
              </button>
            ))}
          </div>
        </div>

        <div>
          <div className="text-[10px] uppercase tracking-wider text-neutral-500 mb-2">Section 순서</div>
          <div className="space-y-1">
            {[
              {k:'default',     l:'Problem → Solution → Features'},
              {k:'solutionFirst', l:'Solution → Problem → Features'},
              {k:'featuresFirst', l:'Hero → Features → Problem'},
            ].map(o => (
              <button key={o.k} onClick={()=>update('sectionOrder', o.k)}
                className={`w-full text-left px-3 py-2 rounded border transition ${state.sectionOrder===o.k?'border-white/30 bg-white/[0.04]':'border-white/10 hover:border-white/20'}`}>
                <div className="text-[11px] text-neutral-300">{o.l}</div>
              </button>
            ))}
          </div>
        </div>

        <label className="flex items-center gap-2 cursor-pointer">
          <input type="checkbox" checked={state.mockupMinimal} onChange={e=>update('mockupMinimal', e.target.checked)} className="accent-cyan-400"/>
          <span className="text-[12px] text-neutral-300">목업 크롬 최소화 (프레임 제거)</span>
        </label>

        <button onClick={()=>{
          setState(TWEAK_DEFAULTS);
          try { window.parent.postMessage({type:'__edit_mode_set_keys', edits: TWEAK_DEFAULTS}, '*'); } catch(e) {}
        }} className="w-full mt-2 px-3 py-2 rounded bg-white/5 border border-white/10 text-[11px] text-neutral-300 hover:bg-white/10">
          기본값으로 초기화
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel, TWEAK_DEFAULTS, ACCENT_PRESETS });