import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, useOutletContext } from 'react-router-dom';
import { ChevronLeft, ChevronRight, Download, Filter, Loader2, Search, Users } from 'lucide-react';
import DateRangePicker from '../components/DateRangePicker';
import { exportToCSV, fetchRfmAnalytics } from '../dataService';
import type { DateRange, RfmAnalytics, RfmClient, RfmSegment } from '../types';

const emptyClients: RfmClient[] = [];
const emptySegments: RfmSegment[] = [];

const segmentStyles: Record<string, { accent: string; bg: string; text: string }> = {
  champions: { accent: 'bg-emerald-500', bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
  potential_loyalists: { accent: 'bg-sky-500', bg: 'bg-sky-500/10', text: 'text-sky-400' },
  new_customers: { accent: 'bg-cyan-500', bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
  loyal_customers: { accent: 'bg-blue-500', bg: 'bg-blue-500/10', text: 'text-blue-400' },
  need_attention: { accent: 'bg-amber-500', bg: 'bg-amber-500/10', text: 'text-amber-400' },
  about_to_sleep: { accent: 'bg-orange-500', bg: 'bg-orange-500/10', text: 'text-orange-400' },
  at_risk: { accent: 'bg-rose-500', bg: 'bg-rose-500/10', text: 'text-rose-400' },
  hibernating: { accent: 'bg-fuchsia-500', bg: 'bg-fuchsia-500/10', text: 'text-fuchsia-400' },
  lost: { accent: 'bg-zinc-500', bg: 'bg-zinc-500/10', text: 'text-zinc-400' }
};

const rfmSegmentDefinitions: Array<Pick<RfmSegment, 'key' | 'label'>> = [
  { key: 'champions', label: 'Champions' },
  { key: 'potential_loyalists', label: 'Potenciais Leais' },
  { key: 'new_customers', label: 'Novos Clientes' },
  { key: 'loyal_customers', label: 'Clientes Leais' },
  { key: 'need_attention', label: 'Precisam de Atenção' },
  { key: 'about_to_sleep', label: 'Quase Dormindo' },
  { key: 'at_risk', label: 'Em Risco' },
  { key: 'hibernating', label: 'Hibernando' },
  { key: 'lost', label: 'Perdidos' }
];

const segmentDescriptions: Record<string, string> = {
  champions: 'Recentes, frequentes e valiosos',
  potential_loyalists: 'Recentes com bom potencial',
  new_customers: 'Primeira compra recente',
  loyal_customers: 'Valiosos, mas menos recentes',
  need_attention: 'Base intermediária para nutrir',
  about_to_sleep: 'Baixo valor começando a esfriar',
  at_risk: 'Valiosos sem compra recente',
  hibernating: 'Sem compra recente e valor médio',
  lost: 'Baixa atividade e distante'
};

const segmentActions: Record<string, string> = {
  champions: 'Oferecer acesso antecipado, benefícios VIP e lançamentos.',
  potential_loyalists: 'Estimular a próxima compra com recomendações personalizadas.',
  new_customers: 'Enviar boas-vindas e incentivo para a segunda compra.',
  loyal_customers: 'Manter relacionamento com ofertas relevantes e recorrentes.',
  need_attention: 'Reativar interesse com campanha leve e produtos recentes.',
  about_to_sleep: 'Enviar lembrete antes que o cliente esfrie completamente.',
  at_risk: 'Priorizar recuperação com oferta forte ou contato direto.',
  hibernating: 'Testar reativação de baixo custo com mensagem objetiva.',
  lost: 'Evitar alto investimento; usar apenas campanhas ocasionais.'
};

const segmentByScore: Record<string, string> = {
  '3-3': 'champions',
  '3-2': 'potential_loyalists',
  '3-1': 'new_customers',
  '2-3': 'loyal_customers',
  '2-2': 'need_attention',
  '2-1': 'about_to_sleep',
  '1-3': 'at_risk',
  '1-2': 'hibernating',
  '1-1': 'lost'
};

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

const DAY_MS = 24 * 60 * 60 * 1000;

const parseLocalDate = (value: string) => {
  if (!value) return null;
  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})/);
  if (match) {
    const [, year, month, day] = match;
    return new Date(Number(year), Number(month) - 1, Number(day));
  }

  const parsedDate = new Date(value);
  return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
};

