'use client';

import { DeadlineMetrics } from '@/services/analytics/deadline-analytics';
import { Card } from '@/components/ui/Card';
import { Emoji } from '@/components/ui/Emoji';

interface DeadlineSummaryCardProps {
  metrics: DeadlineMetrics;
}

export function DeadlineSummaryCard({ metrics }: DeadlineSummaryCardProps) {
  const { summary } = metrics;

  const summaryItems = [
    {
      label: 'En retard',
      count: summary.overdueCount,
      icon: '⏰',
      color: 'var(--destructive)',
      bgColor: 'color-mix(in srgb, var(--destructive) 10%, transparent)',
    },
    {
      label: 'Critique (0-2j)',
      count: summary.criticalCount,
      icon: '🚨',
      color: 'var(--accent)',
      bgColor: 'color-mix(in srgb, var(--accent) 10%, transparent)',
    },
    {
      label: 'Attention (3-7j)',
      count: summary.warningCount,
      icon: '⚠️',
      color: 'var(--yellow)',
      bgColor: 'color-mix(in srgb, var(--yellow) 10%, transparent)',
    },
    {
      label: 'À venir (8-14j)',
      count: summary.upcomingCount,
      icon: '📅',
      color: 'var(--blue)',
      bgColor: 'color-mix(in srgb, var(--blue) 10%, transparent)',
    },
  ];

  return (
    <Card variant="glass" className="p-6 hover:shadow-lg transition-shadow">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold">Répartition des Échéances</h3>
        <div className="text-sm text-[var(--muted-foreground)]">
          {summary.totalWithDeadlines} total
        </div>
      </div>

      <div className="space-y-3">
        {summaryItems.map((item, index) => (
          <div key={index} className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div
                className="w-8 h-8 rounded-full flex items-center justify-center text-sm"
                style={{ backgroundColor: item.bgColor }}
              >
                <Emoji emoji={item.icon} />
              </div>
              <span className="text-sm font-medium">{item.label}</span>
            </div>
            <div className="text-lg font-bold" style={{ color: item.color }}>
              {item.count}
            </div>
          </div>
        ))}

        {/* Indicateur de performance */}
        <div className="pt-3 border-t border-[var(--border)]">
          <div className="flex items-center justify-between text-sm">
            <span className="text-[var(--muted-foreground)]">
              Tâches sous contrôle:
            </span>
            <span className="font-medium">
              {summary.totalWithDeadlines -
                summary.overdueCount -
                summary.criticalCount}
              /{summary.totalWithDeadlines}
            </span>
          </div>
          <div
            className="w-full rounded-full h-2 mt-2"
            style={{ backgroundColor: 'var(--gray-light)' }}
          >
            <div
              className="bg-green-500/80 h-2 rounded-full transition-all duration-300"
              style={{
                width: `${
                  summary.totalWithDeadlines > 0
                    ? Math.round(
                        ((summary.totalWithDeadlines -
                          summary.overdueCount -
                          summary.criticalCount) /
                          summary.totalWithDeadlines) *
                          100
                      )
                    : 100
                }%`,
              }}
            />
          </div>
        </div>
      </div>
    </Card>
  );
}
