/**
 * Lettre de Crédit (L/C) - Wiki Page
 *
 * Instrument de paiement international sécurisé
 */

import Link from 'next/link';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

const typesLC = [
  {
    type: 'Irrévocable',
    description: 'Ne peut être modifiée ou annulée sans l\'accord de toutes les parties',
    usage: 'Standard depuis UCP 600',
    recommended: true,
  },
  {
    type: 'Confirmée',
    description: 'Une banque (généralement dans le pays du vendeur) ajoute sa garantie',
    usage: 'Recommandé pour les pays à risque',
    recommended: true,
  },
  {
    type: 'Transférable',
    description: 'Peut être transférée à un second bénéficiaire (sous-traitant)',
    usage: 'Négoce, intermédiaires',
    recommended: false,
  },
  {
    type: 'Revolving',
    description: 'Se reconstitue automatiquement après chaque utilisation',
    usage: 'Commandes répétitives',
    recommended: false,
  },
  {
    type: 'Stand-by',
    description: 'Garantie de paiement en cas de défaillance (rarement utilisée)',
    usage: 'Garantie bancaire',
    recommended: false,
  },
  {
    type: 'Red/Green Clause',
    description: 'Permet un paiement anticipé avant expédition',
    usage: 'Préfinancement du vendeur',
    recommended: false,
  },
];

const parties = [
  { role: 'Donneur d\'ordre (Applicant)', description: 'L\'acheteur/importateur qui demande l\'ouverture de la L/C' },
  { role: 'Bénéficiaire', description: 'Le vendeur/exportateur qui recevra le paiement' },
  { role: 'Banque émettrice', description: 'Banque de l\'acheteur qui émet la L/C' },
  { role: 'Banque notificatrice', description: 'Banque du vendeur qui notifie la L/C (sans engagement)' },
  { role: 'Banque confirmatrice', description: 'Banque qui ajoute sa propre garantie (optionnel)' },
];

const documentsTypiques = [
  { document: 'Facture commerciale', obligatoire: true },
  { document: 'Bill of Lading (connaissement)', obligatoire: true },
  { document: 'Liste de colisage', obligatoire: true },
  { document: 'Certificat d\'origine', obligatoire: false },
  { document: 'Certificat d\'assurance', obligatoire: false },
  { document: 'Certificat d\'inspection', obligatoire: false },
  { document: 'Certificat phytosanitaire', obligatoire: false },
];

const erreursFrequentes = [
  'Nom du bénéficiaire mal orthographié',
  'Dates d\'expédition ou d\'expiration dépassées',
  'Description des marchandises ne correspondant pas exactement',
  'Documents présentés en retard (au-delà du délai de présentation)',
  'Incoterm incohérent avec les documents',
  'Montant des documents différent de la L/C',
  'Connaissement avec réserves (claused B/L)',
];

export default function LettreCreditPage() {
  return (
    <div className="space-y-6">
      {/* Header with back link */}
      <div className="flex items-center gap-4 mb-6">
        <Link
          href="/dashboard/wiki"
          className="flex items-center text-blue-600 hover:text-blue-800 transition-colors"
        >
          <svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Retour au Wiki
        </Link>
      </div>

      {/* Title */}
      <div className="mb-8">
        <div className="flex items-center gap-3">
          <span className="text-4xl">💳</span>
          <h1 className="text-3xl font-bold text-gray-900">Lettre de Crédit (L/C)</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">
          La lettre de crédit documentaire (L/C ou Documentary Credit) est un engagement de paiement
          émis par une banque pour le compte de l&apos;acheteur, garantissant au vendeur d&apos;être payé
          contre présentation de documents conformes. Elle est régie par les Règles UCP 600 de la CCI.
        </p>
      </div>

      {/* How it works */}
      <Card className="bg-blue-50 border-blue-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-blue-900 mb-3">🔄 Fonctionnement Simplifié</h3>
          <div className="grid grid-cols-1 md:grid-cols-5 gap-2">
            {[
              { step: '1', title: 'Demande', desc: 'Acheteur demande l\'ouverture à sa banque' },
              { step: '2', title: 'Émission', desc: 'Banque émettrice envoie la L/C' },
              { step: '3', title: 'Notification', desc: 'Banque du vendeur notifie la L/C' },
              { step: '4', title: 'Expédition', desc: 'Vendeur expédie et présente les documents' },
              { step: '5', title: 'Paiement', desc: 'Banque paie après vérification' },
            ].map((item) => (
              <div key={item.step} className="text-center">
                <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto font-bold">
                  {item.step}
                </div>
                <p className="font-medium text-blue-900 mt-2">{item.title}</p>
                <p className="text-xs text-blue-700">{item.desc}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Parties */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">👥 Parties Impliquées</h2>
        <Card className="bg-white">
          <CardContent className="pt-6">
            <div className="space-y-4">
              {parties.map((p) => (
                <div key={p.role} className="flex items-start gap-3 pb-4 border-b last:border-0">
                  <span className="mt-1 w-3 h-3 bg-blue-500 rounded-full flex-shrink-0"></span>
                  <div>
                    <h4 className="font-medium text-gray-900">{p.role}</h4>
                    <p className="text-sm text-gray-600">{p.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Types */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">📋 Types de Lettres de Crédit</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {typesLC.map((lc) => (
            <Card key={lc.type} className={`bg-white ${lc.recommended ? 'border-green-300 border-2' : ''}`}>
              <CardHeader className="pb-2">
                <CardTitle className="flex items-center gap-2">
                  <span className="text-lg">{lc.type}</span>
                  {lc.recommended && (
                    <span className="px-2 py-1 text-xs bg-green-100 text-green-700 rounded">Recommandé</span>
                  )}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 text-sm">{lc.description}</p>
                <p className="text-xs text-gray-500 mt-2">Usage : {lc.usage}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Documents */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">📄 Documents Typiquement Requis</h2>
        <Card className="bg-white">
          <CardContent className="pt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {documentsTypiques.map((doc) => (
                <div key={doc.document} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                  <span className={`px-2 py-1 text-xs rounded ${doc.obligatoire ? 'bg-red-100 text-red-700' : 'bg-gray-200 text-gray-700'}`}>
                    {doc.obligatoire ? 'Toujours' : 'Selon L/C'}
                  </span>
                  <span className="text-gray-900">{doc.document}</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Key Dates */}
      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">📅 Dates Clés à Surveiller</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium text-gray-900">Date d&apos;expédition</h4>
              <p className="text-sm text-gray-600">
                Date limite pour expédier les marchandises (Latest Shipment Date)
              </p>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium text-gray-900">Délai de présentation</h4>
              <p className="text-sm text-gray-600">
                Généralement 21 jours après expédition pour présenter les documents
              </p>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium text-gray-900">Date de validité</h4>
              <p className="text-sm text-gray-600">
                Date limite absolue de la L/C (Expiry Date)
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Costs */}
      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">💰 Coûts Typiques</h3>
          <div className="bg-white p-4 rounded-lg border">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
              <div>
                <h4 className="font-medium">Côté Acheteur</h4>
                <ul className="text-gray-600 mt-2 space-y-1">
                  <li>• Commission d&apos;ouverture : 0.1% - 0.5%</li>
                  <li>• Frais de modification : fixes</li>
                  <li>• Commission d&apos;engagement : si non utilisée</li>
                </ul>
              </div>
              <div>
                <h4 className="font-medium">Côté Vendeur</h4>
                <ul className="text-gray-600 mt-2 space-y-1">
                  <li>• Frais de notification : fixes</li>
                  <li>• Commission de confirmation : 0.1% - 2%+</li>
                  <li>• Frais de négociation : variable</li>
                </ul>
              </div>
            </div>
            <p className="text-xs text-gray-500 mt-3">
              Note : Les frais de confirmation peuvent être très élevés pour les pays à risque.
            </p>
          </div>
        </CardContent>
      </Card>

      {/* Common Errors */}
      <Card className="mt-8 bg-red-50 border-red-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-red-900 mb-3">⚠️ Erreurs Fréquentes (Réserves)</h3>
          <p className="text-red-800 mb-3">
            Ces erreurs entraînent des &quot;réserves&quot; de la banque et peuvent bloquer le paiement :
          </p>
          <ul className="list-disc list-inside space-y-1 text-red-700">
            {erreursFrequentes.map((err) => (
              <li key={err}>{err}</li>
            ))}
          </ul>
        </CardContent>
      </Card>

      {/* UCP 600 */}
      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">📜 Règles UCP 600</h3>
          <p className="text-gray-600">
            Les Règles et Usances Uniformes (UCP 600) de la Chambre de Commerce Internationale (CCI)
            régissent les lettres de crédit documentaires depuis 2007. Points clés :
          </p>
          <ul className="list-disc list-inside space-y-1 text-gray-700 mt-3">
            <li>Délai standard d&apos;examen des documents : 5 jours ouvrés bancaires</li>
            <li>La L/C est irrévocable par défaut (même si non mentionné)</li>
            <li>Les banques examinent les documents, pas les marchandises</li>
            <li>Les documents doivent être &quot;conformes en apparence&quot;</li>
          </ul>
        </CardContent>
      </Card>

      {/* Tips */}
      <Card className="mt-8 bg-amber-50 border-amber-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-amber-900 mb-3">💡 Conseils Pratiques</h3>
          <ul className="list-disc list-inside space-y-2 text-amber-800">
            <li>Vérifier minutieusement les termes de la L/C dès réception</li>
            <li>Demander des modifications AVANT expédition si nécessaire</li>
            <li>Préparer les documents exactement comme demandé (virgules, orthographe)</li>
            <li>Respecter les délais avec marge de sécurité</li>
            <li>Travailler avec un transitaire expérimenté en documentaire</li>
            <li>Conserver des copies de tous les documents</li>
            <li>Envisager une L/C confirmée pour les nouveaux clients ou pays risqués</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}