/**
 * Calcul du Fret Maritime - Wiki Page
 *
 * Comment sont calculés les coûts de transport
 */

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

const surcharges = [
  {
    code: 'BAF',
    name: 'Bunker Adjustment Factor',
    description: 'Surcharge carburant liée aux fluctuations du prix du fuel maritime.',
    variation: 'Mensuelle',
  },
  {
    code: 'CAF',
    name: 'Currency Adjustment Factor',
    description: 'Ajustement monétaire pour compenser les variations de taux de change.',
    variation: 'Mensuelle',
  },
  {
    code: 'THC',
    name: 'Terminal Handling Charges',
    description: 'Frais de manutention au terminal portuaire (chargement/déchargement).',
    variation: 'Par port',
  },
  {
    code: 'ISPS',
    name: 'International Ship & Port Security',
    description: 'Surcharge sécurité conforme au code ISPS (post 11 septembre).',
    variation: 'Fixe',
  },
  {
    code: 'LSS',
    name: 'Low Sulphur Surcharge',
    description: 'Surcharge carburant bas soufre (réglementation IMO 2020).',
    variation: 'Mensuelle',
  },
  {
    code: 'PSS',
    name: 'Peak Season Surcharge',
    description: 'Surcharge haute saison (généralement août-octobre vers l\'Europe).',
    variation: 'Saisonnière',
  },
  {
    code: 'GRI',
    name: 'General Rate Increase',
    description: 'Augmentation générale des tarifs, généralement annoncée à l\'avance.',
    variation: 'Variable',
  },
  {
    code: 'EBS',
    name: 'Emergency Bunker Surcharge',
    description: 'Surcharge d\'urgence en cas de hausse brutale du carburant.',
    variation: 'Exceptionnelle',
  },
];

const fraisAdditionnels = [
  { name: 'Documentation Fee', description: 'Frais d\'émission du B/L ou autres documents', typical: '35-75 USD' },
  { name: 'Seal Fee', description: 'Coût du plomb de sécurité du conteneur', typical: '10-25 USD' },
  { name: 'VGM Fee', description: 'Frais de certification du poids vérifié', typical: '25-50 USD' },
  { name: 'Container Cleaning', description: 'Nettoyage du conteneur si requis', typical: '50-150 USD' },
  { name: 'Customs Clearance', description: 'Frais de dédouanement (honoraires)', typical: '50-200 USD' },
  { name: 'Inspection Fee', description: 'Frais d\'inspection (scanner, phytosanitaire)', typical: '50-300 USD' },
];

