const { Card: SCard, Input: SInput, Select: SSelect, Button: SBtn, Table: STable, Badge: SBadge, Tag: STag } = window.OctanexDesignSystem_0e3b75;
const SIcon = window.OxIcon;

const SMM_PRICES = { subs: 0.9, views: 0.019, reacts: 0.038, boost: 2.4 };
const SMM_LABELS = { subs: 'подписчики', views: 'просмотры', reacts: 'реакции', boost: 'буст канала' };

const SMM_ORDERS = [
  { id: '#8412', what: 'подписчики · 5 000', link: 't.me/oxtech', done: '62%', status: 'выполняется', tone: 'warning' },
  { id: '#8380', what: 'просмотры · 100 000', link: 't.me/oxtech/214', done: '100%', status: 'завершён', tone: 'neutral' },
  { id: '#8377', what: 'реакции · 20 000', link: 't.me/oxtech/209', done: '100%', status: 'завершён', tone: 'neutral' },
];

function Smm({ pushToast }) {
  const [service, setService] = React.useState('subs');
  const [link, setLink] = React.useState('');
  const [qty, setQty] = React.useState('5000');
  const n = parseInt(qty.replace(/\D/g, ''), 10) || 0;
  const price = (n * SMM_PRICES[service]).toFixed(0);
  const order = () => pushToast({ tone: 'green', title: 'заказ создан', description: `${SMM_LABELS[service]} · ${n.toLocaleString('ru-RU')} — ${price} ₽` });
  return (
    <div>
      <ScreenTitle greeting="// продвижение в telegram" title="смм-услуги" />
      <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 16, alignItems: 'start' }}>
        <SCard path="smm" title="новый заказ">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <SSelect label="услуга" value={service} onChange={setService}
              options={Object.entries(SMM_LABELS).map(([value, label]) => ({ value, label }))} />
            <SInput label="ссылка" mono prefix="t.me/" placeholder="канал или пост" value={link} onChange={setLink} />
            <SInput label="количество" mono value={qty} onChange={setQty} hint={`от 100 · цена за единицу ${SMM_PRICES[service]} ₽`} />
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              padding: '12px 14px', borderRadius: 8, background: 'var(--accent-dim)', border: '1px solid var(--border-accent-dim)',
            }}>
              <span className="ox-label">итого</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 20, fontWeight: 600, color: 'var(--green-300)' }}>{Number(price).toLocaleString('ru-RU')} ₽</span>
            </div>
            <SBtn size="lg" onClick={order}><SIcon name="zap" size={15} /> заказать</SBtn>
          </div>
        </SCard>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <SCard path="smm" title="мои smm-заказы">
            <STable dense
              columns={[
                { key: 'id', title: 'id', mono: true },
                { key: 'what', title: 'услуга' },
                { key: 'link', title: 'ссылка', mono: true },
                { key: 'done', title: 'прогресс', num: true },
                { key: 'status', title: 'статус', render: (r) => <SBadge tone={r.tone} dot>{r.status}</SBadge> },
              ]}
              rows={SMM_ORDERS}
            />
          </SCard>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
            <span className="ox-label">популярно:</span>
            <STag mono>подписчики 5k</STag>
            <STag mono>просмотры 100k</STag>
            <STag mono>реакции 20k</STag>
            <STag mono>буст ×14</STag>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Smm });