import { ArrowLeft, TrendingUp, ShoppingCart, DollarSign, Receipt } from 'lucide-react';
import { Link } from 'react-router-dom';
import { useDailySummary, useTodaySales } from '@/hooks/useSales';

export function ReportsPage() {
  const { data: summary, isLoading: summaryLoading } = useDailySummary();
  const { data: sales, isLoading: salesLoading } = useTodaySales();

  const isLoading = summaryLoading || salesLoading;

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b px-4 py-3 flex items-center gap-3 safe-top">
        <Link to="/" className="p-2 hover:bg-gray-100 rounded-lg">
          <ArrowLeft className="w-6 h-6" />
        </Link>
        <h1 className="font-bold text-lg">Reporte del dia</h1>
      </header>

      {isLoading ? (
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full" />
        </div>
      ) : (
        <div className="p-4 space-y-4">
          {/* Summary Cards - aligned with backend TodaySummary */}
          <div className="grid grid-cols-2 gap-4">
            <SummaryCard
              icon={<DollarSign className="w-6 h-6 text-green-600" />}
              label="Ingresos"
              value={`$${summary?.totalRevenue?.toFixed(2) || '0.00'}`}
              bgColor="bg-green-50"
            />
            <SummaryCard
              icon={<ShoppingCart className="w-6 h-6 text-blue-600" />}
              label="Ventas"
              value={summary?.totalSales?.toString() || '0'}
              bgColor="bg-blue-50"
            />
            <SummaryCard
              icon={<Receipt className="w-6 h-6 text-yellow-600" />}
              label="IVA recaudado"
              value={`$${summary?.totalTax?.toFixed(2) || '0.00'}`}
              bgColor="bg-yellow-50"
            />
            <SummaryCard
              icon={<TrendingUp className="w-6 h-6 text-purple-600" />}
              label="Ticket promedio"
              value={`$${summary?.avgTicket?.toFixed(2) || '0.00'}`}
              bgColor="bg-purple-50"
            />
          </div>

          {/* Recent sales */}
          <div className="card">
            <div className="p-4 border-b">
              <h2 className="font-bold text-gray-900">Ventas de hoy</h2>
            </div>
            <div className="divide-y">
              {sales?.length === 0 ? (
                <div className="p-8 text-center text-gray-400">
                  No hay ventas registradas hoy
                </div>
              ) : (
                sales?.slice(0, 10).map((sale) => (
                  <div key={sale.id} className="p-4 flex items-center justify-between">
                    <div>
                      <p className="font-medium">#{sale.ticketNumber}</p>
                      <p className="text-sm text-gray-500">
                        {new Date(sale.createdAt).toLocaleTimeString('es-MX', {
                          hour: '2-digit',
                          minute: '2-digit',
                        })}
                        {' - '}
                        {sale.items.length} productos
                      </p>
                    </div>
                    <div className="text-right">
                      <p className={`font-bold ${sale.status === 'cancelled' ? 'text-red-500 line-through' : 'text-primary-600'}`}>
                        ${sale.total.toFixed(2)}
                      </p>
                      {sale.status === 'cancelled' && (
                        <span className="text-xs text-red-500">Cancelada</span>
                      )}
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

interface SummaryCardProps {
  icon: React.ReactNode;
  label: string;
  value: string;
  bgColor: string;
}

function SummaryCard({ icon, label, value, bgColor }: SummaryCardProps) {
  return (
    <div className="card p-4">
      <div className={`w-12 h-12 ${bgColor} rounded-xl flex items-center justify-center mb-3`}>
        {icon}
      </div>
      <p className="text-sm text-gray-500">{label}</p>
      <p className="text-2xl font-bold text-gray-900">{value}</p>
    </div>
  );
}