export default function CalculFretPage() {
  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">Calcul du Fret Maritime</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">
          Le coût du transport maritime se compose du fret de base et de nombreuses surcharges.
          Comprendre ces éléments est essentiel pour bien estimer ses coûts logistiques.
        </p>
      </div>

      {/* Base Calculation */}
      <Card className="bg-blue-50 border-blue-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-blue-900 mb-3">📐 Principes de Base</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="font-medium text-blue-800">FCL (Conteneur Complet)</h4>
              <p className="text-sm text-blue-700 mt-1">
                Prix forfaitaire par conteneur (20&apos;, 40&apos;, 40&apos;HC), indépendant du poids (dans les limites).
              </p>
              <p className="text-xs text-blue-600 mt-2">Ex: 1,500 USD/20&apos; Shanghai → Rotterdam</p>
            </div>
            <div>
              <h4 className="font-medium text-blue-800">LCL (Groupage)</h4>
              <p className="text-sm text-blue-700 mt-1">
                Prix au mètre cube (CBM) ou à la tonne, selon le plus avantageux pour le transporteur.
              </p>
              <p className="text-xs text-blue-600 mt-2">Ex: 45 USD/CBM (minimum 1 CBM)</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Weight Calculation */}
      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">⚖️ Poids Taxable (LCL)</h3>
          <div className="bg-white p-4 rounded-lg border mb-4">
            <div className="text-center">
              <p className="text-lg font-mono bg-blue-100 text-blue-800 p-3 rounded inline-block">
                Poids taxable = MAX (Volume CBM × 1000, Poids brut kg)
              </p>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium">Exemple 1 : Marchandise légère</h4>
              <ul className="text-gray-600 mt-2 space-y-1">
                <li>Volume : 2 CBM</li>
                <li>Poids : 500 kg</li>
                <li>Volume équivalent : 2 × 1000 = 2000 kg</li>
                <li className="font-medium text-blue-700">→ Taxé sur 2 CBM (ou 2 tonnes)</li>
              </ul>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium">Exemple 2 : Marchandise lourde</h4>
              <ul className="text-gray-600 mt-2 space-y-1">
                <li>Volume : 1 CBM</li>
                <li>Poids : 2000 kg</li>
                <li>Volume équivalent : 1 × 1000 = 1000 kg</li>
                <li className="font-medium text-blue-700">→ Taxé sur 2 tonnes (poids réel)</li>
              </ul>
            </div>
          </div>
          <p className="text-xs text-gray-500 mt-3">
            Ratio standard : 1 CBM = 1 tonne (1000 kg). Certaines compagnies utilisent 1 CBM = 333 kg pour l&apos;aérien.
          </p>
        </CardContent>
      </Card>

      {/* Surcharges */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">📋 Surcharges Courantes</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {surcharges.map((sur) => (
            <Card key={sur.code} className="bg-white">
              <CardHeader className="pb-2">
                <CardTitle className="flex items-center gap-2">
                  <span className="px-3 py-1 bg-purple-600 text-white rounded-md font-mono text-sm">
                    {sur.code}
                  </span>
                  <span className="text-base">{sur.name}</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 text-sm">{sur.description}</p>
                <p className="text-xs text-gray-500 mt-2">Variation : {sur.variation}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Additional fees */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">💵 Frais Additionnels</h2>
        <Card className="bg-white">
          <CardContent className="pt-6">
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b">
                    <th className="text-left py-2 font-medium">Frais</th>
                    <th className="text-left py-2 font-medium">Description</th>
                    <th className="text-right py-2 font-medium">Montant typique</th>
                  </tr>
                </thead>
                <tbody>
                  {fraisAdditionnels.map((frais) => (
                    <tr key={frais.name} className="border-b last:border-0">
                      <td className="py-3 font-medium text-gray-900">{frais.name}</td>
                      <td className="py-3 text-gray-600">{frais.description}</td>
                      <td className="py-3 text-right font-mono text-gray-700">{frais.typical}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Example calculation */}
      <Card className="mt-8 bg-green-50 border-green-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-green-900 mb-3">📊 Exemple de Devis FCL</h3>
          <div className="bg-white p-4 rounded-lg border">
            <p className="text-sm text-gray-600 mb-3">Conteneur 40&apos; Shanghai → Le Havre</p>
            <div className="space-y-2 font-mono text-sm">
              <div className="flex justify-between">
                <span>Ocean Freight (base)</span>
                <span>1,800 USD</span>
              </div>
              <div className="flex justify-between">
                <span>BAF</span>
                <span>450 USD</span>
              </div>
              <div className="flex justify-between">
                <span>LSS</span>
                <span>180 USD</span>
              </div>
              <div className="flex justify-between">
                <span>THC Origin</span>
                <span>150 USD</span>
              </div>
              <div className="flex justify-between">
                <span>THC Destination</span>
                <span>280 EUR</span>
              </div>
              <div className="flex justify-between">
                <span>ISPS</span>
                <span>12 USD</span>
              </div>
              <div className="flex justify-between">
                <span>Documentation</span>
                <span>45 USD</span>
              </div>
              <div className="border-t pt-2 flex justify-between font-bold">
                <span>Total estimé</span>
                <span>~2,637 USD + 280 EUR</span>
              </div>
            </div>
          </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 pour Optimiser</h3>
          <ul className="list-disc list-inside space-y-2 text-amber-800">
            <li>Demandez des devis &quot;All-in&quot; pour éviter les surprises de surcharges</li>
            <li>Comparez les transitaires sur le total, pas seulement le fret de base</li>
            <li>Anticipez la haute saison (septembre-novembre) avec des réservations précoces</li>
            <li>Optimisez le remplissage des conteneurs pour réduire le coût unitaire</li>
            <li>Vérifiez les surcharges qui peuvent changer entre devis et facture</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}