// LINKONA prototype — admin workspace (matching review, partial).
(function () {
  const { Button, Card, Badge, Tag, Stat, MatchScore, Avatar } = window.LINKONADesignSystem_465a88;
  const { Icon, Eyebrow, PageHead, Toast } = window;
  const { DeskShell } = window;
  const D = window.LK_DATA;

  const NAV = [
    { id: 'review', label: '매칭 검수', icon: 'sparkle', count: D.REVIEW_QUEUE.length },
    { id: 'creators', label: '크리에이터', icon: 'users' },
    { id: 'brands', label: '브랜드', icon: 'campaign' },
    { id: 'data', label: '데이터', icon: 'shield' },
  ];

  function AdminApp({ roleSwitcher }) {
    const [screen, setScreen] = React.useState('review');
    const [decisions, setDecisions] = React.useState({});
    const [toast, setToast] = React.useState('');
    const decide = (id, v) => { setDecisions((p) => ({ ...p, [id]: v })); setToast(v === 'approved' ? 'AI 매칭을 승인했습니다' : '매칭을 반려했습니다'); setTimeout(() => setToast(''), 2000); };

    return (
      <DeskShell
        nav={NAV} active={screen} onNav={setScreen}
        title={NAV.find((n) => n.id === screen)?.label}
        badge={<Badge tone="violet">OPERATOR</Badge>}
        roleSwitcher={roleSwitcher}
        account={{ name: 'LINKONA Ops', sub: 'DANEEL · 운영팀' }}
      >
        {screen === 'review' ? <ReviewQueue decisions={decisions} decide={decide} /> : <SimpleList screen={screen} />}
        <Toast show={!!toast}><Icon name="check" size={16} color="#fff" /> {toast}</Toast>
      </DeskShell>
    );
  }

  function ReviewQueue({ decisions, decide }) {
    const C = D.CREATORS;
    const pending = D.REVIEW_QUEUE.filter((r) => !decisions[r.id]).length;
    return (
      <div className="lk-fade">
        <PageHead eyebrow="HUMAN-IN-THE-LOOP" title="AI 매칭 검수"
          desc="AI가 좁힌 후보를 운영팀이 최종 확정합니다. 적합도 70% 이상 매칭이 검수 대기열에 오릅니다." />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))', gap: 16, marginBottom: 22 }} className="lk-stagger">
          <Card padding="md"><Stat value={String(pending)} label="검수 대기" /></Card>
          <Card padding="md"><Stat value="94%" label="AI 승인율" gradient /></Card>
          <Card padding="md"><Stat value="2.4h" label="평균 검수 시간" /></Card>
          <Card padding="md"><Stat value="2,000+" label="크리에이터 풀" /></Card>
        </div>

        <Card padding="none">
          <div style={{ padding: '16px 24px', borderBottom: '1px solid var(--border-subtle)', display: 'grid', gridTemplateColumns: '1.7fr 1.2fr 90px 1.4fr 200px', gap: 16, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
            <span>크리에이터</span><span>브랜드 요청</span><span>AI Fit</span><span>플래그</span><span style={{ textAlign: 'right' }}>검수</span>
          </div>
          {D.REVIEW_QUEUE.map((r, i) => {
            const dec = decisions[r.id];
            return (
              <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '1.7fr 1.2fr 90px 1.4fr 200px', gap: 16, alignItems: 'center', padding: '16px 24px', borderTop: i ? '1px solid var(--border-subtle)' : 'none', opacity: dec === 'rejected' ? 0.55 : 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <Avatar name={r.creator} size={40} ring />
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>{r.creator}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-muted)' }}>{r.handle}</div>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 500 }}>{r.brand}</div>
                  <Badge tone="blue" style={{ marginTop: 4 }}>{r.cat}</Badge>
                </div>
                <div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 700, color: r.score >= 90 ? 'var(--success-600)' : r.score >= 80 ? 'var(--primary)' : 'var(--warning-600)' }}>{r.score}</span>
                </div>
                <div>
                  {r.flag
                    ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, color: 'var(--warning-600)' }}><Icon name="bell" size={14} color="var(--warning-600)" />{r.flag}</span>
                    : <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, color: 'var(--text-muted)' }}><Icon name="check" size={14} color="var(--success-500)" />이상 없음</span>}
                </div>
                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
                  {!dec ? (
                    <>
                      <Button variant="ghost" size="sm" onClick={() => decide(r.id, 'rejected')}>반려</Button>
                      <Button variant="primary" size="sm" onClick={() => decide(r.id, 'approved')} iconLeft={<Icon name="check" size={15} color="#fff" />}>승인</Button>
                    </>
                  ) : (
                    <Badge tone={dec === 'approved' ? 'success' : 'neutral'}>{dec === 'approved' ? '승인됨' : '반려됨'}</Badge>
                  )}
                </div>
              </div>
            );
          })}
        </Card>
      </div>
    );
  }

  function SimpleList({ screen }) {
    const C = D.CREATORS;
    if (screen === 'creators') {
      return (
        <div className="lk-fade">
          <PageHead eyebrow="POOL" title="크리에이터 풀" desc="베트남 마이크로 인플루언서 데이터베이스 (일부)." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16 }} className="lk-stagger">
            {Object.values(C).map((c) => (
              <Card key={c.id} padding="md" interactive>
                <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 12 }}>
                  <Avatar name={c.name} size={46} ring status={c.status} />
                  <div><div style={{ fontSize: 14.5, fontWeight: 600 }}>{c.name}</div><div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-muted)' }}>{c.handle}</div></div>
                </div>
                <div style={{ display: 'flex', gap: 16, fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-secondary)', marginBottom: 10 }}>
                  <span>팔로워 <b style={{ color: 'var(--text-primary)' }}>{c.followers}</b></span>
                  <span>참여 <b style={{ color: 'var(--success-600)' }}>{c.eng}</b></span>
                </div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>{c.kw.slice(0, 2).map((k) => <Tag key={k}>{k}</Tag>)}<Badge tone="blue">{c.cat}</Badge></div>
              </Card>
            ))}
          </div>
        </div>
      );
    }
    const isBrand = screen === 'brands';
    const items = isBrand
      ? [{ n: '㈜필코스', s: '기능성 화장품 · 동남아 총판', b: 'FC', t: 'success', st: '계약' }, { n: '㈜메리몽드', s: '색조 전문 · 베타 협력', b: 'MM', t: 'blue', st: '베타' }, { n: '㈜포시즌라보라토리', s: '향수 전문 · 베타 논의', b: 'PS', t: 'warning', st: '논의' }, { n: '㈜에이아이로솔루션', s: 'AI 개발 · 플랫폼 제작', b: 'AI', t: 'violet', st: '협약' }]
      : [];
    return (
      <div className="lk-fade">
        <PageHead eyebrow={isBrand ? 'PARTNERS' : 'DATA'} title={isBrand ? '브랜드 · 협력사' : '피부 빅데이터'} desc={isBrand ? '광고주 및 콘텐츠·유통 협력사 현황.' : '수집·분석 데이터 자산 현황.'} />
        {isBrand ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }} className="lk-stagger">
            {items.map((it, i) => (
              <Card key={i} padding="md">
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 46, height: 46, borderRadius: 'var(--r-md)', background: 'var(--ink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--ink-600)', flexShrink: 0 }}>{it.b}</div>
                  <div style={{ flex: 1 }}><div style={{ fontSize: 15, fontWeight: 600 }}>{it.n}</div><div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{it.s}</div></div>
                  <Badge tone={it.t}>{it.st}</Badge>
                </div>
              </Card>
            ))}
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }} className="lk-stagger">
            <Card padding="lg"><Stat value="2,220" label="누적 분석 샘플" delta="+1.2K" deltaDir="up" gradient /></Card>
            <Card padding="lg"><Stat value="11" label="피부 지표" /></Card>
            <Card padding="lg"><Stat value="3개국" label="지재권 (KR·CN·US)" /></Card>
          </div>
        )}
      </div>
    );
  }

  Object.assign(window, { AdminApp });
})();