import {
  TrendingUp,
  TrendingDown,
  Users,
  ShoppingCart,
  DollarSign,
  Package,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@components/molecules/Card';
import { Badge } from '@components/atoms/Badge';
import { useAuthStore } from '@stores/useAuthStore';
import { formatCurrency } from '@utils/formatters';

const stats = [
  {
    name: 'Ventas del mes',
    value: 125000,
    change: 12.5,
    changeType: 'increase' as const,
    icon: DollarSign,
    format: 'currency',
  },
  {
    name: 'Pedidos',
    value: 48,
    change: 8.2,
    changeType: 'increase' as const,
    icon: ShoppingCart,
    format: 'number',
  },
  {
    name: 'Clientes activos',
    value: 324,
    change: -2.4,
    changeType: 'decrease' as const,
    icon: Users,
    format: 'number',
  },
  {
    name: 'Productos en stock',
    value: 1250,
    change: 4.1,
    changeType: 'increase' as const,
    icon: Package,
    format: 'number',
  },
];

const recentOrders = [
  { id: 'SO-001234', customer: 'Empresa ABC', amount: 15000, status: 'sale' },
  { id: 'SO-001235', customer: 'Distribuidora XYZ', amount: 8500, status: 'draft' },
  { id: 'SO-001236', customer: 'Comercial 123', amount: 22000, status: 'done' },
  { id: 'SO-001237', customer: 'Industrias DEF', amount: 12500, status: 'sent' },
  { id: 'SO-001238', customer: 'Servicios GHI', amount: 5800, status: 'cancelled' },
];

const statusConfig: Record<string, { label: string; variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' }> = {
  draft: { label: 'Borrador', variant: 'default' },
  sent: { label: 'Cotización Enviada', variant: 'primary' },
  sale: { label: 'Orden de Venta', variant: 'success' },
  done: { label: 'Completado', variant: 'success' },
  cancelled: { label: 'Cancelado', variant: 'danger' },
};

export default function DashboardPage() {
  const { user } = useAuthStore();

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">
          Bienvenido, {user?.firstName}
        </h1>
        <p className="mt-1 text-sm text-gray-500">
          Aquí tienes un resumen de tu negocio
        </p>
      </div>

      {/* Stats */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <Card key={stat.name}>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-gray-500">{stat.name}</p>
                  <p className="mt-1 text-2xl font-semibold text-gray-900">
                    {stat.format === 'currency'
                      ? formatCurrency(stat.value)
                      : stat.value.toLocaleString()}
                  </p>
                </div>
                <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary-50">
                  <stat.icon className="h-6 w-6 text-primary-600" />
                </div>
              </div>
              <div className="mt-4 flex items-center">
                {stat.changeType === 'increase' ? (
                  <TrendingUp className="h-4 w-4 text-success-500" />
                ) : (
                  <TrendingDown className="h-4 w-4 text-danger-500" />
                )}
                <span
                  className={`ml-1 text-sm font-medium ${
                    stat.changeType === 'increase'
                      ? 'text-success-600'
                      : 'text-danger-600'
                  }`}
                >
                  {stat.changeType === 'increase' ? '+' : ''}
                  {stat.change}%
                </span>
                <span className="ml-2 text-sm text-gray-500">vs mes anterior</span>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Recent Orders */}
      <Card>
        <CardHeader>
          <CardTitle>Pedidos recientes</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                    Pedido
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                    Cliente
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                    Monto
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
                    Estado
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200 bg-white">
                {recentOrders.map((order) => (
                  <tr key={order.id} className="hover:bg-gray-50">
                    <td className="whitespace-nowrap px-6 py-4 text-sm font-medium text-primary-600">
                      {order.id}
                    </td>
                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
                      {order.customer}
                    </td>
                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-900">
                      {formatCurrency(order.amount)}
                    </td>
                    <td className="whitespace-nowrap px-6 py-4">
                      <Badge variant={statusConfig[order.status]?.variant}>
                        {statusConfig[order.status]?.label}
                      </Badge>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
