
import React from 'react';
import { Helmet } from 'react-helmet';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, Printer, CreditCard } from 'lucide-react';
import { mockPurchaseInvoices } from '@/data/mockData';

const PurchaseInvoiceDetailPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const inv = mockPurchaseInvoices.find(i => i.id === parseInt(id));

  if (!inv) return <div>Facture introuvable</div>;

  return (
    <>
      <Helmet>
        <title>{inv.number} - Facture Achat - Bijou ERP</title>
      </Helmet>
      <div className="max-w-5xl mx-auto space-y-6">
        <div className="flex items-center gap-4">
           <button onClick={() => navigate('/factures-achat')} className="p-2 hover:bg-white rounded-lg"><ArrowLeft className="w-5 h-5" /></button>
           <div className="flex-1">
             <h1 className="text-2xl font-bold">{inv.number}</h1>
             <p className="text-sm text-gray-500">{inv.supplier}</p>
           </div>
           <button className="px-4 py-2 bg-[#941403] text-white rounded-lg flex items-center gap-2">
             <CreditCard className="w-4 h-4" /> Payer
           </button>
        </div>
        
        <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
           <div className="flex justify-between mb-8">
              <div>
                <h2 className="text-xl font-bold text-gray-900">FACTURE</h2>
                <p className="text-gray-500">{inv.number}</p>
              </div>
              <div className="text-right">
                 <div className="text-3xl font-bold text-[#941403]">{inv.amountTTC.toLocaleString()} €</div>
                 <p className="text-sm text-gray-500">Montant TTC</p>
              </div>
           </div>
           
           <div className="grid grid-cols-2 gap-8 mb-8">
              <div>
                 <h4 className="font-medium text-gray-900 mb-2">Fournisseur</h4>
                 <div className="text-gray-600 bg-gray-50 p-4 rounded-lg">
                   {inv.supplier}
                 </div>
              </div>
              <div>
                 <h4 className="font-medium text-gray-900 mb-2">Détails</h4>
                 <div className="space-y-2 text-sm">
                   <div className="flex justify-between border-b border-gray-100 pb-2">
                     <span className="text-gray-500">Date de facturation</span>
                     <span className="font-medium">{inv.date}</span>
                   </div>
                   <div className="flex justify-between border-b border-gray-100 pb-2">
                     <span className="text-gray-500">Échéance</span>
                     <span className="font-medium text-red-600">{inv.dueDate}</span>
                   </div>
                   <div className="flex justify-between">
                     <span className="text-gray-500">Bon de réception</span>
                     <span className="font-medium">{inv.receptionNote}</span>
                   </div>
                 </div>
              </div>
           </div>
        </div>
      </div>
    </>
  );
};
export default PurchaseInvoiceDetailPage;
