/**
 * Documents de Transport Maritime - Wiki Page
 *
 * Essential documents for maritime shipping
 */

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

const documents = [
  {
    name: 'Bill of Lading (B/L)',
    french: 'Connaissement',
    description: 'Document principal du transport maritime. Il fait preuve du contrat de transport, accuse réception des marchandises et constitue un titre de propriété négociable.',
    types: [
      { name: 'B/L à ordre', desc: 'Négociable, peut être endossé' },
      { name: 'B/L nominatif', desc: 'Au nom d\'un destinataire précis' },
      { name: 'B/L au porteur', desc: 'Propriété à celui qui le détient' },
    ],
    importance: 'Critique',
    icon: '📄',
  },
  {
    name: 'Sea Waybill',
    french: 'Lettre de transport maritime',
    description: 'Document non négociable servant de preuve du contrat de transport et de reçu. Plus simple que le B/L car pas besoin de présenter l\'original pour retirer les marchandises.',
    types: [
      { name: 'Standard', desc: 'Pour expéditions entre parties de confiance' },
      { name: 'Express', desc: 'Libération rapide sans documents originaux' },
    ],
    importance: 'Important',
    icon: '📋',
  },
  {
    name: 'Manifest',
    french: 'Manifeste de cargaison',
    description: 'Liste complète de toutes les marchandises chargées à bord d\'un navire. Utilisé par les autorités douanières et portuaires.',
    types: [
      { name: 'Cargo Manifest', desc: 'Liste détaillée des marchandises' },
      { name: 'Freight Manifest', desc: 'Inclut les informations de fret' },
    ],
    importance: 'Obligatoire',
    icon: '📑',
  },
  {
    name: 'Packing List',
    french: 'Liste de colisage',
    description: 'Document détaillant le contenu de chaque colis, ses dimensions et son poids. Essentiel pour le dédouanement.',
    types: [
      { name: 'Simple', desc: 'Liste basique des contenus' },
      { name: 'Détaillée', desc: 'Avec poids, dimensions, marquage' },
    ],
    importance: 'Important',
    icon: '📦',
  },
  {
    name: 'Commercial Invoice',
    french: 'Facture commerciale',
    description: 'Facture établie par le vendeur décrivant les marchandises, leur valeur et les conditions de vente. Base pour le calcul des droits de douane.',
    types: [
      { name: 'Proforma', desc: 'Avant expédition, pour cotation' },
      { name: 'Définitive', desc: 'Document final de facturation' },
    ],
    importance: 'Critique',
    icon: '🧾',
  },
  {
    name: 'Certificate of Origin',
    french: 'Certificat d\'origine',
    description: 'Document certifiant le pays de fabrication ou de transformation des marchandises. Requis pour les préférences tarifaires.',
    types: [
      { name: 'EUR.1', desc: 'Pour les échanges UE' },
      { name: 'Form A', desc: 'Système de préférences généralisées' },
      { name: 'Non préférentiel', desc: 'Attestation simple d\'origine' },
    ],
    importance: 'Selon destination',
    icon: '🏭',
  },
];

const additionalDocs = [
  {
    name: 'Dangerous Goods Declaration',
    description: 'Obligatoire pour les marchandises dangereuses (IMDG)',
  },
  {
    name: 'Phytosanitary Certificate',
    description: 'Pour les produits végétaux et alimentaires',
  },
  {
    name: 'Insurance Certificate',
    description: 'Preuve de couverture d\'assurance cargo',
  },
  {
    name: 'Inspection Certificate',
    description: 'Rapport de contrôle qualité avant embarquement',
  },
  {
    name: 'VGM Declaration',
    description: 'Déclaration du poids vérifié du conteneur (SOLAS)',
  },
];

export default function DocumentsTransportPage() {
  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">Documents de Transport Maritime</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">
          Le transport maritime international nécessite une documentation précise et complète.
          Ces documents servent de preuve de propriété, de contrat de transport et sont essentiels
          pour le passage en douane.
        </p>
      </div>

      {/* Importance Warning */}
      <Card className="bg-red-50 border-red-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-red-900 mb-2">Important</h3>
          <p className="text-red-800">
            Une erreur ou un manque de document peut entraîner des retards considérables, des frais
            de surestaries (demurrage) et même le refus d&apos;entrée des marchandises dans le pays de destination.
          </p>
        </CardContent>
      </Card>

      {/* Main Documents */}
      <h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Documents Principaux</h2>
      <div className="space-y-4">
        {documents.map((doc) => (
          <Card key={doc.name} className="bg-white">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <span className="text-2xl">{doc.icon}</span>
                  <div>
                    <span className="text-lg">{doc.name}</span>
                    <span className="text-gray-500 text-sm ml-2">({doc.french})</span>
                  </div>
                </div>
                <span className={`px-3 py-1 text-xs font-medium rounded-full ${
                  doc.importance === 'Critique' ? 'bg-red-100 text-red-800' :
                  doc.importance === 'Obligatoire' ? 'bg-orange-100 text-orange-800' :
                  'bg-blue-100 text-blue-800'
                }`}>
                  {doc.importance}
                </span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600 mb-4">{doc.description}</p>
              <div className="bg-gray-50 p-3 rounded-lg">
                <p className="text-sm font-medium text-gray-700 mb-2">Types:</p>
                <ul className="space-y-1">
                  {doc.types.map((type) => (
                    <li key={type.name} className="text-sm flex">
                      <span className="font-medium text-gray-900 min-w-[120px]">{type.name}:</span>
                      <span className="text-gray-600">{type.desc}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Bill of Lading Detail */}
      <Card className="mt-8 bg-blue-50 border-blue-200">
        <CardHeader>
          <CardTitle className="text-blue-900">Focus: Le Bill of Lading (B/L)</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-blue-800 mb-4">
            Le B/L remplit trois fonctions essentielles:
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg">
              <h4 className="font-semibold text-blue-900 mb-2">1. Reçu</h4>
              <p className="text-sm text-gray-600">
                Confirme que le transporteur a reçu les marchandises dans l&apos;état décrit
              </p>
            </div>
            <div className="bg-white p-4 rounded-lg">
              <h4 className="font-semibold text-blue-900 mb-2">2. Contrat</h4>
              <p className="text-sm text-gray-600">
                Preuve du contrat de transport entre le chargeur et le transporteur
              </p>
            </div>
            <div className="bg-white p-4 rounded-lg">
              <h4 className="font-semibold text-blue-900 mb-2">3. Titre</h4>
              <p className="text-sm text-gray-600">
                Document de titre permettant le transfert de propriété des marchandises
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Additional Documents */}
      <h2 className="text-xl font-bold text-gray-900 mt-8 mb-4">Documents Complémentaires</h2>
      <Card className="bg-white">
        <CardContent className="pt-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {additionalDocs.map((doc) => (
              <div key={doc.name} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
                <span className="text-green-600">✓</span>
                <div>
                  <p className="font-medium text-gray-900">{doc.name}</p>
                  <p className="text-sm text-gray-600">{doc.description}</p>
                </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 Pratiques</h3>
          <ul className="list-disc list-inside space-y-2 text-amber-800">
            <li>Vérifiez la cohérence entre tous les documents (noms, adresses, descriptions)</li>
            <li>Conservez des copies de tous les originaux</li>
            <li>Anticipez les délais d&apos;obtention des certificats (origine, sanitaire, etc.)</li>
            <li>En cas de L/C, les documents doivent correspondre exactement aux exigences</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}