import { useEffect, useState } from 'react';
import { useParams, Link, useOutletContext } from 'react-router-dom';
import { User, Tag, Package, DollarSign, Clock, Phone, ChevronDown, ShoppingBag, ReceiptText } from 'lucide-react';
import { AreaChart, Area, BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import BackButton from '../components/BackButton';
import DateRangePicker from '../components/DateRangePicker';
import PaginationControls from '../components/PaginationControls';
import RefreshStatus from '../components/RefreshStatus';
import type { ClientDetailsAnalytics, DateRange, OrderData } from '../types';
import { fetchClientDetailsAnalytics } from '../dataService';
import { formatDisplayName, removeTrailingSellerId } from '../displayFormatters';

const CHART_GRID_COLOR = 'var(--chart-grid)';
const CHART_AXIS_COLOR = 'var(--chart-axis)';
const CHART_CURSOR_COLOR = 'var(--chart-cursor)';
const CHART_DETAIL_BAR_COLOR = 'var(--chart-detail-bar)';
const WEEKDAY_BAR_COLOR = '#25C2FF';
const HOUR_BAR_COLOR = '#52DFA0';

const formatDateKey = (date: Date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

type CustomTooltipProps = {
  active?: boolean;
  payload?: Array<{ value: number }>;
  label?: string;
};

type PatternPoint = {
  label: string;
  value: number;
};

const getTopPatternPoint = (points: PatternPoint[]) => (
  points.reduce<PatternPoint | null>((topPoint, point) => {
    if (!topPoint || point.value > topPoint.value) return point;
    return topPoint;
  }, null)
);

const getPatternShare = (value: number, total: number) => (
  total > 0 ? Math.round((value / total) * 100) : 0
);

const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
  if (active && payload && payload.length) {
    return (
      <div className="rounded-xl bg-dark-card p-3 shadow-lg">
        <p className="mb-1 font-bold text-brand-primary">{label}</p>
        <p className="m-0 text-dark-text">
          Gasto: {new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(payload[0].value)}
        </p>
      </div>
    );
  }
  return null;
};

const PatternTooltip = ({ active, payload, label }: CustomTooltipProps) => {
  if (active && payload && payload.length) {
    const value = payload[0].value;
    return (
      <div className="rounded-xl bg-dark-card p-3 shadow-lg">
        <p className="mb-1 font-bold text-brand-primary">{label}</p>
        <p className="m-0 text-dark-text">
          {value} {value === 1 ? 'pedido' : 'pedidos'}
        </p>
      </div>
    );
  }
  return null;
};

const getOrderMetadata = (order: OrderData) => {
  const sellerName = formatDisplayName(removeTrailingSellerId(order.nome_vendedor || ''));

  return [
    order.cliente_nome_fantasia ? `Fantasia: ${formatDisplayName(order.cliente_nome_fantasia)}` : '',
    sellerName ? `Vendedor: ${sellerName}` : '',
    order.marketplace ? `Marketplace: ${order.marketplace}` : '',
    order.canal_venda ? `Canal: ${order.canal_venda}` : '',
    order.numero_ecommerce ? `E-commerce: ${order.numero_ecommerce}` : ''
  ].filter(Boolean);
};

const ClientDetailsSkeleton = () => (
  <div className="space-y-6" aria-label="Carregando cliente">
    <div className="flex flex-col gap-4">
      <div className="skeleton h-4 w-20" />
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
        <div className="flex items-center gap-4">
          <div className="skeleton h-16 w-16 rounded-2xl" />
          <div>
            <div className="skeleton h-7 w-56" />
            <div className="skeleton mt-3 h-4 w-72" />
          </div>
        </div>
        <div className="skeleton h-10 w-64" />
      </div>
    </div>

    <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
      {[0, 1, 2, 3].map(item => (
        <div key={`client-details-kpi-skeleton-${item}`} className="bg-dark-card p-5 rounded-2xl border border-dark-border shadow-sm">
          <div className="flex justify-between gap-5">
            <div className="w-full">
              <div className="skeleton h-3 w-32" />
              <div className="skeleton mt-3 h-7 w-28" />
            </div>
            <div className="skeleton h-11 w-11 shrink-0 rounded-xl" />
          </div>
        </div>
      ))}
    </div>

    <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
      <div className="skeleton h-5 w-36" />
      <div className="mt-8 skeleton h-[320px] w-full" />
    </div>

    <section className="space-y-4">
      <div className="flex items-start justify-between gap-4">
        <div>
          <div className="skeleton h-5 w-44" />
          <div className="skeleton mt-2 h-4 w-64" />
        </div>
        <div className="skeleton h-7 w-28 rounded-full" />
      </div>
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {[0, 1].map(item => (
          <div key={`client-pattern-skeleton-${item}`} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
            <div className="skeleton h-4 w-40" />
            <div className="mt-5 flex h-56 items-end gap-3">
              {[0, 1, 2, 3, 4, 5, 6].map(bar => (
                <div key={`client-pattern-bar-skeleton-${item}-${bar}`} className="skeleton flex-1" style={{ height: `${20 + ((bar * 17) % 65)}%` }} />
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>

    <div className="flex flex-col gap-4">
      {[0, 1, 2, 3].map(item => (
        <div key={`client-order-skeleton-${item}`} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-4 shadow-sm">
          <div className="flex items-center justify-between gap-4">
            <div className="flex min-w-0 items-center gap-3">
              <div className="skeleton h-8 w-8 rounded-lg" />
              <div>
                <div className="skeleton h-4 w-48" />
                <div className="skeleton mt-2 h-3 w-32" />
              </div>
            </div>
            <div className="skeleton h-8 w-28" />
          </div>
        </div>
      ))}
    </div>
  </div>
);

const ClientDetails = () => {
  const { clientToken } = useParams<{ clientToken: string }>();
  const decodedClientToken = clientToken ? decodeURIComponent(clientToken) : '';
  const { dateRange, setDateRange } = useOutletContext<{
    dateRange: DateRange,
    setDateRange: (range: DateRange) => void
  }>();
  const [details, setDetails] = useState<ClientDetailsAnalytics | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const [ordersPerPage, setOrdersPerPage] = useState(5);
  const [expandedOrderIds, setExpandedOrderIds] = useState<Set<string>>(() => new Set());

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

    const loadClientDetails = async () => {
      if (!decodedClientToken) {
        if (isMounted) {
          setDetails(null);
          setIsLoading(false);
        }
        return;
      }

      setIsLoading(true);
      const nextDetails = await fetchClientDetailsAnalytics(decodedClientToken, dateRange);

      if (isMounted) {
        setDetails(nextDetails);
        setIsLoading(false);
      }
    };

    void loadClientDetails();

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

  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 handleDateRangeChange = (range: DateRange) => {
    setCurrentPage(1);
    setExpandedOrderIds(new Set());
    setDateRange(range);
  };

  const toggleOrder = (orderId: string) => {
    setExpandedOrderIds(current => {
      const next = new Set(current);
      if (next.has(orderId)) {
        next.delete(orderId);
      } else {
        next.add(orderId);
      }
      return next;
    });
  };

  if (isLoading && !details) {
    return <ClientDetailsSkeleton />;
  }

  if (!details?.hasClient) {
    return (
      <div className="text-center py-12">
        <p className="text-zinc-500 dark:text-dark-muted font-medium">Cliente não encontrado.</p>
        <Link to="/clients" className="text-brand-primary hover:underline mt-4 inline-block font-bold">Voltar para clientes</Link>
      </div>
    );
  }

  const {
    chartData,
    groupedOrders,
    purchaseHours = [],
    purchaseHourRangeLabel = 'Últimos 60 dias',
    purchaseWeekdayRangeLabel = 'Todo período',
    purchaseWeekdays = [],
    allTimeOrderCount,
    clientName,
    clientPhone,
    periodAverageTicket,
    periodItems,
    periodOrderCount,
    periodSpent
  } = details;
  const displayName = clientName || 'Cliente';
  const totalPages = Math.ceil(groupedOrders.length / ordersPerPage);
  const safeCurrentPage = Math.min(currentPage, totalPages || 1);
  const startIndex = (safeCurrentPage - 1) * ordersPerPage;
  const paginatedOrders = groupedOrders.slice(startIndex, startIndex + ordersPerPage);
  const hasWeekdayPattern = purchaseWeekdays.some(day => day.value > 0);
  const hasHourPattern = purchaseHours.some(hour => hour.value > 0);
  const weekdayPatternTotal = purchaseWeekdays.reduce((total, day) => total + day.value, 0);
  const hourPatternTotal = purchaseHours.reduce((total, hour) => total + hour.value, 0);
  const topWeekday = getTopPatternPoint(purchaseWeekdays);
  const topHour = getTopPatternPoint(purchaseHours);
  const isRefreshing = isLoading && Boolean(details);
  const isSingleDayRange = formatDateKey(dateRange.start) === formatDateKey(dateRange.end);

  return (
    <div className="space-y-6">
      {/* Header Area */}
      <div className="flex flex-col gap-4">
        <BackButton fallbackTo="/clients" />
        
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 rounded-2xl bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border flex items-center justify-center shadow-sm">
              <User className="w-8 h-8 text-brand-primary" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text">{displayName}</h1>
              <div className="flex items-center gap-3 mt-1">
                <p className="text-zinc-500 dark:text-dark-muted font-medium">
                  {formatNumber(allTimeOrderCount)} pedidos no histórico completo
                </p>
                {clientPhone && (
                  <>
                    <span className="text-zinc-300 dark:text-dark-border">•</span>
                    <span className="flex items-center gap-1.5 text-brand-primary font-bold text-sm bg-brand-primary/10 px-2 py-1 rounded-md">
                      <Phone className="w-3.5 h-3.5" />
                      {clientPhone}
                    </span>
                  </>
                )}
              </div>
            </div>
          </div>
          
          <DateRangePicker
            dateRange={dateRange}
            onChange={handleDateRangeChange}
          />
        </div>
      </div>

      <RefreshStatus isRefreshing={isRefreshing} />

      <div className={isRefreshing ? 'refreshing-content space-y-6' : 'space-y-6'} aria-busy={isRefreshing}>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
        <div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
          <div>
            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Gasto no Período</p>
            <p className="text-2xl font-bold text-brand-primary">{formatCurrency(periodSpent)}</p>
          </div>
          <div className="p-3 bg-brand-primary/10 rounded-xl text-brand-primary">
            <DollarSign size={22} />
          </div>
        </div>
        <div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
          <div>
            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Ticket no Período</p>
            <p className="text-2xl font-bold text-dark-text">{formatCurrency(periodAverageTicket)}</p>
          </div>
          <div className="p-3 bg-emerald-500/10 rounded-xl text-emerald-400">
            <ReceiptText size={22} />
          </div>
        </div>
        <div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
          <div>
            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Total Pedidos</p>
            <p className="text-2xl font-bold text-dark-text">{formatNumber(periodOrderCount)}</p>
          </div>
          <div className="p-3 bg-blue-500/10 rounded-xl text-blue-300">
            <ShoppingBag size={22} />
          </div>
        </div>
        <div className="bg-dark-card p-5 rounded-2xl border border-dark-border flex items-center justify-between shadow-sm">
          <div>
            <p className="text-xs font-bold text-dark-muted uppercase tracking-widest mb-1">Itens no Período</p>
            <p className="text-2xl font-bold text-dark-text">{formatNumber(periodItems)}</p>
          </div>
          <div className="p-3 bg-purple-500/10 rounded-xl text-purple-300">
            <Package size={22} />
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
        <h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">
          Gasto por {isSingleDayRange ? 'Horário' : 'Data'}
        </h3>
        {chartData.length === 0 ? (
          <div className="flex h-[320px] items-center justify-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
            Nenhum gasto no período selecionado.
          </div>
        ) : (
          <div className="h-[320px] w-full">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: isSingleDayRange ? 24 : 80 }}>
                <defs>
                  <linearGradient id="clientSpendGradient" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor={CHART_DETAIL_BAR_COLOR} stopOpacity={0.38} />
                    <stop offset="95%" stopColor={CHART_DETAIL_BAR_COLOR} stopOpacity={0.04} />
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
                <XAxis
                  dataKey="date"
                  stroke={CHART_AXIS_COLOR}
                  fontSize={10}
                  tickLine={false}
                  axisLine={false}
                  interval={isSingleDayRange ? 2 : 0}
                  angle={isSingleDayRange ? 0 : -45}
                  textAnchor={isSingleDayRange ? 'middle' : 'end'}
                  height={isSingleDayRange ? 24 : 80}
                />
                <YAxis stroke={CHART_AXIS_COLOR} fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => formatCurrency(Number(value))} />
                <Tooltip content={<CustomTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />
                <Area
                  type="monotone"
                  dataKey="value"
                  stroke={CHART_DETAIL_BAR_COLOR}
                  strokeWidth={2.25}
                  fill="url(#clientSpendGradient)"
                  dot={{ r: 3, strokeWidth: 2, fill: 'var(--color-dark-card)', stroke: CHART_DETAIL_BAR_COLOR }}
                  activeDot={{ r: 5, strokeWidth: 2, fill: CHART_DETAIL_BAR_COLOR, stroke: 'var(--color-dark-card)' }}
                />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        )}
      </div>

      <section className="space-y-4">
        <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
          <div>
            <h3 className="text-lg font-bold text-zinc-900 dark:text-dark-text">Padrão de Compra</h3>
            <p className="mt-1 text-sm font-medium text-zinc-500 dark:text-dark-muted">Quando este cliente costuma comprar, separando histórico de data e horário confiável.</p>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
          <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
            <div className="mb-4 flex items-start justify-between gap-4">
              <div>
                <h4 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Dia</h4>
                {hasWeekdayPattern && topWeekday && (
                  <p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs font-semibold text-zinc-600 dark:text-dark-muted">
                    <span className="h-2 w-2 rounded-full" style={{ backgroundColor: WEEKDAY_BAR_COLOR }} />
                    <span>Dia mais forte: <span className="text-zinc-900 dark:text-dark-text">{topWeekday.label}</span></span>
                    <span className="text-zinc-400 dark:text-dark-border">·</span>
                    <span>{topWeekday.value} {topWeekday.value === 1 ? 'pedido' : 'pedidos'}</span>
                    <span className="text-zinc-400 dark:text-dark-border">·</span>
                    <span>{getPatternShare(topWeekday.value, weekdayPatternTotal)}%</span>
                  </p>
                )}
              </div>
              <span className="shrink-0 rounded-full border border-zinc-200 bg-zinc-100 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-600 dark:border-dark-border dark:bg-white/5 dark:text-dark-muted">
                {purchaseWeekdayRangeLabel}
              </span>
            </div>
            {hasWeekdayPattern ? (
              <div className="h-52">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={purchaseWeekdays} margin={{ top: 8, right: 10, left: -18, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
                    <XAxis dataKey="label" stroke={CHART_AXIS_COLOR} fontSize={11} tickLine={false} axisLine={false} />
                    <YAxis allowDecimals={false} stroke={CHART_AXIS_COLOR} fontSize={11} tickLine={false} axisLine={false} />
                    <Tooltip content={<PatternTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />
                    <Bar dataKey="value" radius={[4, 4, 0, 0]}>
                      {purchaseWeekdays.map(day => (
                        <Cell key={`weekday-${day.label}`} fill={WEEKDAY_BAR_COLOR} fillOpacity={0.62} stroke={WEEKDAY_BAR_COLOR} strokeOpacity={0.9} strokeWidth={1.25} />
                      ))}
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            ) : (
              <div className="flex h-56 items-center justify-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
                Sem compras no período.
              </div>
            )}
          </div>

          <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
            <div className="mb-4 flex items-start justify-between gap-4">
              <div>
                <h4 className="text-sm font-bold uppercase tracking-widest text-zinc-500 dark:text-dark-muted">Compras por Horário</h4>
                {hasHourPattern && topHour && (
                  <p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs font-semibold text-zinc-600 dark:text-dark-muted">
                    <span className="h-2 w-2 rounded-full" style={{ backgroundColor: HOUR_BAR_COLOR }} />
                    <span>Horário mais forte: <span className="text-zinc-900 dark:text-dark-text">{topHour.label}</span></span>
                    <span className="text-zinc-400 dark:text-dark-border">·</span>
                    <span>{topHour.value} {topHour.value === 1 ? 'pedido' : 'pedidos'}</span>
                    <span className="text-zinc-400 dark:text-dark-border">·</span>
                    <span>{getPatternShare(topHour.value, hourPatternTotal)}%</span>
                  </p>
                )}
              </div>
              <span className="shrink-0 rounded-full border border-zinc-200 bg-zinc-100 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wide text-zinc-600 dark:border-dark-border dark:bg-white/5 dark:text-dark-muted">
                {purchaseHourRangeLabel}
              </span>
            </div>
            {hasHourPattern ? (
              <div className="h-52">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={purchaseHours} margin={{ top: 8, right: 10, left: -18, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke={CHART_GRID_COLOR} vertical={false} />
                    <XAxis
                      dataKey="label"
                      stroke={CHART_AXIS_COLOR}
                      fontSize={10}
                      tickLine={false}
                      axisLine={false}
                      interval={0}
                      tickFormatter={(value) => Number(String(value).replace('h', '')) % 3 === 0 ? String(value) : ''}
                    />
                    <YAxis allowDecimals={false} stroke={CHART_AXIS_COLOR} fontSize={11} tickLine={false} axisLine={false} />
                    <Tooltip content={<PatternTooltip />} cursor={{ fill: CHART_CURSOR_COLOR }} />
                    <Bar dataKey="value" radius={[4, 4, 0, 0]}>
                      {purchaseHours.map(hour => (
                        <Cell key={`hour-${hour.label}`} fill={HOUR_BAR_COLOR} fillOpacity={0.56} stroke={HOUR_BAR_COLOR} strokeOpacity={0.86} strokeWidth={1.1} />
                      ))}
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            ) : (
              <div className="flex h-56 items-center justify-center px-6 text-center text-sm font-semibold text-zinc-500 dark:text-dark-muted">
                Sem horário de compra disponível para os últimos 60 dias.
              </div>
            )}
          </div>
        </div>
      </section>
{/* Orders List */}
<div className="flex flex-col gap-6">
  {paginatedOrders.length === 0 ? (
    <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-8 text-center shadow-sm">
      <p className="text-sm font-bold text-zinc-900 dark:text-dark-text">Nenhum pedido no período selecionado.</p>
      <p className="mt-1 text-sm text-zinc-500 dark:text-dark-muted">Altere o filtro de data para ver outros pedidos deste cliente.</p>
    </div>
  ) : paginatedOrders.map((group) => {
    const isExpanded = expandedOrderIds.has(group.orderId);

    return (
      <div key={group.orderId} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
        <button
          type="button"
          onClick={() => toggleOrder(group.orderId)}
          aria-expanded={isExpanded}
          className="flex w-full cursor-pointer items-center justify-between gap-4 bg-zinc-50/50 px-4 py-3 text-left transition-colors hover:bg-zinc-100/80 dark:bg-dark-header dark:hover:bg-dark-input/60"
        >
          <div className="flex min-w-0 items-center gap-3">
            <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-zinc-200 bg-white text-brand-primary dark:border-dark-border dark:bg-dark-card">
              <Tag className="h-4 w-4" />
            </span>
            <div className="min-w-0">
              <h2 className="truncate text-sm font-bold uppercase tracking-wider text-zinc-700 dark:text-dark-text">
                Pedido ID: {group.orderId}
              </h2>
              <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-bold text-zinc-400 dark:text-dark-muted">
                <span>{group.items.length} {group.items.length === 1 ? 'item' : 'itens'}</span>
                {group.date && (
                  <span className="inline-flex items-center gap-1">
                    <Clock className="h-3 w-3" />
                    {group.date}
                  </span>
                )}
              </div>
            </div>
          </div>

          <div className="flex shrink-0 items-center gap-3">
            <div className="text-right">
              <p className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 dark:text-dark-muted">Total</p>
              <p className="text-sm font-bold text-brand-primary">{formatCurrency(group.orderTotal)}</p>
            </div>
            <span className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-500 transition-colors dark:border-dark-border dark:bg-dark-card dark:text-dark-muted">
              <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
            </span>
          </div>
        </button>

        {isExpanded && (
          <div className="divide-y divide-zinc-100 dark:divide-dark-border">
            {group.items.map((order, index) => {
              const metadata = getOrderMetadata(order);

              return (
                <div key={`${order.ID_Produto}-${index}`} className="px-4 py-2 flex flex-col md:flex-row md:items-center justify-between gap-3 hover:bg-zinc-50/50 dark:hover:bg-dark-input/30 transition-colors">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-0.5">
                      <div className="flex items-center gap-1">
                        <Tag className="w-3 h-3 text-zinc-400 dark:text-dark-muted" />
                        <span className="text-[10px] font-bold text-zinc-400 dark:text-dark-muted">ID: {order.ID_Produto}</span>
                      </div>
                      {order.Data_Pedido && (
                        <div className="flex items-center gap-1 ml-2">
                          <Clock className="w-3 h-3 text-zinc-400 dark:text-dark-muted" />
                          <span className="text-[10px] font-bold text-zinc-400 dark:text-dark-muted">
                            Comprado: {order.Data_Pedido}
                          </span>
                        </div>
                      )}
                    </div>
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-dark-text truncate mb-1">{order.Descricao_Produto}</h3>
                    
                    <div className="flex gap-4">
                      <div className="flex items-center gap-1.5 text-[11px]">
                        <Package className="w-3.5 h-3.5 text-zinc-400 dark:text-dark-muted" />
                        <span className="text-zinc-500 dark:text-dark-muted font-medium">Qtd: <span className="text-zinc-900 dark:text-dark-text font-bold">{order.Quantidade}</span></span>
                      </div>
                      <div className="flex items-center gap-1.5 text-[11px]">
                        <DollarSign className="w-3.5 h-3.5 text-zinc-400 dark:text-dark-muted" />
                        <span className="text-zinc-500 dark:text-dark-muted font-medium">Preço: <span className="text-zinc-900 dark:text-dark-text font-bold">{formatCurrency(order.Valor_Unitario)}</span></span>
                      </div>
                    </div>
                    {metadata.length > 0 && (
                      <div className="mt-2 flex flex-wrap gap-1.5">
                        {metadata.map(value => (
                          <span key={value} className="max-w-full break-all rounded-md border border-zinc-200 dark:border-dark-border px-2 py-0.5 text-[10px] font-bold text-zinc-500 dark:text-dark-muted">
                            {value}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                  
                  <div className="text-right shrink-0">
                    <p className="text-[10px] font-bold text-zinc-400 dark:text-dark-muted uppercase tracking-widest mb-0.5">Subtotal</p>
                    <p className="text-base font-bold text-zinc-900 dark:text-dark-text">{formatCurrency(order.Quantidade * order.Valor_Unitario)}</p>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    );
  })}
      </div>

      <PaginationControls
        totalItems={groupedOrders.length}
        currentPage={safeCurrentPage}
        totalPages={totalPages}
        pageSize={ordersPerPage}
        pageSizeOptions={[5, 10, 20, 50]}
        itemLabel="pedidos"
        pageSizeLabel="pedidos por página"
        startIndex={startIndex}
        endIndex={Math.min(startIndex + ordersPerPage, groupedOrders.length)}
        onPageChange={setCurrentPage}
        onPageSizeChange={(pageSize) => {
          setOrdersPerPage(pageSize);
          setCurrentPage(1);
        }}
        className="px-6 py-4 border border-zinc-200 dark:border-dark-border rounded-2xl bg-white dark:bg-dark-card"
      />
      </div>
    </div>
  );
};

export default ClientDetails;