const { useState: useS, useEffect: useE } = React;

function App() {
  const [state, setState] = useS(() => ({
    page: 'dashboard',
    selectedAccount: 'kr',
    selectedPost: null,
    postView: 'list',
    postFilter: 'all',
  }));
  const [tweaks, setTweaks] = useS(() => ({ ...(window.TWEAK_DEFAULTS || {}) }));
  const [editMode, setEditMode] = useS(false);
  const [dataVersion, setDataVersion] = useS(0);

  useE(() => {
    const hues = {
      lime: 'oklch(0.82 0.17 142)',
      cyan: 'oklch(0.82 0.13 200)',
      violet: 'oklch(0.80 0.14 295)',
      amber: 'oklch(0.84 0.15 75)',
      rose: 'oklch(0.78 0.16 20)',
    };
    document.documentElement.style.setProperty('--accent', hues[tweaks.accent] || hues.lime);
    document.documentElement.style.setProperty('--sidebar-w', (tweaks.sidebar || 260) + 'px');
    document.body.style.fontSize = (tweaks.density === 'compact' ? 12 : tweaks.density === 'comfortable' ? 14 : 13) + 'px';
  }, [tweaks]);

  useE(() => {
    function onMsg(e) {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditMode(false);
    }
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  useE(() => {
    function onDataReady() {
      setDataVersion((v) => v + 1);
      const firstAccount = window.SAJU?.ACCOUNTS?.[0]?.id;
      if (firstAccount) {
        setState((s) => ({ ...s, selectedAccount: s.selectedAccount === 'kr' ? firstAccount : s.selectedAccount }));
      }
    }
    window.addEventListener('saju:data-ready', onDataReady);
    return () => window.removeEventListener('saju:data-ready', onDataReady);
  }, []);

  const updateTweak = (k, v) => {
    setTweaks((t) => ({ ...t, [k]: v }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  const { page } = state;
  const acc = window.SAJU.ACCOUNTS.find((a) => a.id === state.selectedAccount);

  return (
    <div className="app">
      <Sidebar state={state} setState={setState} />
      <div className="main">
        <Topbar state={state} acc={acc} />
        <div className="content">
          {page === 'dashboard' && <DashboardPage state={state} setState={setState} />}
          {page === 'pipeline' && <PipelinePage state={state} setState={setState} acc={acc} />}
          {page === 'accounts' && <AccountsPage state={state} setState={setState} />}
          {page === 'shopping' && <ShoppingPage state={state} setState={setState} />}
        </div>
      </div>
      {state.selectedPost && <PostDetailDrawer postId={state.selectedPost} onClose={() => setState((s) => ({ ...s, selectedPost: null }))} />}
      <TweaksPanel open={editMode} tweaks={tweaks} update={updateTweak} />
    </div>
  );
}

function Topbar({ state, acc }) {
  const pageNames = { dashboard: '대시보드', pipeline: '파이프라인', accounts: '계정 관리', shopping: '쇼핑쇼츠' };
  const showAcc = false;
  return (
    <div className="topbar">
      <div className="topbar-path">
        <span className="crumb">Saju Oracle</span>
        <span className="sep"><Icon name="chevronRight" size={12} /></span>
        <span className={`crumb ${!showAcc ? 'current' : ''}`}>{pageNames[state.page]}</span>
        {showAcc && acc && <>
          <span className="sep"><Icon name="chevronRight" size={12} /></span>
          <span className="account-chip"><AccountAvatar acc={acc} size={18} />{acc.handle}</span>
        </>}
      </div>
      <div className="topbar-actions">
        <div className="search" style={{ minWidth: 240 }}>
          <Icon name="search" size={13} />
          <input placeholder="전체 검색..." />
          <span className="kbd">⌘K</span>
        </div>
        <button className="btn ghost icon" title="알림"><Icon name="bell" size={14} /></button>
      </div>
    </div>
  );
}

function TweaksPanel({ open, tweaks, update }) {
  const accents = [
    { key: 'lime', hex: '#a3e635' },
    { key: 'cyan', hex: '#22d3ee' },
    { key: 'violet', hex: '#c4b5fd' },
    { key: 'amber', hex: '#fbbf24' },
    { key: 'rose', hex: '#fb7185' },
  ];
  return (
    <div className={`tweaks ${open ? 'open' : ''}`}>
      <div className="tweaks-head">
        <span><Icon name="sliders" size={13} /> Tweaks</span>
        <span className="kbd">Tweaks 모드</span>
      </div>
      <div className="tweaks-body">
        <div className="tweaks-row">
          <span className="tweaks-label">사인 컬러</span>
          <div className="swatch-row">
            {accents.map((a) => (
              <div key={a.key} className={`swatch ${tweaks.accent === a.key ? 'active' : ''}`} style={{ background: a.hex }} onClick={() => update('accent', a.key)} />
            ))}
          </div>
        </div>
        <div className="tweaks-row">
          <span className="tweaks-label">정보 밀도</span>
          <div className="view-toggle">
            {['compact', 'normal', 'comfortable'].map((d) => (
              <button key={d} className={tweaks.density === d ? 'active' : ''} onClick={() => update('density', d)}>
                {d === 'compact' ? '타이트' : d === 'normal' ? '보통' : '여유'}
              </button>
            ))}
          </div>
        </div>
        <div className="tweaks-row">
          <span className="tweaks-label">사이드바 폭</span>
          <input type="range" min="220" max="320" step="10" value={tweaks.sidebar || 260} onChange={(e) => update('sidebar', parseInt(e.target.value, 10))} />
        </div>
        <div className="tweaks-row">
          <span className="tweaks-label">게시글 기본 뷰</span>
          <div className="view-toggle">
            {['list', 'kanban', 'calendar'].map((v) => (
              <button key={v} className={tweaks.defaultView === v ? 'active' : ''} onClick={() => update('defaultView', v)}>
                {v === 'list' ? '리스트' : v === 'kanban' ? '칸반' : '캘린더'}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);