import { useState } from 'react';
import { useParams } from 'react-router-dom';
import type { BrokerMoney } from '../../api/responses';
import { useBrokerOperations } from '../../hooks/useBrokerOperations';
import { useBrokerPortfolio } from '../../hooks/useBrokerPortfolio';
import { BrokerOperationsTable } from './BrokerOperationsTable';
import { BrokerPositionsSection } from './BrokerPositionsSection';

function formatMoney(value: BrokerMoney | null | undefined) {
  if (!value) return '-';

  return new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: value.currency || 'RUB',
    maximumFractionDigits: 2,
  }).format(value.value);
}

export function BrokerAccountDetailPage() {
  const { accountId } = useParams();
  const [operationCursor, setOperationCursor] = useState<string | undefined>(undefined);
  const [operationCursorStack, setOperationCursorStack] = useState<Array<string | undefined>>([]);
  const portfolio = useBrokerPortfolio(accountId);
  const operations = useBrokerOperations(accountId, { limit: 10, cursor: operationCursor });

  if (portfolio.isLoading) return <p>Загрузка портфеля...</p>;
  if (portfolio.error || !portfolio.data) {
    return <p style={{ color: 'var(--color-negative)' }}>Не удалось загрузить портфель</p>;
  }

  function handleNextOperationsPage() {
    const nextCursor = operations.data?.nextCursor;
    if (!nextCursor || !operations.data?.hasNext) return;

    setOperationCursorStack((previous) => [...previous, operationCursor]);
    setOperationCursor(nextCursor);
  }

  function handlePreviousOperationsPage() {
    if (operationCursorStack.length === 0) return;

    const nextStack = operationCursorStack.slice(0, -1);
    const previousCursor = operationCursorStack[operationCursorStack.length - 1];
    setOperationCursorStack(nextStack);
    setOperationCursor(previousCursor);
  }

  return (
    <div style={{ display: 'grid', gap: 24 }}>
      <header>
        <h1 style={{ fontSize: 28, lineHeight: 1.2, marginBottom: 12 }}>
          {portfolio.data.account.name}
        </h1>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'baseline' }}>
          <strong style={{ fontSize: 24 }}>{formatMoney(portfolio.data.totals.portfolio)}</strong>
          <span style={{ color: 'var(--color-text-secondary)' }}>
            День: {formatMoney(portfolio.data.yields.daily)}
          </span>
          <span style={{ color: 'var(--color-text-secondary)' }}>
            Ожидаемая: {portfolio.data.yields.expectedPercent ?? '-'}%
          </span>
        </div>
      </header>

      <section
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
          gap: 12,
        }}
      >
        {portfolio.data.cash.map((money) => (
          <div
            key={money.currency}
            style={{
              background: 'var(--color-surface)',
              border: '1px solid #e0e0e0',
              borderRadius: 8,
              padding: 16,
            }}
          >
            <div style={{ color: 'var(--color-text-secondary)', fontSize: 13 }}>
              {money.currency}
            </div>
            <strong>{formatMoney(money)}</strong>
          </div>
        ))}
      </section>

      <BrokerPositionsSection positions={portfolio.data.positions} />

      <BrokerOperationsTable
        isLoading={operations.isLoading}
        page={operations.data}
        pageNumber={operationCursorStack.length + 1}
        canGoBack={operationCursorStack.length > 0}
        canGoForward={Boolean(operations.data?.hasNext && operations.data.nextCursor)}
        onPrevious={handlePreviousOperationsPage}
        onNext={handleNextOperationsPage}
      />
    </div>
  );
}