"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Users,
  MessageSquare,
  CreditCard,
  TrendingUp,
  TrendingDown,
  Activity,
} from "lucide-react";
import { cn } from "@/lib/utils";

interface MetricCardProps {
  title: string;
  value: string;
  change?: {
    value: number;
    type: "increase" | "decrease";
  };
  icon: React.ComponentType<{ className?: string }>;
  description?: string;
}

function MetricCard({
  title,
  value,
  change,
  icon: Icon,
  description,
}: MetricCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">
          {title}
        </CardTitle>
        <Icon className="h-4 w-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        {description && (
          <p className="text-xs text-muted-foreground mt-1">{description}</p>
        )}
        {change && (
          <div className="flex items-center space-x-2 text-xs text-muted-foreground mt-1">
            {change.type === "increase" ? (
              <TrendingUp className="h-3 w-3 text-green-500" />
            ) : (
              <TrendingDown className="h-3 w-3 text-red-500" />
            )}
            <span
              className={cn(
                change.type === "increase" ? "text-green-500" : "text-red-500"
              )}
            >
              {change.type === "increase" ? "+" : "-"}
              {change.value}%
            </span>
            <span>par rapport au mois dernier</span>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

interface MetricCardsProps {
  metrics: {
    totalUsers: number;
    activeUsers: number;
    totalConversations: number;
    totalMessages: number;
    totalTokensConsumed: number;
    totalCreditsUsed: number;
  };
}

export function MetricCards({ metrics }: MetricCardsProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <MetricCard
        title="Utilisateurs totaux"
        value={metrics.totalUsers.toLocaleString()}
        change={{ value: 12, type: "increase" }}
        icon={Users}
        description={`${metrics.activeUsers} actifs cette semaine`}
      />
      <MetricCard
        title="Conversations"
        value={metrics.totalConversations.toLocaleString()}
        change={{ value: 8, type: "increase" }}
        icon={MessageSquare}
        description={`${metrics.totalMessages.toLocaleString()} messages au total`}
      />
      <MetricCard
        title="Tokens consommés"
        value={metrics.totalTokensConsumed.toLocaleString()}
        change={{ value: 15, type: "increase" }}
        icon={Activity}
        description="Tokens utilisés au total"
      />
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium text-muted-foreground">
            Crédits totaux
          </CardTitle>
          <CreditCard className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">
            {metrics.totalCreditsUsed.toLocaleString()}
          </div>
          <p className="text-xs text-muted-foreground mt-1">
            crédits disponibles
          </p>
          <div className="flex items-center space-x-2 text-xs text-muted-foreground mt-1">
            <TrendingUp className="h-3 w-3 text-green-500" />
            <span className="text-green-500">+23%</span>
            <span>par rapport au mois dernier</span>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}