import { useState } from 'react';
import { Link } from 'react-router-dom';
import type { BrokerMoney, BrokerPosition } from '../../api/responses';
import { getBrokerInstrumentPath } from './brokerDisplay';
import { TableSkeleton } from '../../components/TableSkeleton';
import { useBrokerPositions } from '../../hooks/useBrokerPositions';

type BrokerPositionGroupConfig = {
  key: string;
  type?: string;
  title: string;
};

const GROUPS: BrokerPositionGroupConfig[] = [
  { key: 'shares', type: 'share', title: 'Акции' },
  { key: 'bonds', type: 'bond', title: 'Облигации' },
  { key: 'etf', type: 'etf', title: 'ETF' },
  { key: 'fund', type: 'fund', title: 'Фонды' },
];

const KNOWN_TYPES = new Set(GROUPS.map((g) => g.type).filter(Boolean));

const tableStyle = {
  width: '100%',
  borderCollapse: 'collapse',
  fontSize: 14,
} satisfies React.CSSProperties;

const thStyle = {
  borderBottom: '1px solid #e0e0e0',
  color: 'var(--color-text-secondary)',
  fontWeight: 600,
  padding: '10px 8px',
} satisfies React.CSSProperties;

const tdStyle = {
  borderBottom: '1px solid #eeeeee',
  padding: '10px 8px',
  verticalAlign: 'top',
} satisfies React.CSSProperties;

const pagButtonStyle = {
  padding: '6px 14px',
  borderRadius: 6,
  border: '1px solid #e0e0e0',
  background: 'var(--color-surface)',
  color: 'var(--color-text)',
  fontSize: 14,
  fontWeight: 600,
  cursor: 'pointer',
  lineHeight: 1.4,
} satisfies React.CSSProperties;

const pagButtonDisabledStyle = {
  ...pagButtonStyle,
  opacity: 0.35,
  cursor: 'not-allowed',
} satisfies React.CSSProperties;

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);
}

function formatQuantity(value: number | null | undefined) {
  return value == null ? '-' : value.toLocaleString('ru-RU');
}

function PositionTicker({ position }: { position: BrokerPosition }) {
  const label = position.ticker || position.figi || '-';
  const path = getBrokerInstrumentPath({
    ticker: position.ticker,
    instrumentType: position.instrumentType,
    classCode: position.classCode,
  });

  if (!path || label === '-') {
    return <strong>{label}</strong>;
  }

  return (
    <Link to={path} style={{ fontWeight: 700 }}>
      {label}
    </Link>
  );
}

