"use client";

import { motion } from "framer-motion";
import { HardDrive, FileText, Share2, Folder, Star, Trash2, Layers, type LucideIcon } from "lucide-react";
import { formatFileSize } from "@/lib/utils";
import { STORAGE_QUOTA_BYTES } from "@/lib/prefs";

interface StatsData {
  fileCount: number;
  folderCount: number;
  shareCount: number;
  storageUsed: number;
  favoriteCount?: number;
  trashCount?: number;
  versionCount?: number;
}

interface StatsCardsProps {
  stats: StatsData;
}

interface CardDef {
  key: keyof StatsData;
  label: string;
  icon: LucideIcon;
  format: (v: number) => string;
  tone: string;
  sub?: (s: StatsData) => string | undefined;
}

const cards: CardDef[] = [
  {
    key: "storageUsed", label: "Stockage utilisé", icon: HardDrive, format: (v) => formatFileSize(v),
    tone: "text-blue-600 bg-blue-500/10 dark:text-blue-300",
    sub: (s) => `${Math.min(100, (s.storageUsed / STORAGE_QUOTA_BYTES) * 100).toFixed(1)} % de ${formatFileSize(STORAGE_QUOTA_BYTES)}`,
  },
  { key: "fileCount", label: "Fichiers", icon: FileText, format: (v) => (v ?? 0).toLocaleString("fr-CA"), tone: "text-emerald-600 bg-emerald-500/10 dark:text-emerald-300", sub: (s) => (typeof s.versionCount === "number" ? `${s.versionCount.toLocaleString("fr-CA")} versions` : undefined) },
  { key: "folderCount", label: "Dossiers", icon: Folder, format: (v) => (v ?? 0).toLocaleString("fr-CA"), tone: "text-amber-600 bg-amber-500/10 dark:text-amber-300" },
  { key: "shareCount", label: "Liens actifs", icon: Share2, format: (v) => (v ?? 0).toLocaleString("fr-CA"), tone: "text-purple-600 bg-purple-500/10 dark:text-purple-300" },
  { key: "favoriteCount", label: "Favoris", icon: Star, format: (v) => (v ?? 0).toLocaleString("fr-CA"), tone: "text-amber-600 bg-amber-500/10 dark:text-amber-300" },
  { key: "trashCount", label: "Corbeille", icon: Trash2, format: (v) => (v ?? 0).toLocaleString("fr-CA"), tone: "text-rose-600 bg-rose-500/10 dark:text-rose-300" },
];

export default function StatsCards({ stats }: StatsCardsProps) {
  const visible = cards.filter((c) => typeof stats[c.key] === "number");
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-3">
      {visible.map((card, i) => {
        const value = stats[card.key] as number;
        const sub = card.sub?.(stats);
        const Icon = card.icon;
        return (
          <motion.div
            key={card.key}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.05, duration: 0.3 }}
            className="card card-hover p-3.5 sm:p-4"
          >
            <div className="flex items-center gap-3">
              <span className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${card.tone}`}>
                <Icon className="w-[18px] h-[18px]" />
              </span>
              <div className="min-w-0">
                <p className="text-[20px] sm:text-[22px] font-semibold tracking-tight text-gray-900 dark:text-white tabular-nums leading-none truncate">{card.format(value)}</p>
                <p className="text-[11.5px] text-gray-500 dark:text-gray-400 mt-1 truncate">{card.label}</p>
              </div>
            </div>
            {sub && (
              <p className="mt-2.5 text-[11px] text-gray-400 flex items-center gap-1 truncate">
                {card.key === "fileCount" && <Layers className="w-3 h-3 shrink-0" />}
                {sub}
              </p>
            )}
          </motion.div>
        );
      })}
    </div>
  );
}