const { Card: MCard, Input: MInput, Button: MBtn, Table: MTable, Badge: MBadge, Tabs: MTabs, Dialog: MDialog, Tag: MTag, Tooltip: MTooltip } = window.OctanexDesignSystem_0e3b75;
const MIcon = window.OxIcon;

const USERNAMES = [
  { id: 1, u: '@vault', type: 'аукцион', tone: 'info', price: 61.0, ends: '2ч 14м', bids: 9 },
  { id: 2, u: '@orbit', type: 'аукцион', tone: 'info', price: 24.5, ends: '11ч 03м', bids: 4 },
  { id: 3, u: '@stack', type: 'продажа', tone: 'green', price: 180.0, ends: '—', bids: null },
  { id: 4, u: '@nexus', type: 'продажа', tone: 'green', price: 95.0, ends: '—', bids: null },
  { id: 5, u: '@pulse', type: 'аукцион', tone: 'info', price: 12.2, ends: '1д 6ч', bids: 2 },
];

const CHANNELS = [
  { id: 1, name: 'крипто-радар', topic: 'крипта', subs: '48 200', er: '11%', price: '84 000 ₽' },
  { id: 2, name: 'дизайн-борда', topic: 'дизайн', subs: '22 900', er: '19%', price: '51 500 ₽' },
  { id: 3, name: 'ecom-сводка', topic: 'e-com', subs: '104 000', er: '7%', price: '212 000 ₽' },
  { id: 4, name: 'ночной тех', topic: 'технологии', subs: '15 400', er: '23%', price: '38 900 ₽' },
];

function Market({ balance, pushToast }) {
  const [tab, setTab] = React.useState('u');
  const [q, setQ] = React.useState('');
  const [bidLot, setBidLot] = React.useState(null);
  const [bid, setBid] = React.useState('');

  const lots = USERNAMES.filter((l) => l.u.includes(q.toLowerCase()));
  const minBid = bidLot ? (bidLot.price + 0.5).toFixed(1) : 0;
  const fee = bid ? (parseFloat(bid) * 0.04).toFixed(2) : '0.00';

  const placeBid = () => {
    const v = parseFloat(bid);
    if (!v || v < parseFloat(minBid)) {
      pushToast({ tone: 'danger', title: 'ставка не принята', description: `минимум ${minBid} TON` });
      return;
    }
    if (v > balance.ton) {
      pushToast({ tone: 'danger', title: 'недостаточно TON', description: 'сначала внеси крипту на баланс' });
      return;
    }
    pushToast({ tone: 'green', title: `ставка на ${bidLot.u} выставлена`, description: `${v.toFixed(1)} TON · комиссия при выкупе ${fee} TON` });
    setBidLot(null); setBid('');
  };

  return (
    <div>
      <ScreenTitle greeting="// парс: fragment.com + lolzteam" title="маркет"
        right={<MTooltip content="ставки — только с крипто-баланса" side="bottom">
          <MBtn variant="secondary"><MIcon name="wallet" size={15} /> {balance.ton.toFixed(1)} TON</MBtn>
        </MTooltip>} />

      <MTabs active={tab} onChange={setTab} items={[
        { id: 'u', label: 'юзернеймы', count: USERNAMES.length },
        { id: 'c', label: 'каналы', count: CHANNELS.length },
      ]} style={{ marginBottom: 20 }} />

      {tab === 'u' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <MInput mono prefix="@" placeholder="поиск юзернейма" value={q} onChange={setQ} style={{ width: 280 }} />
            <MTag mono>источник: fragment</MTag>
            <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)' }}>
              комиссия <span className="ox-neon">4%</span> с выкупа · <span className="ox-neon">0.1%</span> при проигрыше аукциона
            </span>
          </div>
          <MCard style={{ padding: 8 }}>
            <MTable
              columns={[
                { key: 'u', title: 'юзернейм', render: (r) => <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13.5, color: 'var(--text-primary)' }}>{r.u}</span> },
                { key: 'type', title: 'тип', render: (r) => <MBadge tone={r.tone} dot>{r.type}</MBadge> },
                { key: 'price', title: 'цена / ставка', num: true, render: (r) => <span style={{ color: 'var(--green-300)' }}>{r.price.toFixed(1)} TON</span> },
                { key: 'bids', title: 'ставки', num: true, render: (r) => r.bids ?? '—' },
                { key: 'ends', title: 'до конца', mono: true },
                { key: 'act', title: '', align: 'right', render: (r) => r.type === 'аукцион'
                  ? <MBtn size="sm" variant="secondary" onClick={() => { setBidLot(r); setBid((r.price + 0.5).toFixed(1)); }}>ставка</MBtn>
                  : <MBtn size="sm" onClick={() => pushToast({ tone: 'green', title: `${r.u} — заявка на выкуп`, description: `${r.price.toFixed(1)} TON + 4% комиссия` })}>купить</MBtn> },
              ]}
              rows={lots}
              empty="ничего не нашлось"
            />
          </MCard>
        </div>
      )}

      {tab === 'c' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {CHANNELS.map((c) => (
            <MCard key={c.id} interactive path="market" title={c.name}
              actions={<MBadge tone="neutral">{c.topic}</MBadge>}
              footer={<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 600, color: 'var(--green-300)' }}>{c.price}</span>
                <MBtn size="sm" variant="secondary" onClick={() => pushToast({ tone: 'info', title: 'запрос отправлен', description: `${c.name} · проверка канала перед сделкой` })}>запросить</MBtn>
              </div>}>
              <div style={{ display: 'flex', gap: 24 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)' }}>подписчики <b style={{ color: 'var(--text-primary)' }}>{c.subs}</b></span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)' }}>er <b style={{ color: 'var(--text-primary)' }}>{c.er}</b></span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>lolzteam</span>
              </div>
            </MCard>
          ))}
        </div>
      )}

      <MDialog open={!!bidLot} onClose={() => setBidLot(null)} path="market" title={bidLot ? `ставка на ${bidLot.u}` : ''}
        footer={<React.Fragment>
          <MBtn variant="secondary" onClick={() => setBidLot(null)}>отмена</MBtn>
          <MBtn onClick={placeBid}>поставить</MBtn>
        </React.Fragment>}>
        {bidLot && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <MInput label="ваша ставка" mono suffix="TON" value={bid} onChange={setBid} hint={`минимум ${minBid} TON · сейчас ${bidLot.price.toFixed(1)} TON, ставок: ${bidLot.bids}`} />
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.9, padding: '10px 12px', borderRadius: 8, background: 'var(--surface-card)', border: '1px solid var(--border-hairline)' }}>
              <span style={{ color: 'var(--green-500)' }}>➜</span> ставка спишется с крипто-баланса ({balance.ton.toFixed(1)} TON)<br/>
              <span style={{ color: 'var(--green-500)' }}>➜</span> при выкупе — комиссия 4% ({fee} TON)<br/>
              <span style={{ color: 'var(--green-500)' }}>➜</span> при проигрыше вернём всё минус 0.1%
            </div>
          </div>
        )}
      </MDialog>
    </div>
  );
}

Object.assign(window, { Market });