
import React from 'react';
import { Helmet } from 'react-helmet';
import { useParams, useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { ArrowLeft, FileText, CheckSquare, Printer, Download, Mail, Calendar, User, Building2, DollarSign } from 'lucide-react';
import { mockPurchaseOrders } from '@/data/mockData';
import { cn } from '@/lib/utils';

const PurchaseOrderDetailPage = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const order = mockPurchaseOrders.find(o => o.id === parseInt(id)) || mockPurchaseOrders[0];

  if (!order) return <div>Commande introuvable</div>;

  return (
    <>
      <Helmet>
        <title>{order.number} - Commande - Bijou ERP</title>
      </Helmet>

      <div className="max-w-5xl mx-auto space-y-6">
        {/* Header Actions */}
        <div className="flex items-center gap-4">
          <button 
            onClick={() => navigate('/bons-commande')}
            className="p-2 hover:bg-white dark:hover:bg-gray-900 rounded-lg transition-colors"
          >
            <ArrowLeft className="w-5 h-5 text-gray-500" />
          </button>
          <div className="flex-1">
            <div className="flex items-center gap-3">
              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{order.number}</h1>
              <span className={cn("px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800")}>
                {order.status}
              </span>
            </div>
          </div>
          <div className="flex gap-2">
            <button className="p-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
              <Printer className="w-4 h-4 text-gray-600" />
            </button>
            <button className="p-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
              <Download className="w-4 h-4 text-gray-600" />
            </button>
            <button className="flex items-center gap-2 px-4 py-2 bg-[#941403] text-white rounded-lg text-sm font-medium hover:bg-[#7a1002] transition-colors">
               <CheckSquare className="w-4 h-4" />
               Réceptionner
            </button>
          </div>
        </div>

        {/* Main Content */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          
          {/* Left Column - Details */}
          <div className="lg:col-span-2 space-y-6">
            
            {/* Order Items */}
            <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl p-6 shadow-sm">
              <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Articles commandés</h3>
              <div className="overflow-hidden">
                <table className="w-full text-sm">
                  <thead className="bg-gray-50 dark:bg-gray-900">
                    <tr>
                      <th className="px-4 py-2 text-left font-medium text-gray-500">Description</th>
                      <th className="px-4 py-2 text-right font-medium text-gray-500">Qté</th>
                      <th className="px-4 py-2 text-right font-medium text-gray-500">P.U.</th>
                      <th className="px-4 py-2 text-right font-medium text-gray-500">Total HT</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
                    {order.items.map((item, idx) => (
                      <tr key={idx}>
                        <td className="px-4 py-3 text-gray-900 dark:text-white">{item.description}</td>
                        <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{item.quantity}</td>
                        <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{item.unitPrice} €</td>
                        <td className="px-4 py-3 text-right font-medium text-gray-900 dark:text-white">{(item.quantity * item.unitPrice).toLocaleString()} €</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="mt-6 flex justify-end">
                <div className="w-64 space-y-2">
                   <div className="flex justify-between text-sm">
                     <span className="text-gray-500">Total HT</span>
                     <span className="font-medium">{order.amountHT.toLocaleString()} €</span>
                   </div>
                   <div className="flex justify-between text-sm">
                     <span className="text-gray-500">TVA (20%)</span>
                     <span className="font-medium">{(order.amountHT * 0.2).toLocaleString()} €</span>
                   </div>
                   <div className="flex justify-between text-base font-bold border-t pt-2 mt-2 border-gray-100 dark:border-gray-800">
                     <span>Total TTC</span>
                     <span className="text-[#941403]">{order.amountTTC.toLocaleString()} €</span>
                   </div>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column - Info */}
          <div className="space-y-6">
            <div className="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-xl p-6 shadow-sm">
               <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Informations</h3>
               <div className="space-y-4">
                 <div className="flex items-start gap-3">
                    <Building2 className="w-5 h-5 text-gray-400 mt-0.5" />
                    <div>
                      <p className="text-xs text-gray-500 uppercase">Fournisseur</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">{order.supplier}</p>
                    </div>
                 </div>
                 <div className="flex items-start gap-3">
                    <Calendar className="w-5 h-5 text-gray-400 mt-0.5" />
                    <div>
                      <p className="text-xs text-gray-500 uppercase">Date de commande</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">{order.date}</p>
                    </div>
                 </div>
                 <div className="flex items-start gap-3">
                    <Calendar className="w-5 h-5 text-gray-400 mt-0.5" />
                    <div>
                      <p className="text-xs text-gray-500 uppercase">Livraison prévue</p>
                      <p className="text-sm font-medium text-gray-900 dark:text-white">{order.deliveryDate}</p>
                    </div>
                 </div>
               </div>
            </div>
          </div>

        </div>
      </div>
    </>
  );
};

export default PurchaseOrderDetailPage;
