"use client";

import { FileSpreadsheet, FileText, Presentation } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import type { TranslationStatsData, FormatBreakdownItem } from "./types";

interface FormatBreakdownChartProps {
  data: TranslationStatsData | null;
  isLoading: boolean;
}

const formatConfig: Record<string, { label: string; icon: React.ReactNode; color: string }> = {
  xlsx: {
    label: "Excel (.xlsx)",
    icon: <FileSpreadsheet className="h-4 w-4 text-green-500" />,
    color: "bg-green-500",
  },
  docx: {
    label: "Word (.docx)",
    icon: <FileText className="h-4 w-4 text-blue-500" />,
    color: "bg-blue-500",
  },
  pptx: {
    label: "PowerPoint (.pptx)",
    icon: <Presentation className="h-4 w-4 text-orange-500" />,
    color: "bg-orange-500",
  },
};

export function FormatBreakdownChart({ data, isLoading }: FormatBreakdownChartProps) {
  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Répartition par Format</CardTitle>
          <CardDescription>Chargement...</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[1, 2, 3].map((i) => (
              <div key={i} className="space-y-2">
                <div className="h-4 w-20 animate-pulse rounded bg-muted" />
                <div className="h-2 w-full animate-pulse rounded bg-muted" />
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!data?.format_breakdown) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Répartition par Format</CardTitle>
          <CardDescription>Aucune donnée disponible</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-center py-8 text-muted-foreground">
            <p className="text-sm">Aucune donnée de format</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  const formats = Object.entries(data.format_breakdown).filter(
    ([, value]) => value.count > 0
  );

  return (
    <Card>
      <CardHeader>
        <CardTitle>Répartition par Format</CardTitle>
        <CardDescription>
          Distribution des traductions par type de fichier
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {formats.map(([format, value]) => {
            const config = formatConfig[format] || {
              label: format.toUpperCase(),
              icon: <FileText className="h-4 w-4" />,
              color: "bg-gray-500",
            };

            return (
              <div key={format} className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <div className="flex items-center gap-2">
                    {config.icon}
                    <span className="font-medium">{config.label}</span>
                  </div>
                  <span className="text-muted-foreground">
                    {value.count} ({value.percentage.toFixed(1)}%)
                  </span>
                </div>
                <div className="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
                  <div
                    className={`h-full ${config.color} transition-all duration-500`}
                    style={{ width: `${value.percentage}%` }}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}
