// LINKONA prototype — root app: role gate, advertiser routing, tweaks.
(function () {
  const { Button, Card, Badge, ProgressBar } = window.LINKONADesignSystem_465a88;
  const { Icon, Eyebrow, Toast } = window;
  const { DeskShell, RoleSwitcher } = window;
  const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;
  const { AdvDashboard, AdvBrief, AdvMatchLoading, AdvResults, CreatorDrawer, AdvCampaign, AdvReport, InfluencerApp, AdminApp, Onboarding } = window;
  const D = window.LK_DATA;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "dataset": "skincare",
    "gradient": "full",
    "accent": "#4878f0"
  }/*EDITMODE-END*/;

  // ---- Advertiser sub-app ----
  const ADV_NAV = [
    { id: 'dashboard', label: '대시보드', icon: 'dashboard' },
    { id: 'match', label: 'AI 매칭', icon: 'sparkle' },
    { id: 'campaign', label: '캠페인', icon: 'campaign' },
    { id: 'report', label: '리포트', icon: 'report' },
  ];
  function AdvApp({ ds, roleSwitcher }) {
    const [screen, setScreen] = React.useState('dashboard');
    const [matched, setMatched] = React.useState(false);
    const [creator, setCreator] = React.useState(null);
    const [drawer, setDrawer] = React.useState(false);
    const [sent, setSent] = React.useState([]);
    const [toast, setToast] = React.useState('');
    // reset when dataset changes
    React.useEffect(() => { setMatched(false); setScreen('dashboard'); setSent([]); }, [ds.key]);

    const navActive = ['brief', 'matchLoading', 'results'].includes(screen) ? 'match' : screen;
    const onNav = (id) => {
      if (id === 'match') setScreen(matched ? 'results' : 'brief');
      else setScreen(id);
    };
    const openCreator = (c) => { const r = ds.results.find((x) => x.c === c.id); setCreator({ c, r }); setDrawer(true); };
    const send = (id) => { setSent((p) => p.includes(id) ? p : [...p, id]); setToast('제안을 보냈습니다'); setTimeout(() => setToast(''), 2200); };

    const resultCreator = creator ? creator.c : null;
    const resultMeta = creator ? creator.r : null;

    return (
      <DeskShell
        nav={ADV_NAV} active={navActive} onNav={onNav}
        title={screen === 'brief' ? '새 캠페인' : screen === 'matchLoading' || screen === 'results' ? 'AI 매칭' : ADV_NAV.find((n) => n.id === screen)?.label}
        badge={<Badge tone="amber">베트남 · VN</Badge>}
        roleSwitcher={roleSwitcher}
        account={{ name: ds.brand.name, sub: '광고주 · K-뷰티' }}
        headerRight={screen === 'dashboard' ? <Button variant="outline" size="sm" onClick={() => setScreen('brief')} iconLeft={<Icon name="plus" size={15} />}>새 캠페인</Button> : null}
        footer={<Card padding="sm" style={{ background: 'var(--grad-brand-soft)', border: '1px solid var(--border-default)' }}>
          <Eyebrow style={{ marginBottom: 6 }}>PRO 플랜</Eyebrow>
          <div style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--text-secondary)', marginBottom: 10 }}>이번 달 AI 매칭 <b style={{ color: 'var(--text-primary)' }}>18/25</b></div>
          <ProgressBar value={72} height={5} />
        </Card>}
      >
        {screen === 'dashboard' && <AdvDashboard ds={ds} onNew={() => setScreen('brief')} onOpenReport={() => setScreen('report')} />}
        {screen === 'brief' && <AdvBrief ds={ds} onBack={() => setScreen('dashboard')} onRun={() => setScreen('matchLoading')} />}
        {screen === 'matchLoading' && <AdvMatchLoading onDone={() => { setMatched(true); setScreen('results'); }} />}
        {screen === 'results' && <AdvResults ds={ds} proposals={sent} onOpen={openCreator} />}
        {screen === 'campaign' && <AdvCampaign ds={ds} onOpenReport={() => setScreen('report')} />}
        {screen === 'report' && <AdvReport ds={ds} />}

        <CreatorDrawer open={drawer} creator={resultCreator} result={resultMeta} ds={ds} onClose={() => setDrawer(false)} onSend={send} alreadySent={resultCreator ? sent.includes(resultCreator.id) : false} />
        <Toast show={!!toast}><Icon name="check" size={16} color="#fff" /> {toast}</Toast>
      </DeskShell>
    );
  }

  // ---- Root ----
  function App() {
    const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
    const [role, setRole] = React.useState('advertiser');
    const [entered, setEntered] = React.useState({ advertiser: false, influencer: false, admin: true });
    const ds = D.DATASETS[t.dataset] || D.DATASETS.skincare;

    // Apply tweak CSS overrides
    React.useEffect(() => {
      const r = document.documentElement.style;
      // gradient
      if (t.gradient === 'off') {
        r.setProperty('--grad-brand', 'var(--primary)');
        r.setProperty('--grad-text', 'var(--primary)');
        r.setProperty('--grad-brand-soft', 'var(--blue-50)');
      } else if (t.gradient === 'subtle') {
        r.setProperty('--grad-brand', 'linear-gradient(115deg, #6f97f5 0%, #b355d1 55%, #f89c56 100%)');
        r.removeProperty('--grad-text');
        r.setProperty('--grad-brand-soft', 'linear-gradient(120deg,#f4f7ff 0%,#fbf5fd 55%,#fff8f1 100%)');
      } else {
        r.removeProperty('--grad-brand'); r.removeProperty('--grad-text'); r.removeProperty('--grad-brand-soft');
      }
      // accent
      const accents = {
        '#4878f0': ['#4878f0', '#2f5cd8', 'rgba(72,120,240,.30)'],
        '#9c30c0': ['#9c30c0', '#8321a6', 'rgba(156,48,192,.28)'],
        '#f5822a': ['#f5822a', '#e06a12', 'rgba(245,130,42,.30)'],
      };
      const a = accents[t.accent] || accents['#4878f0'];
      r.setProperty('--primary', a[0]); r.setProperty('--primary-hover', a[1]); r.setProperty('--focus-ring', `0 0 0 3px ${a[2]}`);
    }, [t.gradient, t.accent]);

    const switcher = <RoleSwitcher role={role} onRole={setRole} />;

    // Onboarding gate for advertiser / influencer
    if (!entered[role]) {
      return (
        <>
          <Onboarding role={role} onDone={() => setEntered((p) => ({ ...p, [role]: true }))} onSkip={() => setEntered((p) => ({ ...p, [role]: true }))} />
          <FloatingSwitcher>{switcher}</FloatingSwitcher>
          <Panel t={t} setTweak={setTweak} />
        </>
      );
    }

    return (
      <>
        {role === 'advertiser' && <AdvApp ds={ds} roleSwitcher={switcher} />}
        {role === 'admin' && <AdminApp roleSwitcher={switcher} />}
        {role === 'influencer' && (
          <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '22px 20px 40px', background: 'var(--bg-page)' }}>
            <div style={{ marginBottom: 26 }}>{switcher}</div>
            <InfluencerApp />
          </div>
        )}
        <Panel t={t} setTweak={setTweak} />
      </>
    );
  }

  // Floating switcher (used over onboarding)
  const FloatingSwitcher = ({ children }) => (
    <div style={{ position: 'fixed', top: 18, left: '50%', transform: 'translateX(-50%)', zIndex: 50, background: 'rgba(255,255,255,.9)', backdropFilter: 'blur(8px)', padding: 6, borderRadius: 'var(--r-full)', boxShadow: 'var(--shadow-md)' }}>{children}</div>
  );

  // Tweaks panel
  function Panel({ t, setTweak }) {
    return (
      <TweaksPanel>
        <TweakSection label="샘플 데이터" />
        <TweakRadio label="캠페인 세트" value={t.dataset}
          options={[{ value: 'skincare', label: '비타민C' }, { value: 'suncare', label: '톤업' }]}
          onChange={(v) => setTweak('dataset', v)} />
        <TweakSection label="브랜드 스타일" />
        <TweakRadio label="그라디언트" value={t.gradient}
          options={[{ value: 'full', label: '풀' }, { value: 'subtle', label: '은은' }, { value: 'off', label: '단색' }]}
          onChange={(v) => setTweak('gradient', v)} />
        <TweakColor label="강조색" value={t.accent}
          options={['#4878f0', '#9c30c0', '#f5822a']}
          onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    );
  }

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