'use client';

import { INVOICES } from '@/lib/mock-data';
import { motion } from 'framer-motion';
import { Download } from 'lucide-react';

function StatusBadge({ status }: { status: 'paid' | 'pending' | 'failed' }) {
  const map = {
    paid: { label: 'Payé', cls: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/30' },
    pending: { label: 'En attente', cls: 'text-amber-400 bg-amber-500/10 border-amber-500/30' },
    failed: { label: 'Échec', cls: 'text-red-400 bg-red-500/10 border-red-500/30' },
  };
  const { label, cls } = map[status];
  return (
    <span className={`inline-flex px-2 py-0.5 rounded-full text-[11px] font-medium border ${cls}`}>
      {label}
    </span>
  );
}

export function InvoicesTable() {
  return (
    <motion.section
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut', delay: 0.2 }}
      className="bg-bg-card border border-border rounded-2xl overflow-hidden"
    >
      <div className="px-6 py-4 border-b border-border">
        <h2 className="text-[15px] font-semibold">Historique de facturation</h2>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-[13px]">
          <thead>
            <tr className="border-b border-border text-[11px] uppercase tracking-wider text-text-dim">
              <th className="px-6 py-3 text-left font-medium">Date</th>
              <th className="px-6 py-3 text-left font-medium">Description</th>
              <th className="px-6 py-3 text-right font-medium">Montant</th>
              <th className="px-6 py-3 text-left font-medium">Statut</th>
              <th className="px-6 py-3 text-center font-medium">PDF</th>
            </tr>
          </thead>
          <tbody>
            {INVOICES.map((inv, i) => (
              <motion.tr
                key={inv.id}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.25 + i * 0.05 }}
                className="border-b border-border/60 last:border-0 hover:bg-bg-card-hover transition-colors"
              >
                <td className="px-6 py-3.5 text-text-dim font-mono text-[12px]">
                  {new Date(inv.date).toLocaleDateString('fr-FR', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                  })}
                </td>
                <td className="px-6 py-3.5 text-text">{inv.description}</td>
                <td className="px-6 py-3.5 text-right font-mono font-semibold">{inv.amount} €</td>
                <td className="px-6 py-3.5">
                  <StatusBadge status={inv.status} />
                </td>
                <td className="px-6 py-3.5 text-center">
                  <button
                    type="button"
                    className="inline-flex items-center justify-center w-7 h-7 rounded-lg border border-border text-text-dimmer hover:text-text hover:border-border-bright transition-colors"
                    title="Télécharger le PDF"
                  >
                    <Download className="w-3.5 h-3.5" />
                  </button>
                </td>
              </motion.tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="px-6 py-3 border-t border-border">
        <button
          type="button"
          className="text-[12px] text-text-dimmer hover:text-text-dim transition-colors"
        >
          Voir toutes les factures
        </button>
      </div>
    </motion.section>
  );
}