function PositionGroupTable({
  accountId,
  group,
}: {
  accountId: string;
  group: BrokerPositionGroupConfig;
}) {
  const [cursorStack, setCursorStack] = useState<Array<string | undefined>>([]);
  const [cursor, setCursor] = useState<string | undefined>(undefined);

  const query = group.type ? { type: group.type, limit: 10, cursor } : { limit: 100, cursor };
  const { data: page, isLoading, isFetching } = useBrokerPositions(accountId, query);

  const rawPositions = page?.items ?? [];
  const positions = group.type
    ? rawPositions
    : rawPositions.filter(
        (p) => p.instrumentType && !KNOWN_TYPES.has(p.instrumentType.toLowerCase()),
      );

  const pageNumber = cursorStack.length + 1;
  const canGoBack = cursorStack.length > 0;
  const canGoForward = Boolean(page?.hasNext && page.nextCursor && !!group.type);

  function handleNext() {
    const nextCursor = page?.nextCursor;
    if (!nextCursor || !page?.hasNext || !group.type) return;
    setCursorStack((prev) => [...prev, cursor]);
    setCursor(nextCursor);
  }

  function handlePrevious() {
    if (cursorStack.length === 0) return;
    const prev = cursorStack[cursorStack.length - 1];
    setCursorStack((prevStack) => prevStack.slice(0, -1));
    setCursor(prev);
  }

  if (!isLoading && positions.length === 0) {
    return null;
  }

  return (
    <section>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 12,
          justifyContent: 'space-between',
          marginBottom: 10,
        }}
      >
        <h3 style={{ fontSize: 18, margin: 0 }}>{group.title}</h3>
        {group.type && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <button
              type="button"
              onClick={handlePrevious}
              disabled={!canGoBack || isFetching}
              style={canGoBack && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
            >
              {isFetching ? (
                <span
                  className="loading-spinner"
                  style={{ width: 14, height: 14, display: 'block' }}
                />
              ) : (
                '←'
              )}
            </button>
            <span
              style={{
                minWidth: 20,
                textAlign: 'center',
                color: 'var(--color-text-secondary)',
                fontSize: 14,
                fontWeight: 600,
              }}
            >
              {pageNumber}
            </span>
            <button
              type="button"
              onClick={handleNext}
              disabled={!canGoForward || isFetching}
              style={canGoForward && !isFetching ? pagButtonStyle : pagButtonDisabledStyle}
            >
              {isFetching ? (
                <span
                  className="loading-spinner"
                  style={{ width: 14, height: 14, display: 'block' }}
                />
              ) : (
                '→'
              )}
            </button>
          </div>
        )}
      </div>

      {isLoading && (
        <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
          <table style={tableStyle}>
            <thead>
              <tr>
                <th align="left" style={thStyle}>
                  Тикер
                </th>
                <th align="left" style={thStyle}>
                  Название
                </th>
                <th align="right" style={thStyle}>
                  Количество
                </th>
                <th align="right" style={thStyle}>
                  Цена
                </th>
                <th align="right" style={thStyle}>
                  Стоимость
                </th>
              </tr>
            </thead>
            <TableSkeleton
              rows={4}
              columns={[
                { width: '30%' },
                { width: '50%' },
                { width: '20%' },
                { width: '25%' },
                { width: '25%' },
              ]}
            />
          </table>
        </div>
      )}

      {!isLoading && positions.length > 0 && (
        <div className="table-container">
          <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
            <table aria-label={`Брокерские позиции: ${group.title}`} style={tableStyle}>
              <thead>
                <tr>
                  <th align="left" style={thStyle}>
                    Тикер
                  </th>
                  <th align="left" style={thStyle}>
                    Название
                  </th>
                  <th align="right" style={thStyle}>
                    Количество
                  </th>
                  <th align="right" style={thStyle}>
                    Цена
                  </th>
                  <th align="right" style={thStyle}>
                    Стоимость
                  </th>
                </tr>
              </thead>
              <tbody>
                {positions.map((position) => (
                  <tr
                    key={
                      position.positionUid ||
                      position.instrumentUid ||
                      position.ticker ||
                      position.figi
                    }
                  >
                    <td style={tdStyle}>
                      <PositionTicker position={position} />
                    </td>
                    <td style={tdStyle}>
                      <span style={{ color: 'var(--color-text-secondary)' }}>
                        {position.name || '-'}
                      </span>
                    </td>
                    <td align="right" style={tdStyle}>
                      {formatQuantity(position.quantity)}
                    </td>
                    <td align="right" style={tdStyle}>
                      {formatMoney(position.currentPrice)}
                    </td>
                    <td align="right" style={tdStyle}>
                      {formatMoney(position.currentValue)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {isFetching && (
            <div className="table-loading-overlay">
              <div className="loading-spinner" />
              <span style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
                Загрузка страницы {pageNumber}…
              </span>
            </div>
          )}
        </div>
      )}
    </section>
  );
}

type BrokerPositionsSectionProps = {
  accountId: string;
};

export function BrokerPositionsSection({ accountId }: BrokerPositionsSectionProps) {
  return (
    <div style={{ display: 'grid', gap: 20 }}>
      <h2 style={{ fontSize: 20, margin: 0 }}>Позиции</h2>
      {GROUPS.map((group) => (
        <PositionGroupTable key={group.key} accountId={accountId} group={group} />
      ))}
    </div>
  );
}