const startOfDay = (date: Date) => {
  const nextDate = new Date(date);
  nextDate.setHours(0, 0, 0, 0);
  return nextDate;
};

const formatDate = (value: string) => {
  if (!value) return 'N/A';
  const date = parseLocalDate(value);
  return date ? date.toLocaleDateString('pt-BR') : 'N/A';
};

const scoreLabel = (score: number) => {
  if (score === 3) return 'Alto';
  if (score === 2) return 'Médio';
  return 'Baixo';
};

const getSegment = (segments: RfmSegment[], key: string) => {
  return segments.find(segment => segment.key === key);
};

const segmentForCell = (segments: RfmSegment[], recencyScore: number, valueScore: number) => {
  const matrixKey = `${recencyScore}-${valueScore}`;
  return getSegment(segments, segmentByScore[matrixKey]);
};

const ScoreBadge = ({ value }: { value: number }) => (
  <span className="inline-flex h-7 w-7 items-center justify-center rounded-lg border border-dark-border bg-dark-input text-xs font-bold text-dark-text">
    {value}
  </span>
);

const Rfm = () => {
  const { dateRange, setDateRange, refreshInterval, setRefreshInterval } = useOutletContext<{
    dateRange: DateRange;
    setDateRange: (range: DateRange) => void;
    refreshInterval: number;
    setRefreshInterval: (interval: number) => void;
  }>();

  const [analytics, setAnalytics] = useState<RfmAnalytics | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [segmentFilter, setSegmentFilter] = useState('all');
  const [selectedSegmentKey, setSelectedSegmentKey] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(20);

  const loadRfm = useCallback(async (range: DateRange) => {
    setIsLoading(true);
    const data = await fetchRfmAnalytics(range);
    setAnalytics(data);
    setIsLoading(false);
  }, []);

  useEffect(() => {
    // RFM is calculated server-side from the selected date range.
    // eslint-disable-next-line react-hooks/set-state-in-effect
    void loadRfm(dateRange);
  }, [dateRange, loadRfm]);

  useEffect(() => {
    if (refreshInterval === 0) return;

    const intervalId = setInterval(() => {
      void loadRfm(dateRange);
    }, refreshInterval);

    return () => clearInterval(intervalId);
  }, [dateRange, loadRfm, refreshInterval]);

  const visibleAnalytics = analytics;
  const clients = visibleAnalytics?.clients || emptyClients;
  const segments = useMemo(() => {
    const sourceSegments = visibleAnalytics?.segments || emptySegments;
    return rfmSegmentDefinitions.map(definition => {
      const segment = sourceSegments.find(item => item.key === definition.key);
      return segment || {
        ...definition,
        count: 0,
        totalRevenue: 0,
        averageRevenue: 0
      };
    });
  }, [visibleAnalytics]);

  const getPeriodRecencyDays = useCallback((lastPurchaseDate: string) => {
    const purchaseDate = parseLocalDate(lastPurchaseDate);
    if (!purchaseDate) return 0;

    const purchaseDay = startOfDay(purchaseDate).getTime();
    const rangeEndDay = startOfDay(dateRange.end).getTime();
    return Math.max(0, Math.floor((rangeEndDay - purchaseDay) / DAY_MS));
  }, [dateRange.end]);

  const formatPeriodRecency = useCallback((lastPurchaseDate: string) => {
    const days = getPeriodRecencyDays(lastPurchaseDate);
    if (days === 0) return 'Hoje';
    if (days === 1) return 'Ontem';
    return `${days} dias`;
  }, [getPeriodRecencyDays]);

  const filteredClients = useMemo(() => {
    const normalizedSearch = searchTerm.trim().toLowerCase();

    return clients.filter(client => {
      const matchesSegment = segmentFilter === 'all' || client.segmentKey === segmentFilter;
      const matchesSearch = !normalizedSearch ||
        client.name.toLowerCase().includes(normalizedSearch) ||
        client.phone.toLowerCase().includes(normalizedSearch);

      return matchesSegment && matchesSearch;
    });
  }, [clients, searchTerm, segmentFilter]);

  const totalPages = Math.ceil(filteredClients.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const paginatedClients = filteredClients.slice(startIndex, startIndex + itemsPerPage);

  const totals = useMemo(() => {
    const totalRevenue = clients.reduce((sum, client) => sum + client.monetary, 0);
    const periodClientCount = clients.filter(client => client.frequency > 0 || client.monetary > 0).length;
    const activeSegments = segments.filter(segment => segment.count > 0).length;
    const topSegment = [...segments].sort((a, b) => b.totalRevenue - a.totalRevenue)[0];

    return { totalRevenue, periodClientCount, activeSegments, topSegment };
  }, [clients, segments]);

  const segmentInsights = useMemo(() => {
    return segments.reduce<Record<string, {
      averageRecencyDays: number;
      averageTicket: number;
      customerPercent: number;
      revenuePercent: number;
      topClients: RfmClient[];
    }>>((insights, segment) => {
      const segmentClients = clients.filter(client => client.segmentKey === segment.key);
      const totalOrders = segmentClients.reduce((sum, client) => sum + client.frequency, 0);
      const totalRecency = segmentClients.reduce((sum, client) => sum + getPeriodRecencyDays(client.lastPurchaseDate), 0);

      insights[segment.key] = {
        averageRecencyDays: segmentClients.length ? totalRecency / segmentClients.length : 0,
        averageTicket: totalOrders ? segment.totalRevenue / totalOrders : 0,
        customerPercent: clients.length ? (segment.count / clients.length) * 100 : 0,
        revenuePercent: totals.totalRevenue ? (segment.totalRevenue / totals.totalRevenue) * 100 : 0,
        topClients: [...segmentClients].sort((a, b) => b.monetary - a.monetary).slice(0, 3)
      };

      return insights;
    }, {});
  }, [clients, segments, getPeriodRecencyDays, totals.totalRevenue]);

  const selectedSegment = selectedSegmentKey ? getSegment(segments, selectedSegmentKey) : undefined;
  const selectedSegmentStyle = segmentStyles[selectedSegment?.key || 'lost'] || segmentStyles.lost;
  const selectedSegmentInsights = selectedSegment ? segmentInsights[selectedSegment.key] : null;

  const handleExport = () => {
    const exportData = filteredClients.map(client => ({
      Cliente: client.name,
      Telefone: client.phone,
      Segmento: client.segmentLabel,
      RFM: client.rfmScore,
      Recencia: client.recencyScore,
      Frequencia: client.frequencyScore,
      Monetario: client.monetaryScore,
      'Compra no periodo': formatPeriodRecency(client.lastPurchaseDate),
      'Pedidos no periodo': client.frequency,
      'Ticket medio no periodo (R$)': (client.frequency ? client.monetary / client.frequency : 0).toFixed(2).replace('.', ','),
      'Receita no periodo (R$)': client.monetary.toFixed(2).replace('.', ','),
      'Ultima compra': formatDate(client.lastPurchaseDate)
    }));

    exportToCSV(exportData, `rfm_${new Date().toISOString().split('T')[0]}.csv`);
  };

  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-dark-text">RFM</h1>
          <p className="text-dark-muted font-medium">Segmentação de clientes por recência, frequência e valor monetário.</p>
        </div>

        <div className="flex flex-col sm:flex-row flex-wrap gap-3 items-start sm:items-center">
          <DateRangePicker
            dateRange={dateRange}
            onChange={setDateRange}
            refreshInterval={refreshInterval}
            setRefreshInterval={setRefreshInterval}
            onManualRefresh={() => void loadRfm(dateRange)}
          />
        </div>
      </div>

      {isLoading && (
        <div className="inline-flex items-center gap-2 rounded-xl border border-dark-border bg-dark-card px-3 py-2 text-sm font-semibold text-dark-muted">
          <Loader2 className="h-4 w-4 animate-spin text-brand-primary" />
          Atualizando RFM
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
          <p className="text-dark-muted text-sm font-medium mb-1">Clientes no Período</p>
          <h3 className="text-3xl font-bold text-dark-text">{clients.length}</h3>
          <p className="mt-1 text-xs font-semibold text-dark-muted">Agrupados pela tag RFM anterior</p>
        </div>
        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
          <p className="text-dark-muted text-sm font-medium mb-1">Receita no Período</p>
          <h3 className="text-3xl font-bold text-dark-text">{formatCurrency(totals.totalRevenue)}</h3>
        </div>
        <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
          <p className="text-dark-muted text-sm font-medium mb-1">Segmentos com Compra</p>
          <h3 className="text-3xl font-bold text-dark-text">{totals.activeSegments}</h3>
          <p className="mt-1 text-xs font-semibold text-dark-muted">
            Maior receita no período: {totals.topSegment?.label || 'N/A'}
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_340px] gap-6">
        <section className="bg-dark-card p-5 rounded-2xl border border-dark-border shadow-sm">
          <div className="mb-4 flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <div>
              <h2 className="text-lg font-bold text-dark-text">Matriz RFM</h2>
              <p className="text-sm font-medium text-dark-muted">Compradores do período agrupados pela tag RFM anterior ao período.</p>
            </div>
            <div className="flex items-center gap-2 text-xs font-semibold text-dark-muted">
              <span>Menor prioridade</span>
              <span className="h-2 w-12 rounded-full bg-gradient-to-r from-rose-500 via-amber-400 to-emerald-500" />
              <span>Maior prioridade</span>
            </div>
          </div>

          <div className="overflow-x-auto">
            <div className="grid min-w-[720px] grid-cols-[104px_repeat(3,minmax(0,1fr))] gap-2">
              <div className="flex items-center justify-center rounded-xl border border-dark-border bg-dark-input/60 px-3 py-2.5 text-center">
                <div>
                  <p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Eixos</p>
                  <p className="text-xs font-semibold text-dark-text">Recência / Valor</p>
                </div>
              </div>
            {[1, 2, 3].map(valueScore => (
              <div key={valueScore} className="rounded-xl border border-dark-border bg-dark-input/70 px-3 py-2.5 text-center">
                <p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Valor {valueScore}</p>
                <p className="text-xs font-bold text-dark-text">{scoreLabel(valueScore)}</p>
              </div>
            ))}

            {[3, 2, 1].map(recencyScore => (
              <div key={recencyScore} className="contents">
                <div className="flex min-h-28 items-center justify-center rounded-xl border border-dark-border bg-dark-input/70 px-2.5 text-center">
                  <div>
                    <p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Rec. {recencyScore}</p>
                    <p className="text-xs font-bold text-dark-text">{scoreLabel(recencyScore)}</p>
                    <p className="mt-1 text-[10px] font-semibold text-dark-muted">
                      {recencyScore === 3 ? 'Compra recente' : recencyScore === 2 ? 'Intermediário' : 'Distante'}
                    </p>
                  </div>
                </div>

                {[1, 2, 3].map(valueScore => {
                  const segment = segmentForCell(segments, recencyScore, valueScore);
                  const style = segmentStyles[segment?.key || 'lost'];
                  const isActive = segmentFilter === segment?.key;
                  const intensity = segment?.count ? 'opacity-100' : 'opacity-75';

                  return (
                    <button
                      key={`${recencyScore}-${valueScore}`}
                      onClick={() => {
                        setSegmentFilter(segment?.key || 'all');
                        setSelectedSegmentKey(segment?.key || '');
                        setCurrentPage(1);
                      }}
                      className={`group min-h-28 rounded-xl border p-3 text-left transition-all hover:-translate-y-0.5 hover:border-brand-primary cursor-pointer ${
                        isActive ? 'border-brand-primary ring-1 ring-brand-primary/50' : 'border-dark-border'
                      } ${style.bg} ${intensity}`}
                    >
                      <div className="flex h-full flex-col justify-between gap-3">
                        <div>
                          <div className="mb-2 flex items-start justify-between gap-2">
                            <span className={`h-2 w-8 rounded-full ${style.accent}`} />
                            <span className="rounded-md border border-dark-border bg-black/10 px-1.5 py-0.5 text-[10px] font-bold text-dark-muted">
                              R{recencyScore} V{valueScore}
                            </span>
                          </div>
                          <p className="text-sm font-bold text-dark-text">{segment?.label}</p>
                          <p className="mt-1 truncate text-xs font-medium text-dark-muted">
                            {segmentDescriptions[segment?.key || 'lost']}
                          </p>
                        </div>

                        <div className="grid grid-cols-2 gap-2">
                          <div>
                            <p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Clientes</p>
                            <p className={`text-xl font-bold leading-none ${style.text}`}>{segment?.count || 0}</p>
                          </div>
                          <div>
                            <p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Receita período</p>
                            <p className="truncate text-xs font-bold text-dark-text">{formatCurrency(segment?.totalRevenue || 0)}</p>
                          </div>
                        </div>
                      </div>
                    </button>
                  );
                })}
              </div>
            ))}
            </div>
          </div>
        </section>

        <section className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
          <h2 className="mb-5 text-lg font-bold text-dark-text">Segmentos</h2>
          <div className="space-y-2">
            {segments.map(segment => {
              const style = segmentStyles[segment.key] || segmentStyles.lost;
              return (
                <button
                  key={segment.key}
                  onClick={() => {
                    setSegmentFilter(segment.key);
                    setSelectedSegmentKey(segment.key);
                    setCurrentPage(1);
                  }}
                  className={`w-full rounded-xl border px-4 py-3 text-left transition-colors cursor-pointer ${
                    segmentFilter === segment.key ? 'border-brand-primary bg-dark-input' : 'border-dark-border bg-transparent hover:border-brand-primary'
                  }`}
                >
                  <div className="flex items-center justify-between gap-3">
                    <div className="flex min-w-0 items-center gap-3">
                      <span className={`h-2.5 w-2.5 shrink-0 rounded-full ${style.accent}`} />
                      <span className="truncate text-sm font-bold text-dark-text">{segment.label}</span>
                    </div>
                    <span className={`text-sm font-bold ${style.text}`}>{segment.count}</span>
                  </div>
                  <p className="mt-1 text-xs font-semibold text-dark-muted">
                    {(segmentInsights[segment.key]?.customerPercent || 0).toFixed(1)}% clientes · {formatCurrency(segment.totalRevenue)} no período
                  </p>
                </button>
              );
            })}
          </div>
        </section>
      </div>

      {selectedSegment && selectedSegmentInsights && (
        <section className={`rounded-2xl border border-dark-border ${selectedSegmentStyle.bg} p-4 shadow-sm`}>
          <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
            <div className="min-w-0">
              <div className="mb-1 flex items-center gap-2">
                <span className={`h-2.5 w-2.5 rounded-full ${selectedSegmentStyle.accent}`} />
                <p className={`text-xs font-bold uppercase tracking-widest ${selectedSegmentStyle.text}`}>Segmento selecionado</p>
              </div>
              <h3 className="text-lg font-bold text-dark-text">{selectedSegment.label}</h3>
              <p className="mt-1 text-sm font-semibold text-dark-muted">{segmentActions[selectedSegment.key]}</p>
            </div>

            <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:w-[560px]">
              <div className="rounded-xl border border-dark-border bg-black/10 p-3">
                <p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Clientes</p>
                <p className="mt-1 text-base font-bold text-dark-text">{selectedSegmentInsights.customerPercent.toFixed(1)}%</p>
              </div>
              <div className="rounded-xl border border-dark-border bg-black/10 p-3">
                <p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Receita período</p>
                <p className="mt-1 text-base font-bold text-dark-text">{selectedSegmentInsights.revenuePercent.toFixed(1)}%</p>
              </div>
              <div className="rounded-xl border border-dark-border bg-black/10 p-3">
                <p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Ticket período</p>
                <p className="mt-1 text-base font-bold text-dark-text">{formatCurrency(selectedSegmentInsights.averageTicket)}</p>
              </div>
              <div className="rounded-xl border border-dark-border bg-black/10 p-3">
                <p className="text-[10px] font-bold uppercase tracking-wider text-dark-muted">Compra período</p>
                <p className="mt-1 text-base font-bold text-dark-text">{selectedSegmentInsights.averageRecencyDays.toFixed(0)} dias</p>
              </div>
            </div>
          </div>
        </section>
      )}

      <section className="bg-dark-card border border-dark-border rounded-2xl overflow-hidden shadow-sm">
        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 border-b border-dark-border p-4">
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="relative">
              <Filter className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-dark-muted" />
              <select
                value={segmentFilter}
                onChange={(event) => {
                  setSegmentFilter(event.target.value);
                  setCurrentPage(1);
                }}
                className="appearance-none bg-dark-input 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="all">Todos os segmentos</option>
                {segments.map(segment => (
                  <option key={segment.key} value={segment.key}>{segment.label}</option>
                ))}
              </select>
            </div>

            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-dark-muted" />
              <input
                type="text"
                placeholder="Buscar cliente..."
                value={searchTerm}
                onChange={(event) => {
                  setSearchTerm(event.target.value);
                  setCurrentPage(1);
                }}
                className="w-full sm:w-72 bg-dark-input 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>
          </div>

          <button
            onClick={handleExport}
            disabled={!filteredClients.length}
            className="flex items-center justify-center gap-2 bg-dark-input 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 disabled:cursor-not-allowed disabled:opacity-50"
            title="Exportar para CSV"
          >
            <Download size={16} className="text-brand-primary" />
            Exportar
          </button>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm">
            <thead className="bg-dark-header border-b border-dark-border text-dark-muted">
              <tr>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Cliente</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Segmento</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">RFM</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Última Compra</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Pedidos no Período</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Ticket no Período</th>
                <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">Receita no Período</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-dark-border">
              {paginatedClients.map((client: RfmClient) => {
                const style = segmentStyles[client.segmentKey] || segmentStyles.lost;
                return (
                  <tr key={client.phone} className="hover:bg-dark-input/50 transition-colors">
                    <td className="px-6 py-3">
                      <Link to={`/clients/${encodeURIComponent(client.name)}`} className="flex items-center gap-3 hover:text-brand-primary transition-colors">
                        <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-dark-input text-dark-muted">
                          <Users className="h-4 w-4" />
                        </span>
                        <span>
                          <span className="block font-bold text-dark-text">{client.name}</span>
                          <span className="block text-xs font-medium text-dark-muted">{client.phone || 'N/A'}</span>
                        </span>
                      </Link>
                    </td>
                    <td className="px-6 py-3">
                      <span className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-bold ${style.bg} ${style.text}`}>
                        <span className={`h-2 w-2 rounded-full ${style.accent}`} />
                        {client.segmentLabel}
                      </span>
                    </td>
                    <td className="px-6 py-3">
                      <div className="flex items-center gap-2">
                        <ScoreBadge value={client.recencyScore} />
                        <ScoreBadge value={client.frequencyScore} />
                        <ScoreBadge value={client.monetaryScore} />
                      </div>
                    </td>
                    <td className="px-6 py-3 text-dark-muted font-medium">
                      {formatDate(client.lastPurchaseDate)}
                      <span className="block text-xs">{formatPeriodRecency(client.lastPurchaseDate)}</span>
                    </td>
                    <td className="px-6 py-3 text-dark-text font-bold">{client.frequency}</td>
                    <td className="px-6 py-3 text-dark-text font-bold">{formatCurrency(client.frequency ? client.monetary / client.frequency : 0)}</td>
                    <td className="px-6 py-3 text-brand-primary font-bold">{formatCurrency(client.monetary)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {!filteredClients.length && (
          <div className="p-8 text-center text-sm font-semibold text-dark-muted">
            Nenhum cliente encontrado.
          </div>
        )}

        <div className="px-6 py-4 border-t 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-dark-muted">
            <span>Mostrar</span>
            <select
              value={itemsPerPage}
              onChange={(event) => {
                setItemsPerPage(Number(event.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>clientes por página</span>
          </div>

          <div className="flex items-center gap-4 text-sm">
            <span className="text-dark-muted">
              Mostrando {filteredClients.length > 0 ? startIndex + 1 : 0} a {Math.min(startIndex + itemsPerPage, filteredClients.length)} de {filteredClients.length} clientes
            </span>
            <div className="flex gap-1">
              <button
                onClick={() => setCurrentPage(page => Math.max(1, page - 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(page => Math.min(totalPages, page + 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>
      </section>
    </div>
  );
};

export default Rfm;