import { isOverdue } from '../hooks/useAssets';
import { Card, CardContent } from '@/components/ui/card';

const STAT_CARDS = [
  { key: 'offen', color: '#DC2626', label: 'Offen' },
  { key: 'bearbeitung', color: '#F59E0B', label: 'In Bearbeitung' },
  { key: 'entsorgt', color: '#6B7280', label: 'Entsorgt' },
  { key: 'overdue', color: '#2563EB', label: 'Überfällig (>7 Tage)' },
];

export default function Dashboard({ assets, statusFilter, onStatusFilterChange }) {

  const counts = {
    offen: assets.filter((a) => a.status === 'offen').length,
    bearbeitung: assets.filter((a) => a.status === 'in_bearbeitung').length,
    entsorgt: assets.filter((a) => a.status === 'entsorgt').length,
    overdue: assets.filter(isOverdue).length,
  };

  const handleCardClick = (key) => {
    onStatusFilterChange?.(statusFilter === key ? null : key);
  };

  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-4">
      {STAT_CARDS.map(({ key, color, label }) => {
        const isSelected = statusFilter === key;
        return (
          <Card
            key={key}
            className="py-0 cursor-pointer transition-all duration-200 hover:opacity-90"
            style={{
              borderTop: `3px solid ${color}`,
              ...(isSelected && {
                backgroundColor: `${color}30`,
              }),
            }}
            onClick={() => handleCardClick(key)}
          >
            <CardContent className="py-5">
              <div className="text-3xl font-bold tracking-tight">{counts[key]}</div>
              <p className={`text-sm mt-1 ${isSelected ? 'text-foreground/90' : 'text-muted-foreground'}`}>{label}</p>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}