import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { useAuthStore } from '@/stores/useAuthStore';
import { Users, FolderKanban, Wand2, Image } from 'lucide-react';

const stats = [
  {
    name: 'Clientes',
    value: '0',
    icon: Users,
    description: 'Clientes activos',
  },
  {
    name: 'Proyectos',
    value: '0',
    icon: FolderKanban,
    description: 'Proyectos en curso',
  },
  {
    name: 'Generaciones',
    value: '0',
    icon: Wand2,
    description: 'Este mes',
  },
  {
    name: 'Assets',
    value: '0',
    icon: Image,
    description: 'En biblioteca',
  },
];

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

  return (
    <div className="space-y-6">
      {/* Welcome */}
      <div>
        <h1 className="text-3xl font-bold">
          Hola, {user?.first_name || 'Usuario'}
        </h1>
        <p className="text-muted-foreground">
          Bienvenido a Platform Marketing Content
        </p>
      </div>

      {/* Stats Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <Card key={stat.name}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
              <stat.icon className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{stat.value}</div>
              <p className="text-xs text-muted-foreground">
                {stat.description}
              </p>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Quick Actions */}
      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Actividad Reciente</CardTitle>
            <CardDescription>Ultimas acciones en la plataforma</CardDescription>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">
              No hay actividad reciente
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Uso del Plan</CardTitle>
            <CardDescription>Consumo del mes actual</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span>Generaciones</span>
                <span>0 / 100</span>
              </div>
              <div className="h-2 rounded-full bg-muted">
                <div className="h-2 rounded-full bg-primary" style={{ width: '0%' }} />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
