import { useParams } from 'react-router-dom';
import { useStock, useStockCandles, useStockDividends } from '../entities/stock';
import { StockDetails } from '../components/StockDetails';
import { PriceChart } from '../components/PriceChart';

export function StockPage() {
  const { secid } = useParams<{ secid: string }>();
  const { data: stock, isLoading, error } = useStock(secid!);
  const till = new Date().toISOString().split('T')[0];
  const from = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
  const { data: candles } = useStockCandles(secid!, '24h', from, till);
  const { data: dividends } = useStockDividends(secid!);

  if (isLoading) return <div>Загрузка...</div>;
  if (error || !stock) return <div>Инструмент не найден</div>;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <StockDetails stock={stock} />

      <div
        style={{
          background: 'var(--color-surface)',
          borderRadius: 'var(--border-radius)',
          boxShadow: 'var(--shadow)',
          padding: 24,
        }}
      >
        <h3 style={{ marginBottom: 16 }}>График цены</h3>
        <PriceChart data={candles ?? []} />
      </div>

      {dividends && dividends.length > 0 && (
        <div
          style={{
            background: 'var(--color-surface)',
            borderRadius: 'var(--border-radius)',
            boxShadow: 'var(--shadow)',
            padding: 24,
          }}
        >
          <h3 style={{ marginBottom: 16 }}>Дивиденды</h3>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ borderBottom: '2px solid #eee' }}>
                <th style={{ textAlign: 'left', padding: 8 }}>Дата закрытия реестра</th>
                <th style={{ textAlign: 'right', padding: 8 }}>Сумма</th>
              </tr>
            </thead>
            <tbody>
              {dividends.map((d, i) => (
                <tr key={i} style={{ borderBottom: '1px solid #eee' }}>
                  <td style={{ padding: 8 }}>{d.registryCloseDate}</td>
                  <td style={{ textAlign: 'right', padding: 8 }}>
                    {d.value.toFixed(2)} {d.currency}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}