"use client";

import { CheckCircle2, Download, Calendar, FileText, Building2, User, ShieldCheck } from "lucide-react";

interface AlreadySignedCardProps {
  contract: {
    contract_number: string;
    regime: string;
    start_date: string;
    end_date: string;
    gross_amount: number;
    employee_name: string | null;
    organization_name: string | null;
    production_name: string | null;
    profession: string | null;
  };
  signed_at: string | null;
  downloadUrl: string | null;
  documentType?: 'contrat' | 'avenant'; // Nouveau: type de document
}

export default function AlreadySignedCard({ contract, signed_at, downloadUrl, documentType = 'contrat' }: AlreadySignedCardProps) {
  const documentLabel = documentType === 'avenant' ? 'Avenant' : 'Contrat';
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('fr-FR', { 
      day: 'numeric', 
      month: 'long', 
      year: 'numeric' 
    });
  };

  const formatPeriod = (startDate: string, endDate: string) => {
    // Si même date de début et de fin, afficher "Journée du"
    if (startDate === endDate) {
      return `Journée du ${formatDate(startDate)}`;
    }
    return `${formatDate(startDate)} - ${formatDate(endDate)}`;
  };

  const formatDateTime = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('fr-FR', { 
      day: 'numeric', 
      month: 'long', 
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  };

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

  const getRegimeLabel = (regime: string) => {
    switch (regime) {
      case 'CDDU_MONO':
        return 'CDDU Mono-mois';
      case 'CDDU_MULTI':
        return 'CDDU Multi-mois';
      case 'RG':
        return 'Régime Général';
      default:
        return regime;
    }
  };

  const handleDownload = () => {
    if (downloadUrl) {
      window.open(downloadUrl, '_blank');
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-indigo-50/20 flex items-center justify-center p-4">
      <div className="max-w-2xl w-full">
        {/* Card principale */}
        <div className="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
          {/* Header avec gradient */}
          <div className="bg-gradient-to-r from-green-500 to-emerald-600 px-8 py-8 text-white">
            <div className="flex items-center gap-4 mb-3">
              <div className="bg-white/20 backdrop-blur-sm rounded-full p-3">
                <CheckCircle2 className="w-8 h-8" />
              </div>
              <div>
                <h1 className="text-2xl font-bold">{documentLabel} signé</h1>
                <p className="text-green-50 text-sm mt-1">
                  Vous avez signé électroniquement {documentType === 'avenant' ? 'cet avenant' : 'ce contrat'}.
                </p>
              </div>
            </div>
          </div>

          {/* Corps de la card */}
          <div className="px-8 py-6 space-y-6">
            {/* Date de signature */}
            {signed_at && (
              <div className="bg-green-50 border border-green-200 rounded-xl p-4">
                <div className="flex items-center gap-3">
                  <ShieldCheck className="w-5 h-5 text-green-600 flex-shrink-0" />
                  <div>
                    <p className="text-sm font-medium text-green-900">
                      Signature effectuée le
                    </p>
                    <p className="text-sm text-green-700 mt-0.5">
                      {formatDateTime(signed_at)}
                    </p>
                  </div>
                </div>
              </div>
            )}

            {/* Détails du contrat */}
            <div className="space-y-4">
              <h2 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
                <FileText className="w-5 h-5 text-indigo-600" />
                Détails du contrat
              </h2>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {/* Numéro de contrat */}
                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                  <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-1">
                    Numéro de contrat
                  </p>
                  <p className="text-sm font-semibold text-slate-900">
                    {contract.contract_number}
                  </p>
                </div>

                {/* Régime */}
                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                  <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-1">
                    Type de contrat
                  </p>
                  <p className="text-sm font-semibold text-slate-900">
                    {getRegimeLabel(contract.regime)}
                  </p>
                </div>

                {/* Dates */}
                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                  <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-1 flex items-center gap-1">
                    <Calendar className="w-3 h-3" />
                    Période
                  </p>
                  <p className="text-sm font-semibold text-slate-900">
                    {formatPeriod(contract.start_date, contract.end_date)}
                  </p>
                </div>

                {/* Montant */}
                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                  <p className="text-xs font-medium text-slate-500 uppercase tracking-wide mb-1">
                    Montant brut
                  </p>
                  <p className="text-sm font-semibold text-slate-900">
                    {formatAmount(contract.gross_amount)}
                  </p>
                </div>
              </div>

              {/* Informations supplémentaires */}
              {(contract.employee_name || contract.organization_name || contract.production_name || contract.profession) && (
                <div className="border-t border-slate-200 pt-4 space-y-3">
                  {contract.employee_name && (
                    <div className="flex items-center gap-3 text-sm">
                      <User className="w-4 h-4 text-slate-400" />
                      <span className="text-slate-600">Salarié :</span>
                      <span className="font-medium text-slate-900">
                        {contract.employee_name}
                      </span>
                    </div>
                  )}
                  {contract.organization_name && (
                    <div className="flex items-center gap-3 text-sm">
                      <Building2 className="w-4 h-4 text-slate-400" />
                      <span className="text-slate-600">Employeur :</span>
                      <span className="font-medium text-slate-900">
                        {contract.organization_name}
                      </span>
                    </div>
                  )}
                  {contract.production_name && (
                    <div className="flex items-center gap-3 text-sm">
                      <FileText className="w-4 h-4 text-slate-400" />
                      <span className="text-slate-600">Production :</span>
                      <span className="font-medium text-slate-900">
                        {contract.production_name}
                      </span>
                    </div>
                  )}
                  {contract.profession && (
                    <div className="flex items-center gap-3 text-sm">
                      <User className="w-4 h-4 text-slate-400" />
                      <span className="text-slate-600">Profession :</span>
                      <span className="font-medium text-slate-900">
                        {contract.profession}
                      </span>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* Bouton de téléchargement */}
            {downloadUrl && (
              <div className="pt-2">
                <button
                  onClick={handleDownload}
                  className="w-full inline-flex items-center justify-center gap-3 px-6 py-4 text-base font-semibold text-white bg-gradient-to-r from-indigo-600 to-blue-600 hover:from-indigo-700 hover:to-blue-700 rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
                >
                  <Download className="w-5 h-5" />
                  Télécharger {documentType === 'avenant' ? "l'avenant" : 'le contrat'} signé
                </button>
              </div>
            )}
          </div>

          {/* Footer */}
          <div className="bg-slate-50 border-t border-slate-200 px-8 py-4">
            <div className="flex items-center justify-between text-sm">
              <p className="text-slate-600">
                Besoin d'aide ?{' '}
                <a 
                  href="mailto:paie@odentas.fr" 
                  className="text-indigo-600 hover:text-indigo-700 font-medium hover:underline"
                >
                  paie@odentas.fr
                </a>
              </p>
              <img 
                src="https://ci3.googleusercontent.com/meips/ADKq_NaYk41Pm5XLYFH2kxxXdCOkuRa2Ji2vLeI41LRtc9oBmfS7-NhGtPUzYhw7arh9LdEyrUS--rk3mW1WSrKTtKjsTtiUcZVwfYFyqvV8YSZ8ZFJtQzqG43CgPmcZsSdWmIrxmPATULmFaFEpIIO-IdbHkat3RBeqwDQ=s0-d-e1-ft#https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.png" 
                alt="Odentas" 
                className="h-6 opacity-60"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
