"use client";

import { TrendingUp, TrendingDown, FileText, AlertCircle } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import type { TranslationStatsData } from "./types";

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

export function StatsOverview({ data, isLoading }: StatsOverviewProps) {
  if (isLoading) {
    return (
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {[1, 2, 3, 4].map((i) => (
          <Card key={i}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <div className="h-4 w-24 animate-pulse rounded bg-muted" />
              <div className="h-4 w-4 animate-pulse rounded bg-muted" />
            </CardHeader>
            <CardContent>
              <div className="h-8 w-16 animate-pulse rounded bg-muted" />
              <div className="mt-2 h-3 w-20 animate-pulse rounded bg-muted" />
            </CardContent>
          </Card>
        ))}
      </div>
    );
  }

  if (!data) {
    return null;
  }

  const diff = data.total_translations - data.total_translations_last_period;
  const trendUp = diff >= 0;
  const trendPercent = data.total_translations_last_period > 0
    ? Math.abs((diff / data.total_translations_last_period) * 100).toFixed(1)
    : "0";

  const periodLabels: Record<string, string> = {
    today: "Aujourd'hui",
    week: "Cette Semaine",
    month: "Ce Mois",
  };

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">
            Traductions {periodLabels[data.period]}
          </CardTitle>
          <FileText className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{data.total_translations}</div>
          <div className="flex items-center gap-1 text-xs text-muted-foreground">
            {trendUp ? (
              <TrendingUp className="h-3 w-3 text-green-500" />
            ) : (
              <TrendingDown className="h-3 w-3 text-red-500" />
            )}
            <span className={trendUp ? "text-green-500" : "text-red-500"}>
              {trendUp ? "+" : ""}{diff}
            </span>
            <span>({trendPercent}%)</span>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Réussies</CardTitle>
          <Badge variant="default" className="bg-green-500/10 text-green-500 hover:bg-green-500/20">
            OK
          </Badge>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{data.success_count}</div>
          <p className="text-xs text-muted-foreground">
            {(100 - data.error_rate).toFixed(1)}% de réussite
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Erreurs</CardTitle>
          <AlertCircle className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{data.error_count}</div>
          <p className="text-xs text-muted-foreground">
            Taux d&apos;erreur: {data.error_rate.toFixed(1)}%
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Période Précédente</CardTitle>
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{data.total_translations_last_period}</div>
          <p className="text-xs text-muted-foreground">
            Comparaison
          </p>
        </CardContent>
      </Card>
    </div>
  );
}
