"use client";

import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CategoryIcon } from "@/components/ui/category-icon";
import { Badge } from "@/components/ui/badge";
import { useIsMobile } from "@/hooks/use-mobile";
import type { Transaction, Category } from "@/lib/types";

interface TopExpensesListProps {
  expenses: Transaction[];
  categories: Category[];
  formatCurrency: (amount: number) => string;
}

export function TopExpensesList({
  expenses,
  categories,
  formatCurrency,
}: TopExpensesListProps) {
  const isMobile = useIsMobile();

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm md:text-base">Top 5 dépenses</CardTitle>
      </CardHeader>
      <CardContent>
        {expenses.length > 0 ? (
          <div className="space-y-3 md:space-y-4">
            {expenses.map((expense, index) => {
              const category = categories.find(
                (c) => c.id === expense.categoryId,
              );
              return (
                <div
                  key={expense.id}
                  className="flex items-start gap-2 md:gap-3"
                >
                  <div className="w-6 h-6 md:w-8 md:h-8 rounded-full bg-muted flex items-center justify-center text-xs md:text-sm font-semibold shrink-0">
                    {index + 1}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-2 mb-1">
                      <p className="font-medium text-xs md:text-sm truncate flex-1">
                        {expense.description}
                      </p>
                      <div className="text-red-600 font-semibold tabular-nums text-xs md:text-sm shrink-0">
                        {formatCurrency(expense.amount)}
                      </div>
                    </div>
                    <div className="flex items-center gap-1.5 md:gap-2 flex-wrap">
                      <span className="text-[10px] md:text-xs text-muted-foreground">
                        {new Date(expense.date).toLocaleDateString("fr-FR")}
                      </span>
                      {category && (
                        <Link
                          href={`/transactions?categoryIds=${category.id}`}
                          className="inline-block"
                        >
                          <Badge
                            variant="secondary"
                            className="text-[10px] md:text-xs px-1.5 md:px-2 py-0.5 inline-flex items-center gap-1 shrink-0 hover:opacity-80 transition-opacity cursor-pointer"
                            style={{
                              backgroundColor: `${category.color}20`,
                              color: category.color,
                              borderColor: `${category.color}30`,
                            }}
                          >
                            <CategoryIcon
                              icon={category.icon}
                              color={category.color}
                              size={isMobile ? 8 : 10}
                            />
                            <span className="truncate max-w-[120px] md:max-w-none">
                              {category.name}
                            </span>
                          </Badge>
                        </Link>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="h-[200px] flex items-center justify-center text-muted-foreground text-xs md:text-sm">
            Pas de dépenses pour cette période
          </div>
        )}
      </CardContent>
    </Card>
  );
}
