import { useEffect, useMemo, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { Search, ChevronRight, Filter, ChevronLeft, Download } from 'lucide-react';
import type { ClientAnalyticsItem, DateRange, RfmAnalytics, RfmClient } from '../types';
import { exportToCSV, fetchClientAnalytics, fetchRfmAnalytics } from '../dataService';
import DateRangePicker from '../components/DateRangePicker';
import type { ClientSortOption, ClientSummary } from '../analytics/clients';

const clientTypeStyles: Record<string, string> = {
  'Sem análise': 'border-zinc-600/30 bg-zinc-600/15 text-zinc-300',
  'Campeão': 'border-emerald-500/30 bg-emerald-500/15 text-emerald-300',
  'Potencial Leal': 'border-sky-500/30 bg-sky-500/15 text-sky-300',
  'Novo Cliente': 'border-cyan-500/30 bg-cyan-500/15 text-cyan-300',
  'Cliente Leal': 'border-blue-500/30 bg-blue-500/15 text-blue-300',
  'Precisa de Atenção': 'border-amber-500/30 bg-amber-500/15 text-amber-300',
  'Quase Dormindo': 'border-orange-500/30 bg-orange-500/15 text-orange-300',
  'Em Risco': 'border-rose-500/30 bg-rose-500/15 text-rose-300',
  'Hibernando': 'border-fuchsia-500/30 bg-fuchsia-500/15 text-fuchsia-300',
  'Perdido': 'border-zinc-500/30 bg-zinc-500/15 text-zinc-300'
};

const clientTypes = [
  'Sem análise',
  'Campeão',
  'Potencial Leal',
  'Novo Cliente',
  'Cliente Leal',
  'Precisa de Atenção',
  'Quase Dormindo',
  'Em Risco',
  'Hibernando',
  'Perdido'
];

const backendSegmentToClientType: Record<string, string> = {
  champions: 'Campeão',
  potential_loyalists: 'Potencial Leal',
  new_customers: 'Novo Cliente',
  loyal_customers: 'Cliente Leal',
  need_attention: 'Precisa de Atenção',
  about_to_sleep: 'Quase Dormindo',
  at_risk: 'Em Risco',
  hibernating: 'Hibernando',
  lost: 'Perdido'
};

const getRfmPriority = (client: Pick<RfmClient, 'recencyScore' | 'valueScore' | 'monetaryScore'>) => {
  return (client.recencyScore * 100) + (client.valueScore * 10) + client.monetaryScore;
};

const sortClients = (clients: ClientSummary[], sortBy: ClientSortOption) => {
  return [...clients].sort((a, b) => {
    switch (sortBy) {
      case 'recent': return b.lastPurchase - a.lastPurchase;
      case 'spent_desc': return b.totalSpent - a.totalSpent;
      case 'spent_asc': return a.totalSpent - b.totalSpent;
      case 'ticket_desc': return b.averageTicket - a.averageTicket;
      case 'ticket_asc': return a.averageTicket - b.averageTicket;
      case 'rfm_priority': return b.rfmPriority - a.rfmPriority;
      case 'items_desc': return b.totalItems - a.totalItems;
      case 'items_asc': return a.totalItems - b.totalItems;
      default: return 0;
    }
  });
};

const Clients = () => {
  const { dateRange, setDateRange } = useOutletContext<{ 
    dateRange: DateRange, 
    setDateRange: (range: DateRange) => void
  }>();
  const [searchTerm, setSearchTerm] = useState('');
  const [sortBy, setSortBy] = useState<ClientSortOption>('recent');
  const [clientTypeFilter, setClientTypeFilter] = useState('all');
  const [rfmAnalytics, setRfmAnalytics] = useState<RfmAnalytics | null>(null);
  const [clientAnalytics, setClientAnalytics] = useState<ClientAnalyticsItem[]>([]);
  
  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  useEffect(() => {
    let isMounted = true;

    const loadClients = async () => {
      const clientsData = await fetchClientAnalytics(dateRange);
      if (isMounted) {
        setClientAnalytics(clientsData);
        setRfmAnalytics(null);
      }

      const rfmData = await fetchRfmAnalytics(dateRange);
      if (isMounted) {
        setRfmAnalytics(rfmData);
      }
    };

    void loadClients();

    return () => {
      isMounted = false;
    };
  }, [dateRange]);

  const allClientsData = useMemo(() => {
    const normalizedSearch = searchTerm.trim().toLowerCase();
    const rfmByCustomerKey = new Map((rfmAnalytics?.clients || []).map(client => [client.customerKey, client]));
    const clients = clientAnalytics.map((client): ClientSummary => {
      const rfmClient = rfmByCustomerKey.get(client.customerKey);
      return {
        customerKey: client.customerKey,
        clientToken: client.clientToken,
        name: client.name,
        phone: client.phone,
        totalSpent: client.totalSpent,
        averageTicket: client.orderCount ? client.totalSpent / client.orderCount : 0,
        totalItems: client.quantityPurchased,
        orderCount: client.orderCount,
        lastPurchase: client.lastPurchaseDate ? new Date(client.lastPurchaseDate).getTime() : 0,
        clientType: rfmClient ? (backendSegmentToClientType[rfmClient.segmentKey] || rfmClient.segmentLabel) : 'Sem análise',
        rfmScore: rfmClient?.rfmScore || '000',
        rfmPriority: rfmClient ? getRfmPriority(rfmClient) : 0
      };
    });

    const filteredClients = normalizedSearch
      ? clients.filter(client =>
        client.name.toLowerCase().includes(normalizedSearch) ||
        client.phone.toLowerCase().includes(normalizedSearch)
      )
      : clients;

    return sortClients(filteredClients, sortBy);
  }, [clientAnalytics, searchTerm, sortBy, rfmAnalytics]);

  const clientsData = useMemo(() => {
    if (clientTypeFilter === 'all') return allClientsData;
    return allClientsData.filter(client => client.clientType === clientTypeFilter);
  }, [allClientsData, clientTypeFilter]);

  const clientTypeCounts = useMemo(() => {
    return clientTypes.reduce<Record<string, number>>((counts, type) => {
      counts[type] = allClientsData.filter(client => client.clientType === type).length;
      return counts;
    }, {});
  }, [allClientsData]);

  // Pagination logic
  const totalPages = Math.ceil(clientsData.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const paginatedData = clientsData.slice(startIndex, startIndex + itemsPerPage);

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
  };

  const formatNumber = (value: number) => {
    return new Intl.NumberFormat('pt-BR').format(value);
  };

  const selectClientType = (type: string) => {
    setClientTypeFilter(current => current === type ? 'all' : type);
    setCurrentPage(1);
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col xl:flex-row xl:items-center justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold mb-2 text-zinc-900 dark:text-dark-text">Clientes</h1>
          <p className="text-zinc-500 dark:text-dark-muted font-medium">Métricas de engajamento e histórico de consumo dos seus clientes.</p>
        </div>
        
        <div className="flex flex-col sm:flex-row flex-wrap gap-3 items-center justify-start xl:justify-end">
          <DateRangePicker 
            dateRange={dateRange} 
            onChange={(range) => {
              setDateRange(range);
              setCurrentPage(1);
            }}
          />
          
          <div className="relative">
            <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-400 dark:text-dark-muted w-4 h-4" />
            <select 
              value={sortBy}
              onChange={(e) => {
                setSortBy(e.target.value as ClientSortOption);
                setCurrentPage(1);
              }}
              className="appearance-none bg-dark-card border border-dark-border text-dark-text text-sm rounded-xl pl-9 pr-8 py-2.5 focus:outline-none focus:border-brand-primary transition-colors shadow-sm cursor-pointer"
            >
              <option value="recent">Mais Recentes</option>
              <option value="spent_desc">Maior Gasto</option>
              <option value="spent_asc">Menor Gasto</option>
              <option value="ticket_desc">Maior Ticket Médio</option>
              <option value="ticket_asc">Menor Ticket Médio</option>
              <option value="rfm_priority">Prioridade RFV</option>
              <option value="items_desc">Mais Produtos</option>
              <option value="items_asc">Menos Produtos</option>
            </select>
          </div>

          <div className="relative w-full sm:w-auto">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-400 dark:text-dark-muted w-5 h-5" />
            <input 
              type="text" 
              placeholder="Buscar cliente..." 
              value={searchTerm}
              onChange={(e) => {
                setSearchTerm(e.target.value);
                setCurrentPage(1);
              }}
              className="w-full sm:w-64 bg-dark-card border border-dark-border text-dark-text rounded-xl pl-10 pr-4 py-2.5 focus:outline-none focus:border-brand-primary hover:border-brand-primary transition-colors shadow-sm"
            />
          </div>
          
          <button
            onClick={() => {
              const exportData = clientsData.map(client => ({
                'Nome do Cliente': client.name,
                'Telefone/WhatsApp': client.phone || 'N/A',
                'Tipo de Cliente': client.clientType,
                'RFV': client.rfmScore,
                'Total Gasto (R$)': client.totalSpent.toFixed(2).replace('.', ','),
                'Ticket Médio (R$)': client.averageTicket.toFixed(2).replace('.', ','),
                'Produtos Comprados': client.totalItems,
                'Total de Pedidos': client.orderCount,
                'Última Compra': new Date(client.lastPurchase).toLocaleDateString('pt-BR')
              }));
              exportToCSV(exportData, `clientes_${new Date().toISOString().split('T')[0]}.csv`);
            }}
            className="flex items-center justify-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text cursor-pointer"
            title="Exportar para CSV"
          >
            <Download size={16} className="text-brand-primary" />
            <span className="hidden sm:inline">Exportar</span>
          </button>
        </div>
      </div>

      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-4 shadow-sm">
        <div className="mb-4">
          <div>
            <h2 className="text-sm font-bold text-zinc-900 dark:text-dark-text">Tipos de Clientes</h2>
            <p className="text-xs font-semibold text-zinc-500 dark:text-dark-muted">
              Classificação RFV sincronizada com a página RFV quando disponível.
            </p>
          </div>
        </div>

        <div className="flex flex-wrap gap-2">
          {clientTypes.map(type => (
            <button
              key={type}
              onClick={() => selectClientType(type)}
              title={clientTypeFilter === type ? 'Clique para limpar o filtro' : `Filtrar por ${type}`}
              className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-bold transition-all cursor-pointer hover:-translate-y-0.5 ${
                clientTypeFilter === type
                  ? `${clientTypeStyles[type]} ring-1 ring-current shadow-sm`
                  : clientTypeStyles[type]
              }`}
            >
              <span>{type}</span>
              <span className="rounded-full bg-black/20 px-2 py-0.5 text-[10px]">{clientTypeCounts[type] || 0}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm">
            <thead className="bg-zinc-50 dark:bg-dark-header border-b border-zinc-100 dark:border-dark-border text-zinc-500 dark:text-dark-muted">
              <tr>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Posição</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Nome do Cliente</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Tipo</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">RFV</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Total Gasto</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Ticket Médio</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Produtos Comprados</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px] text-right">Ações</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-zinc-100 dark:divide-dark-border">
              {paginatedData.map((client, index) => (
                <tr key={client.customerKey} className="hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 transition-colors group">
                  <td className="px-6 py-2.5">
                    <span className="inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold bg-zinc-100 dark:bg-dark-border text-zinc-500 dark:text-dark-muted">
                      {startIndex + index + 1}
                    </span>
                  </td>
                  <td className="px-6 py-2.5 font-semibold text-zinc-900 dark:text-dark-text">{client.name}</td>
                  <td className="px-6 py-2.5">
                    <span className={`inline-flex rounded-full border px-3 py-1 text-xs font-bold ${clientTypeStyles[client.clientType] || clientTypeStyles.Perdido}`}>
                      {client.clientType}
                    </span>
                  </td>
                  <td className="px-6 py-2.5">
                    <div className="flex items-center gap-1">
                      {client.rfmScore.split('').map((score, scoreIndex) => (
                        <span
                          key={`${client.name}-${scoreIndex}`}
                          className="inline-flex h-6 w-6 items-center justify-center rounded-md border border-dark-border bg-dark-input text-[11px] font-bold text-dark-text"
                        >
                          {score}
                        </span>
                      ))}
                    </div>
                  </td>
                  <td className="px-6 py-2.5 text-brand-primary font-bold">{formatCurrency(client.totalSpent)}</td>
                  <td className="px-6 py-2.5 text-zinc-700 dark:text-dark-text font-semibold">{formatCurrency(client.averageTicket)}</td>
                  <td className="px-6 py-2.5 text-zinc-500 dark:text-dark-muted text-xs font-medium">
                    {formatNumber(client.totalItems)} un. ({formatNumber(client.orderCount)} {client.orderCount === 1 ? 'pedido' : 'pedidos'})
                  </td>
                  <td className="px-6 py-2.5 text-right">
                    <Link 
                      to={`/clients/${encodeURIComponent(client.clientToken)}`}
                      className="inline-flex items-center text-xs font-bold text-brand-primary hover:opacity-80 transition-opacity cursor-pointer"
                    >
                      Ver detalhes
                      <ChevronRight className="w-3.5 h-3.5 ml-1" />
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        
        {/* Pagination Controls */}
        <div className="px-6 py-4 border-t border-zinc-100 dark:border-dark-border flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2 text-sm text-zinc-500 dark:text-dark-muted">
            <span>Mostrar</span>
            <select
              value={itemsPerPage}
              onChange={(e) => {
                setItemsPerPage(Number(e.target.value));
                setCurrentPage(1);
              }}
              className="bg-dark-card border border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer text-dark-text"
            >
              <option value={10}>10</option>
              <option value={20}>20</option>
              <option value={50}>50</option>
              <option value={100}>100</option>
            </select>
            <span>itens por página</span>
          </div>
          
          <div className="flex items-center gap-4 text-sm">
            <span className="text-zinc-500 dark:text-dark-muted">
              Mostrando {clientsData.length > 0 ? startIndex + 1 : 0} a {Math.min(startIndex + itemsPerPage, clientsData.length)} de {clientsData.length} clientes
            </span>
            <div className="flex gap-1">
              <button
                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                disabled={currentPage === 1}
                className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
              >
                <ChevronLeft className="w-5 h-5" />
              </button>
              <button
                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                disabled={currentPage === totalPages || totalPages === 0}
                className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
              >
                <ChevronRight className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Clients;