"use client";

import { LayoutGrid, TrendingUp, DollarSign, Clock } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Project } from '@/types/project'; // o la ruta donde pongas types.ts

interface StatsOverviewProps {
  projects: Project[];
}

export default function StatsOverview({ projects }: StatsOverviewProps) {
  const stats = {
    total: projects.length,
    activos: projects.filter(p => p.status === 'en_progreso').length,
    totalBudget: projects.reduce((acc, p) => acc + p.budget, 0),
    avgProgress: Math.round(projects.reduce((acc, p) => acc + p.progress, 0) / projects.length)
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <Card className="border-gray-200 hover:shadow-md transition-shadow">
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium text-gray-600">Total Proyectos</CardTitle>
          <LayoutGrid className="w-4 h-4 text-gray-400" />
        </CardHeader>
        <CardContent>
          <div className="text-3xl font-bold text-gray-900">{stats.total}</div>
          <p className="text-xs text-gray-500 mt-1">Todos los proyectos</p>
        </CardContent>
      </Card>

      <Card className="border-gray-200 hover:shadow-md transition-shadow">
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium text-gray-600">Activos</CardTitle>
          <TrendingUp className="w-4 h-4 text-blue-500" />
        </CardHeader>
        <CardContent>
          <div className="text-3xl font-bold text-gray-900">{stats.activos}</div>
          <p className="text-xs text-gray-500 mt-1">En progreso ahora</p>
        </CardContent>
      </Card>

      <Card className="border-gray-200 hover:shadow-md transition-shadow">
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium text-gray-600">Presupuesto Total</CardTitle>
          <DollarSign className="w-4 h-4 text-green-500" />
        </CardHeader>
        <CardContent>
          <div className="text-3xl font-bold text-gray-900">
            €{(stats.totalBudget / 1000).toFixed(0)}k
          </div>
          <p className="text-xs text-gray-500 mt-1">Suma de presupuestos</p>
        </CardContent>
      </Card>

      <Card className="border-gray-200 hover:shadow-md transition-shadow">
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <CardTitle className="text-sm font-medium text-gray-600">Progreso Medio</CardTitle>
          <Clock className="w-4 h-4 text-purple-500" />
        </CardHeader>
        <CardContent>
          <div className="text-3xl font-bold text-gray-900">{stats.avgProgress}%</div>
          <p className="text-xs text-gray-500 mt-1">De todos los proyectos</p>
        </CardContent>
      </Card>
    </div>
  );
}