"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CheckCircle2, Circle } from "lucide-react"
import type { BankingData } from "@/lib/types"
import { cn } from "@/lib/utils"

interface RecentTransactionsProps {
  data: BankingData
}

export function RecentTransactions({ data }: RecentTransactionsProps) {
  const recentTransactions = [...data.transactions]
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
    .slice(0, 10)

  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("fr-FR", {
      style: "currency",
      currency: "EUR",
    }).format(amount)
  }

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString("fr-FR", {
      day: "2-digit",
      month: "short",
    })
  }

  const getCategory = (categoryId: string | null) => {
    if (!categoryId) return null
    return data.categories.find((c) => c.id === categoryId)
  }

  const getAccount = (accountId: string) => {
    return data.accounts.find((a) => a.id === accountId)
  }

  if (recentTransactions.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Transactions récentes</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <p className="text-muted-foreground">Aucune transaction</p>
            <p className="text-sm text-muted-foreground mt-1">Importez un fichier OFX pour commencer</p>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Transactions récentes</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {recentTransactions.map((transaction) => {
            const category = getCategory(transaction.categoryId)
            const account = getAccount(transaction.accountId)

            return (
              <div
                key={transaction.id}
                className="flex items-center gap-3 p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors"
              >
                <div className="flex-shrink-0">
                  {transaction.isReconciled ? (
                    <CheckCircle2 className="w-5 h-5 text-emerald-600" />
                  ) : (
                    <Circle className="w-5 h-5 text-muted-foreground" />
                  )}
                </div>

                <div className="flex-1 min-w-0">
                  <p className="font-medium truncate">{transaction.description}</p>
                  <div className="flex items-center gap-2 mt-1">
                    <span className="text-xs text-muted-foreground">{formatDate(transaction.date)}</span>
                    {account && <span className="text-xs text-muted-foreground">• {account.name}</span>}
                    {category && (
                      <Badge
                        variant="secondary"
                        className="text-xs"
                        style={{ backgroundColor: `${category.color}20`, color: category.color }}
                      >
                        {category.name}
                      </Badge>
                    )}
                  </div>
                </div>

                <div
                  className={cn(
                    "font-semibold tabular-nums",
                    transaction.amount >= 0 ? "text-emerald-600" : "text-red-600",
                  )}
                >
                  {transaction.amount >= 0 ? "+" : ""}
                  {formatCurrency(transaction.amount)}
                </div>
              </div>
            )
          })}
        </div>
      </CardContent>
    </Card>
  )
}