import React from 'react';
import { Helmet } from 'react-helmet';
import { useNavigate } from 'react-router-dom';
import { Settings, ShoppingCart, FileText } from 'lucide-react';
import SignatureKPIs from '@/components/signature/SignatureKPIs';
import SignatureChart from '@/components/signature/SignatureChart';
import SignatureCreditAlert from '@/components/signature/SignatureCreditAlert';
import DataTable from '@/components/DataTable';
import { useSignature } from '@/contexts/SignatureContext';

const SignatureDashboard = () => {
  const { stats, history, signatures, loading } = useSignature();
  const navigate = useNavigate();

  // Recent 5 signatures
  const recentSignatures = signatures.slice(0, 5);

  const columns = [
    { key: 'documentNumber', label: 'Document', render: v => <span className="font-medium">{v}</span> },
    { key: 'clientName', label: 'Client' },
    { key: 'sentAt', label: 'Date', render: v => new Date(v).toLocaleDateString() },
    // { 
    //   key: 'status', 
    //   label: 'Statut', 
    //   render: (status) => {
    //     const map = {
    //       'signed': 'Signé',
    //       'pending': 'En attente',
    //       'viewed': 'Vu',
    //       'sent': 'Envoyé',
    //       'refused': 'Refusé',
    //       'expired': 'Expiré'
    //     };
    //     return <StatusBadge status={map[status] || status} />;
    //   }
    // }
  ];

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#338660]"></div>
      </div>
    );
  }

  return (
    <>
      <Helmet>
        <title>Signature Électronique - Dashboard - Bijou ERP</title>
      </Helmet>

      <div className="space-y-6">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Signature Électronique</h1>
            <p className="text-gray-500">Pilotez vos processus de signature et suivez votre consommation.</p>
          </div>
          <div className="flex items-center gap-3">
            <button 
              onClick={() => navigate('/home/signature/purchase')}
              className="flex items-center gap-2 px-4 py-2 bg-[#338660] text-white rounded-xl font-medium hover:bg-[#2A6F4F] shadow-lg shadow-[#338660]/20 transition-all"
            >
              <ShoppingCart className="w-4 h-4" />
              Acheter des crédits
            </button>
            <button 
              // onClick={() => navigate('/signature/settings')}
              className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors"
            >
              <Settings className="w-5 h-5 text-gray-500" />
            </button>
          </div>
        </div>

        <SignatureCreditAlert credits={stats?.credits} />
        
        <SignatureKPIs stats={stats} />

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-6">
            <SignatureChart data={history} />
          </div>
          
          <div className="bg-white dark:bg-gray-950 rounded-2xl border border-gray-200 dark:border-gray-800 p-6 shadow-sm">
            <div className="flex items-center justify-between mb-4">
              <h3 className="font-bold text-lg text-gray-900 dark:text-white">Derniers envois</h3>
              <button 
                onClick={() => navigate('/home/signature/tracking')}
                className="text-sm text-[#338660] hover:underline font-medium"
              >
                Tout voir
              </button>
            </div>
            <div className="-mx-6">
              <DataTable 
                columns={columns} 
                data={recentSignatures} 
                onRowClick={() => {}}
              />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default SignatureDashboard;