import { useEffect, useState } from 'react';
import { SymbolsFilter } from './components/SymbolsFilter';
import { SymbolsTable } from './components/SymbolsTable';
import type { Exchange, Symbol, SymbolFilter } from './types';

// Mock data for demonstration
const mockExchanges: Exchange[] = [
  { code: 'TSX', name: 'Toronto Stock Exchange', country: 'CA' },
  { code: 'TSXV', name: 'TSX Venture Exchange', country: 'CA' },
  { code: 'NYSE', name: 'New York Stock Exchange', country: 'US' },
  { code: 'NASDAQ', name: 'NASDAQ', country: 'US' },
  { code: 'AMEX', name: 'NYSE American', country: 'US' },
];

const mockSymbols: Symbol[] = [
  { symbol: 'AAPL', name: 'Apple Inc.', exchange: 'NASDAQ', country: 'US', type: 'Common Stock', currency: 'USD', marketCap: 3.48e12, sector: 'Technology', industry: 'Consumer Electronics' },
  { symbol: 'MSFT', name: 'Microsoft Corporation', exchange: 'NASDAQ', country: 'US', type: 'Common Stock', currency: 'USD', marketCap: 3.18e12, sector: 'Technology', industry: 'Software' },
  { symbol: 'GOOGL', name: 'Alphabet Inc. Class A', exchange: 'NASDAQ', country: 'US', type: 'Common Stock', currency: 'USD', marketCap: 2.23e12, sector: 'Technology', industry: 'Internet Services' },
  { symbol: 'AMZN', name: 'Amazon.com Inc.', exchange: 'NASDAQ', country: 'US', type: 'Common Stock', currency: 'USD', marketCap: 2.16e12, sector: 'Consumer Cyclical', industry: 'E-Commerce' },
  { symbol: 'TSLA', name: 'Tesla Inc.', exchange: 'NASDAQ', country: 'US', type: 'Common Stock', currency: 'USD', marketCap: 1.25e12, sector: 'Consumer Cyclical', industry: 'Auto Manufacturers' },
  { symbol: 'META', name: 'Meta Platforms Inc.', exchange: 'NASDAQ', country: 'US', type: 'Common Stock', currency: 'USD', marketCap: 1.52e12, sector: 'Technology', industry: 'Social Media' },
  { symbol: 'JPM', name: 'JPMorgan Chase & Co.', exchange: 'NYSE', country: 'US', type: 'Common Stock', currency: 'USD', marketCap: 650e9, sector: 'Financial', industry: 'Banks' },
  { symbol: 'BAC', name: 'Bank of America Corp.', exchange: 'NYSE', country: 'US', type: 'Common Stock', currency: 'USD', marketCap: 370e9, sector: 'Financial', industry: 'Banks' },
  { symbol: 'TD', name: 'Toronto-Dominion Bank', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 150e9, sector: 'Financial', industry: 'Banks' },
  { symbol: 'RY', name: 'Royal Bank of Canada', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 200e9, sector: 'Financial', industry: 'Banks' },
  { symbol: 'SHOP', name: 'Shopify Inc.', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 135e9, sector: 'Technology', industry: 'E-Commerce Software' },
  { symbol: 'CP', name: 'Canadian Pacific Kansas City', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 110e9, sector: 'Industrials', industry: 'Railroads' },
  { symbol: 'CNR', name: 'Canadian National Railway', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 105e9, sector: 'Industrials', industry: 'Railroads' },
  { symbol: 'BMO', name: 'Bank of Montreal', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 125e9, sector: 'Financial', industry: 'Banks' },
  { symbol: 'BNS', name: 'Bank of Nova Scotia', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 95e9, sector: 'Financial', industry: 'Banks' },
  { symbol: 'ENB', name: 'Enbridge Inc.', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 110e9, sector: 'Energy', industry: 'Oil & Gas Pipelines' },
  { symbol: 'SU', name: 'Suncor Energy Inc.', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 65e9, sector: 'Energy', industry: 'Oil & Gas' },
  { symbol: 'TRP', name: 'TC Energy Corporation', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 60e9, sector: 'Energy', industry: 'Oil & Gas Pipelines' },
  { symbol: 'MFC', name: 'Manulife Financial Corp.', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 55e9, sector: 'Financial', industry: 'Insurance' },
  { symbol: 'BAM', name: 'Brookfield Asset Management', exchange: 'TSX', country: 'CA', type: 'Common Stock', currency: 'CAD', marketCap: 85e9, sector: 'Financial', industry: 'Asset Management' },
];

export function SymbolsPage() {
  const [filters, setFilters] = useState<SymbolFilter>({
    country: ['CA', 'US'],
  });
  const [filteredSymbols, setFilteredSymbols] = useState<Symbol[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulate API call
    setIsLoading(true);
    setTimeout(() => {
      let symbols = [...mockSymbols];

      // Apply filters
      if (filters.exchange) {
        symbols = symbols.filter(s => s.exchange === filters.exchange);
      }

      if (filters.searchText) {
        const search = filters.searchText.toLowerCase();
        symbols = symbols.filter(s => 
          s.symbol.toLowerCase().includes(search) ||
          s.name.toLowerCase().includes(search)
        );
      }

      if (filters.country && filters.country.length > 0) {
        symbols = symbols.filter(s => filters.country!.includes(s.country));
      }

      // Sort by market cap (descending)
      symbols.sort((a, b) => (b.marketCap || 0) - (a.marketCap || 0));

      setFilteredSymbols(symbols);
      setIsLoading(false);
    }, 500);
  }, [filters]);

  return (
    <div className="h-full flex flex-col">
      <div className="flex-shrink-0 border-b border-border">
        <div className="flex items-center gap-4 px-3 py-2">
          <h1 className="text-lg font-bold text-text-primary">Symbols</h1>
          <SymbolsFilter
            filters={filters}
            exchanges={mockExchanges}
            onFiltersChange={setFilters}
          />
          <div className="text-sm text-text-secondary ml-auto">
            {isLoading ? (
              'Loading...'
            ) : (
              `${filteredSymbols.length} found`
            )}
          </div>
        </div>
      </div>

      <div className="flex-1 w-full">
        <SymbolsTable symbols={filteredSymbols} isLoading={isLoading} />
      </div>
    </div>
  );
}