'use client';

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

interface DeadlineRiskCardProps {
  metrics: DeadlineMetrics;
}

export function DeadlineRiskCard({ metrics }: DeadlineRiskCardProps) {
  const riskAnalysis = DeadlineAnalyticsService.calculateRiskMetrics(metrics);

  const getRiskIcon = (level: string) => {
    switch (level) {
      case 'critical':
        return '🔴';
      case 'high':
        return '🟠';
      case 'medium':
        return '🟡';
      case 'low':
        return '🟢';
      default:
        return '⚪';
    }
  };

  const getRiskColor = (level: string) => {
    switch (level) {
      case 'critical':
        return { color: 'var(--destructive)' };
      case 'high':
        return { color: 'var(--accent)' };
      case 'medium':
        return { color: 'var(--yellow)' };
      case 'low':
        return { color: 'var(--green)' };
      default:
        return { color: 'var(--muted-foreground)' };
    }
  };

  const getRiskBgColor = (level: string) => {
    switch (level) {
      case 'critical':
        return {
          backgroundColor:
            'color-mix(in srgb, var(--destructive) 10%, transparent)',
          borderColor:
            'color-mix(in srgb, var(--destructive) 30%, var(--border))',
        };
      case 'high':
        return {
          backgroundColor: 'color-mix(in srgb, var(--accent) 10%, transparent)',
          borderColor: 'color-mix(in srgb, var(--accent) 30%, var(--border))',
        };
      case 'medium':
        return {
          backgroundColor: 'color-mix(in srgb, var(--yellow) 10%, transparent)',
          borderColor: 'color-mix(in srgb, var(--yellow) 30%, var(--border))',
        };
      case 'low':
        return {
          backgroundColor: 'color-mix(in srgb, var(--green) 10%, transparent)',
          borderColor: 'color-mix(in srgb, var(--green) 30%, var(--border))',
        };
      default:
        return {
          backgroundColor: 'color-mix(in srgb, var(--muted) 10%, transparent)',
          borderColor: 'color-mix(in srgb, var(--muted) 30%, var(--border))',
        };
    }
  };

  return (
    <Card
      variant="glass"
      className={`p-6 ${getRiskBgColor(riskAnalysis.riskLevel)} transition-all hover:shadow-lg`}
    >
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <span className="text-2xl">
            <Emoji emoji={getRiskIcon(riskAnalysis.riskLevel)} size={25} />
          </span>
          <h3 className="text-lg font-semibold">Niveau de Risque</h3>
        </div>
        <div
          className="text-3xl font-bold"
          style={getRiskColor(riskAnalysis.riskLevel)}
        >
          {riskAnalysis.riskScore}
        </div>
      </div>

      <div className="space-y-3">
        {/* Barre de risque */}
        <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
          <div
            className={`h-3 rounded-full transition-all duration-500 ${
              riskAnalysis.riskLevel === 'critical'
                ? 'bg-red-500/80'
                : riskAnalysis.riskLevel === 'high'
                  ? 'bg-orange-500/80'
                  : riskAnalysis.riskLevel === 'medium'
                    ? 'bg-yellow-500/80'
                    : 'bg-green-500/80'
            }`}
            style={{ width: `${Math.min(riskAnalysis.riskScore, 100)}%` }}
          />
        </div>

        {/* Détails des risques */}
        <div className="grid grid-cols-2 gap-2 text-sm">
          <div className="flex justify-between">
            <span className="text-[var(--muted-foreground)]">En retard:</span>
            <span
              className="font-medium"
              style={{ color: 'var(--destructive)' }}
            >
              {metrics.summary.overdueCount}
            </span>
          </div>
          <div className="flex justify-between">
            <span className="text-[var(--muted-foreground)]">Critique:</span>
            <span className="font-medium" style={{ color: 'var(--accent)' }}>
              {metrics.summary.criticalCount}
            </span>
          </div>
        </div>

        {/* Recommandation */}
        <div className="pt-2 border-t border-[var(--border)]">
          <p className="text-xs text-[var(--muted-foreground)] leading-relaxed">
            {riskAnalysis.recommendation}
          </p>
        </div>
      </div>
    </Card>
  );
}
