// LINKONA prototype — influencer workspace (mobile).
(function () {
  const { Button, Card, Badge, Tag, MatchScore, Avatar, ProgressBar, Stat } = window.LINKONADesignSystem_465a88;
  const { Icon, Eyebrow, MobileFrame, Toast } = window;
  const D = window.LK_DATA;
  const MARK = 'assets/linkona-mark.png';

  // Status bar
  const StatusBar = () => (
    <div style={{ height: 44, flexShrink: 0, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '0 26px 6px', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: 'var(--text-primary)' }}>
      <span>9:41</span>
      <span style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
        <Icon name="dot" size={13} /><span style={{ fontSize: 11 }}>5G</span>
        <span style={{ width: 22, height: 11, border: '1.5px solid var(--ink-400)', borderRadius: 3, display: 'inline-block', position: 'relative' }}><span style={{ position: 'absolute', inset: 1.5, right: 5, background: 'var(--ink-700)', borderRadius: 1 }} /></span>
      </span>
    </div>
  );

  const MTab = ({ icon, label, on, onClick }) => (
    <button onClick={onClick} style={{ flex: 1, border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '2px 0', color: on ? 'var(--primary)' : 'var(--ink-400)' }}>
      <Icon name={icon} size={22} color={on ? 'var(--primary)' : 'var(--ink-400)'} />
      <span style={{ fontSize: 10.5, fontWeight: on ? 600 : 500, fontFamily: 'var(--font-sans)' }}>{label}</span>
    </button>
  );

  function InfluencerApp() {
    const [tab, setTab] = React.useState('inbox');
    const [decisions, setDecisions] = React.useState({}); // id -> accepted|declined
    const [toast, setToast] = React.useState('');
    const decide = (id, v) => { setDecisions((p) => ({ ...p, [id]: v })); setToast(v === 'accepted' ? '제안을 수락했습니다' : '제안을 거절했습니다'); setTimeout(() => setToast(''), 2200); };

    return (
      <MobileFrame label="INFLUENCER APP · MOBILE">
        <StatusBar />
        {/* Top header */}
        <div style={{ flexShrink: 0, padding: '6px 20px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--border-subtle)' }}>
          <img src={MARK} alt="LINKONA" style={{ height: 22 }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ position: 'relative' }}>
              <Icon name="bell" size={20} color="var(--ink-500)" />
              <span style={{ position: 'absolute', top: -2, right: -2, width: 8, height: 8, borderRadius: '50%', background: 'var(--orange-500)', border: '1.5px solid #fff' }} />
            </div>
            <Avatar name="Mai Lan" size={30} ring status="online" />
          </div>
        </div>

        {/* Scroll area */}
        <div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
          {tab === 'home' && <InfHome />}
          {tab === 'inbox' && <InfInbox decisions={decisions} decide={decide} />}
          {tab === 'profile' && <InfProfile />}
        </div>

        {/* Bottom tabs */}
        <div style={{ flexShrink: 0, display: 'flex', borderTop: '1px solid var(--border-default)', background: 'rgba(255,255,255,.9)', backdropFilter: 'blur(8px)', padding: '9px 8px 24px' }}>
          <MTab icon="dashboard" label="홈" on={tab === 'home'} onClick={() => setTab('home')} />
          <MTab icon="inbox" label="제안함" on={tab === 'inbox'} onClick={() => setTab('inbox')} />
          <MTab icon="user" label="프로필" on={tab === 'profile'} onClick={() => setTab('profile')} />
        </div>

        <Toast show={!!toast}><Icon name="check" size={16} color="#fff" /> {toast}</Toast>
      </MobileFrame>
    );
  }

  // ---- Home ----
  function InfHome() {
    return (
      <div style={{ padding: 20 }} className="lk-fade">
        <div style={{ marginBottom: 18 }}>
          <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>안녕하세요,</div>
          <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'var(--font-display)' }}>Mai Lan 님</div>
        </div>
        <Card padding="md" accent style={{ marginBottom: 16, background: 'var(--grad-brand-soft)' }}>
          <Eyebrow style={{ marginBottom: 8 }}>THIS MONTH</Eyebrow>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 800, lineHeight: 1 }}>₫24.9M</div>
              <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', marginTop: 5 }}>예상 수익</div>
            </div>
            <Badge tone="success">＋18%</Badge>
          </div>
        </Card>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}>
          <Card padding="sm"><div style={{ fontFamily: 'var(--font-mono)', fontSize: 19, fontWeight: 700 }}>2</div><div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>진행 협업</div></Card>
          <Card padding="sm"><div style={{ fontFamily: 'var(--font-mono)', fontSize: 19, fontWeight: 700, color: 'var(--success-600)' }}>96</div><div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>AI Fit 평균</div></Card>
        </div>
        <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 10 }}>진행 중인 협업</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[{ b: '㈜필코스', p: '글로우 비타민C 세럼', pct: 60, s: '제작 중', tone: 'blue' }, { b: '㈜메리몽드', p: '데일리 톤업 선크림', pct: 30, s: '초안 검토', tone: 'warning' }].map((c, i) => (
            <Card key={i} padding="sm">
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 9 }}>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{c.p}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>{c.b}</div>
                </div>
                <Badge tone={c.tone}>{c.s}</Badge>
              </div>
              <ProgressBar value={c.pct} height={5} />
            </Card>
          ))}
        </div>
      </div>
    );
  }

  // ---- Proposals inbox ----
  function InfInbox({ decisions, decide }) {
    return (
      <div style={{ padding: 20 }} className="lk-fade">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <h2 style={{ fontSize: 20, fontWeight: 700, margin: 0 }}>제안함</h2>
          <Badge tone="amber">{D.PROPOSALS.filter((p) => !decisions[p.id]).length} 신규</Badge>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
          {D.PROPOSALS.map((p) => {
            const dec = decisions[p.id];
            return (
              <Card key={p.id} padding="md" style={{ opacity: dec === 'declined' ? 0.6 : 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                  <div style={{ width: 42, height: 42, borderRadius: 'var(--r-md)', background: 'var(--ink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--ink-600)', flexShrink: 0 }}>{p.logo}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14.5, fontWeight: 600 }}>{p.product}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{p.brand}</div>
                  </div>
                  <MatchScore score={p.fit} size={48} label="Fit" />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: '8px 12px', padding: '12px 0', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', marginBottom: 12 }}>
                  <PRow icon="wallet" label={p.budget} />
                  <PRow icon="camera" label={p.deliver} />
                  <PRow icon="calendar" label={p.period} />
                  <PRow icon="clock" label={p.deadline} />
                </div>
                {!dec ? (
                  <div style={{ display: 'flex', gap: 9 }}>
                    <Button variant="outline" size="sm" block onClick={() => decide(p.id, 'declined')}>거절</Button>
                    <Button variant="gradient" size="sm" block onClick={() => decide(p.id, 'accepted')} iconLeft={<Icon name="check" size={15} color="#fff" />}>수락</Button>
                  </div>
                ) : (
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, padding: '9px', borderRadius: 'var(--r-md)', background: dec === 'accepted' ? 'var(--success-100)' : 'var(--ink-100)', fontSize: 13, fontWeight: 600, color: dec === 'accepted' ? 'var(--success-600)' : 'var(--text-muted)' }}>
                    <Icon name={dec === 'accepted' ? 'check' : 'x'} size={15} color={dec === 'accepted' ? 'var(--success-600)' : 'var(--ink-400)'} />
                    {dec === 'accepted' ? '수락함 · 계약 대기' : '거절함'}
                  </div>
                )}
              </Card>
            );
          })}
        </div>
      </div>
    );
  }
  const PRow = ({ icon, label }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: 'var(--text-secondary)', minWidth: 0 }}>
      <Icon name={icon} size={14} color="var(--ink-400)" /><span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</span>
    </div>
  );

  // ---- Profile / portfolio ----
  function InfProfile() {
    const c = D.CREATORS.mailan;
    return (
      <div className="lk-fade">
        <div style={{ padding: '20px 20px 24px', background: 'var(--grad-brand-soft)', textAlign: 'center', borderBottom: '1px solid var(--border-subtle)' }}>
          <Avatar name={c.name} size={78} ring status="online" style={{ marginBottom: 12 }} />
          <div style={{ fontSize: 20, fontWeight: 700, fontFamily: 'var(--font-display)' }}>{c.name}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-muted)', marginBottom: 8 }}>{c.handle} · {c.city}</div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>{c.kw.map((k) => <Tag key={k} selected>{k}</Tag>)}</div>
          <Button variant="outline" size="sm" iconLeft={<Icon name="settings" size={15} />}>프로필 편집</Button>
        </div>
        <div style={{ padding: 20 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 22 }}>
            <MPStat v={c.followers} l="팔로워" />
            <MPStat v={c.eng} l="참여율" tone="var(--success-600)" />
            <MPStat v={c.avgViews} l="평균 조회" />
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 10 }}>포트폴리오</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 22 }}>
            {[0, 1, 2, 3].map((i) => (
              <div key={i} style={{ aspectRatio: '3/4', borderRadius: 'var(--r-md)', background: i % 2 ? 'var(--grad-brand-soft)' : 'var(--ink-100)', border: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
                <Icon name="play" size={26} color="var(--ink-300)" />
                <div style={{ position: 'absolute', bottom: 8, left: 8, display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-muted)' }}><Icon name="heart" size={12} color="var(--ink-400)" /> {[42, 88, 61, 120][i]}K</div>
              </div>
            ))}
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 10 }}>최근 협업</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
            {c.past.map((p, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', border: '1px solid var(--border-default)', borderRadius: 'var(--r-md)' }}>
                <div style={{ width: 34, height: 34, borderRadius: 'var(--r-sm)', background: 'var(--ink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="play" size={15} color="var(--ink-400)" /></div>
                <div style={{ flex: 1 }}><div style={{ fontSize: 13.5, fontWeight: 600 }}>{p.brand}</div><div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>{p.type}</div></div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--success-600)' }}>{p.roas}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
  const MPStat = ({ v, l, tone }) => (
    <div style={{ textAlign: 'center', padding: '12px 6px', background: 'var(--ink-50)', borderRadius: 'var(--r-md)' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 700, color: tone || 'var(--text-primary)' }}>{v}</div>
      <div style={{ fontSize: 10.5, color: 'var(--text-muted)', marginTop: 2 }}>{l}</div>
    </div>
  );

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