const { Card: DCard, Stat: DStat, Table: DTable, Badge: DBadge, Button: DBtn } = window.OctanexDesignSystem_0e3b75;
const DIcon = window.OxIcon;

const ORDERS = [
  { id: '#8412', service: 'подписчики тг · 5 000', status: 'выполняется', tone: 'warning', date: '03.07 14:21', sum: '4 250 ₽' },
  { id: '#8409', service: 'юзернейм @vault — аукцион', status: 'аукцион', tone: 'info', date: '03.07 11:02', sum: '61.0 TON' },
  { id: '#8391', service: 'брендинг: лого + сайт (ии)', status: 'активен', tone: 'green', date: '02.07 19:44', sum: '12 900 ₽' },
  { id: '#8380', service: 'просмотры · 100 000', status: 'завершён', tone: 'neutral', date: '01.07 09:15', sum: '1 890 ₽' },
  { id: '#8377', service: 'реакции · 20 000', status: 'завершён', tone: 'neutral', date: '30.06 22:03', sum: '760 ₽' },
];

const SERVICES = [
  { id: 'smm', icon: 'megaphone', title: 'накрутка тг', desc: 'подписчики, просмотры, реакции', to: 'smm' },
  { id: 'market', icon: 'at-sign', title: 'маркет юзернеймов', desc: 'парс fragment · аукционы в TON', to: 'market' },
  { id: 'channels', icon: 'shopping-bag', title: 'маркет каналов', desc: 'готовые каналы с lolzteam', to: 'market' },
  { id: 'ai', icon: 'sparkles', title: 'ии-студия', desc: 'брендинг, сайт, реклама 9:16', to: 'ai' },
];

function greetingNow() {
  const h = new Date().getHours();
  if (h < 5) return 'доброй ночи, л';
  if (h < 12) return 'доброе утро, л';
  if (h < 18) return 'добрый день, л';
  return 'добрый вечер, л';
}

function Dashboard({ balance, setScreen, onTopUp }) {
  return (
    <div>
      <ScreenTitle greeting={`// ${greetingNow()}`} title="обзор"
        right={<DBtn variant="secondary" onClick={onTopUp}><DIcon name="credit-card" size={15} /> пополнить</DBtn>} />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
        <DCard><DStat label="баланс" value={balance.rub.toLocaleString('ru-RU')} suffix="₽" delta="+2 400 за неделю" trend="up" /></DCard>
        <DCard><DStat label="крипто-баланс" value={balance.ton.toFixed(1)} suffix="TON" delta="для ставок на аукционах" trend="flat" /></DCard>
        <DCard><DStat label="активные заказы" value="3" delta="+1 сегодня" trend="up" /></DCard>
        <DCard><DStat label="ставки в игре" value="1" delta="@vault · истекает 2ч" trend="flat" /></DCard>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
        {SERVICES.map((s) => (
          <DCard key={s.id} interactive onClick={() => setScreen(s.to)}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span style={{ color: 'var(--green-400)', display: 'flex' }}><DIcon name={s.icon} size={18} /></span>
              <span style={{ color: 'var(--text-muted)', display: 'flex' }}><DIcon name="arrow-up-right" size={14} /></span>
            </div>
            <div style={{ fontSize: 15, fontWeight: 600, marginBottom: 4 }}>{s.title}</div>
            <div style={{ fontSize: 12.5, color: 'var(--text-secondary)' }}>{s.desc}</div>
          </DCard>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, alignItems: 'start' }}>
        <DCard path="история" title="последние заказы"
          actions={<DBtn variant="ghost" size="sm"><DIcon name="history" size={14} /> все</DBtn>}>
          <DTable dense
            columns={[
              { key: 'id', title: 'id', mono: true },
              { key: 'service', title: 'услуга' },
              { key: 'status', title: 'статус', render: (r) => <DBadge tone={r.tone} dot>{r.status}</DBadge> },
              { key: 'date', title: 'дата', mono: true },
              { key: 'sum', title: 'сумма', num: true },
            ]}
            rows={ORDERS}
          />
        </DCard>
        <DCard glow path="предложение" title="неделя smm">
          <p style={{ fontSize: 13.5, color: 'var(--text-secondary)', marginBottom: 14 }}>
            до 06.07 подписчики тг — <span className="ox-neon" style={{ fontFamily: 'var(--font-mono)' }}>−18%</span>. цена от 0.74 ₽ за единицу при заказе от 10 000.
          </p>
          <DBtn size="sm" onClick={() => setScreen('smm')}>к услуге <DIcon name="arrow-right" size={14} /></DBtn>
          <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border-hairline)', fontFamily: 'var(--font-mono)', fontSize: 10.5, color: 'var(--text-muted)', lineHeight: 1.8 }}>
            <span style={{ color: 'var(--green-500)' }}>➜</span> аукционы: комиссия 4% с выкупа<br/>
            <span style={{ color: 'var(--green-500)' }}>➜</span> при проигрыше — 0.1%
          </div>
        </DCard>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });