/**
 * Incoterms 2020 - Wiki Page
 *
 * Detailed information about international commercial terms
 */

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

const incoterms = [
  {
    code: 'EXW',
    name: 'Ex Works',
    description: 'Le vendeur met la marchandise à disposition dans ses locaux. L\'acheteur assume tous les risques et coûts.',
    risk: 'Acheteur',
    transport: 'Tous modes',
    category: 'Départ',
  },
  {
    code: 'FCA',
    name: 'Free Carrier',
    description: 'Le vendeur livre la marchandise au transporteur désigné par l\'acheteur.',
    risk: 'Transfert à la livraison au transporteur',
    transport: 'Tous modes',
    category: 'Départ',
  },
  {
    code: 'CPT',
    name: 'Carriage Paid To',
    description: 'Le vendeur paie le transport jusqu\'à destination. Le risque est transféré à la remise au transporteur.',
    risk: 'Transfert à la livraison au transporteur',
    transport: 'Tous modes',
    category: 'Arrivée',
  },
  {
    code: 'CIP',
    name: 'Carriage and Insurance Paid To',
    description: 'Comme CPT mais le vendeur doit aussi assurer la marchandise.',
    risk: 'Transfert à la livraison au transporteur',
    transport: 'Tous modes',
    category: 'Arrivée',
  },
  {
    code: 'DAP',
    name: 'Delivered at Place',
    description: 'Le vendeur livre la marchandise prête à être déchargée au lieu convenu.',
    risk: 'Vendeur jusqu\'à destination',
    transport: 'Tous modes',
    category: 'Arrivée',
  },
  {
    code: 'DPU',
    name: 'Delivered at Place Unloaded',
    description: 'Le vendeur livre et décharge la marchandise au lieu de destination.',
    risk: 'Vendeur jusqu\'au déchargement',
    transport: 'Tous modes',
    category: 'Arrivée',
  },
  {
    code: 'DDP',
    name: 'Delivered Duty Paid',
    description: 'Le vendeur assume tous les risques et coûts, y compris les droits de douane.',
    risk: 'Vendeur (maximum)',
    transport: 'Tous modes',
    category: 'Arrivée',
  },
  {
    code: 'FAS',
    name: 'Free Alongside Ship',
    description: 'Le vendeur livre la marchandise le long du navire au port d\'embarquement.',
    risk: 'Transfert le long du navire',
    transport: 'Maritime uniquement',
    category: 'Maritime',
  },
  {
    code: 'FOB',
    name: 'Free On Board',
    description: 'Le vendeur livre la marchandise à bord du navire. Très utilisé en maritime.',
    risk: 'Transfert à bord du navire',
    transport: 'Maritime uniquement',
    category: 'Maritime',
  },
  {
    code: 'CFR',
    name: 'Cost and Freight',
    description: 'Le vendeur paie le fret jusqu\'au port de destination. Le risque passe à bord.',
    risk: 'Transfert à bord du navire',
    transport: 'Maritime uniquement',
    category: 'Maritime',
  },
  {
    code: 'CIF',
    name: 'Cost, Insurance and Freight',
    description: 'Comme CFR mais le vendeur doit aussi assurer la marchandise.',
    risk: 'Transfert à bord du navire',
    transport: 'Maritime uniquement',
    category: 'Maritime',
  },
];

export default function IncotermsPage() {
  const categories = ['Départ', 'Arrivée', 'Maritime'];

  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">Incoterms 2020</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">
          Les Incoterms (International Commercial Terms) sont des règles publiées par la Chambre de Commerce
          Internationale (ICC) qui définissent les responsabilités des vendeurs et acheteurs dans les transactions
          internationales. La version 2020 est entrée en vigueur le 1er janvier 2020.
        </p>
      </div>

      {/* Key Points */}
      <Card className="bg-blue-50 border-blue-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-blue-900 mb-3">Points Clés</h3>
          <ul className="list-disc list-inside space-y-2 text-blue-800">
            <li>11 Incoterms au total : 7 multimodaux et 4 maritimes</li>
            <li>Définissent le transfert des risques et des coûts</li>
            <li>Ne définissent PAS le transfert de propriété</li>
            <li>Doivent être suivis de la version (ex: FOB Incoterms 2020)</li>
          </ul>
        </CardContent>
      </Card>

      {/* Incoterms by category */}
      {categories.map((category) => (
        <div key={category} className="mt-8">
          <h2 className="text-xl font-bold text-gray-900 mb-4">
            {category === 'Maritime' ? '🚢 Incoterms Maritimes' :
             category === 'Départ' ? '📤 Incoterms de Départ' : '📥 Incoterms d\'Arrivée'}
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {incoterms
              .filter((term) => term.category === category)
              .map((term) => (
                <Card key={term.code} className="bg-white">
                  <CardHeader className="pb-2">
                    <CardTitle className="flex items-center gap-2">
                      <span className="px-3 py-1 bg-blue-600 text-white rounded-md font-mono">
                        {term.code}
                      </span>
                      <span className="text-lg">{term.name}</span>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 mb-3">{term.description}</p>
                    <div className="space-y-1 text-sm">
                      <div className="flex justify-between">
                        <span className="text-gray-500">Risque:</span>
                        <span className="font-medium text-gray-900">{term.risk}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-500">Transport:</span>
                        <span className="font-medium text-gray-900">{term.transport}</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
          </div>
        </div>
      ))}

      {/* Visual diagram placeholder */}
      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">Transfert des Risques - Schéma</h3>
          <div className="bg-white p-4 rounded-lg border">
            <div className="flex items-center justify-between text-sm mb-2">
              <span className="font-medium">Vendeur</span>
              <span className="font-medium">Acheteur</span>
            </div>
            <div className="relative h-8 bg-gradient-to-r from-blue-500 to-green-500 rounded-full">
              <div className="absolute inset-0 flex items-center justify-around text-white text-xs font-medium">
                <span>EXW</span>
                <span>FCA</span>
                <span>FOB</span>
                <span>CFR/CIF</span>
                <span>DAP</span>
                <span>DDP</span>
              </div>
            </div>
            <p className="text-xs text-gray-500 mt-2 text-center">
              Plus on va vers la droite, plus le vendeur assume de responsabilités
            </p>
          </div>
        </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>Utilisez FOB ou CIF pour le maritime, FCA ou CIP pour le multimodal</li>
            <li>Précisez toujours le lieu exact (ex: FOB Shanghai Port)</li>
            <li>Vérifiez la cohérence entre l&apos;Incoterm et la lettre de crédit</li>
            <li>EXW et DDP sont les termes extrêmes - à utiliser avec précaution</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}