/**
 * Ports et Routes Maritimes - Wiki Page
 *
 * Les principales routes commerciales mondiales
 */

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

const majorRoutes = [
  {
    name: 'Asie - Europe',
    description: 'La plus importante route commerciale mondiale',
    transitTime: '28-35 jours',
    volume: '~24 millions TEU/an',
    keyPorts: ['Shanghai', 'Singapour', 'Rotterdam', 'Hambourg', 'Anvers'],
    passages: ['Canal de Suez', 'Détroit de Malacca'],
  },
  {
    name: 'Asie - Amérique du Nord (Pacifique)',
    description: 'Deuxième route la plus importante',
    transitTime: '12-18 jours',
    volume: '~26 millions TEU/an',
    keyPorts: ['Shanghai', 'Busan', 'Los Angeles', 'Long Beach', 'Seattle'],
    passages: ['Traversée Pacifique directe'],
  },
  {
    name: 'Europe - Amérique du Nord (Atlantique)',
    description: 'Route transatlantique historique',
    transitTime: '8-12 jours',
    volume: '~8 millions TEU/an',
    keyPorts: ['Rotterdam', 'Anvers', 'New York', 'Savannah', 'Charleston'],
    passages: ['Traversée Atlantique directe'],
  },
  {
    name: 'Asie - Méditerranée',
    description: 'Variante de la route Asie-Europe via Med',
    transitTime: '18-25 jours',
    volume: '~6 millions TEU/an',
    keyPorts: ['Shanghai', 'Pirée', 'Gênes', 'Barcelone', 'Tanger Med'],
    passages: ['Canal de Suez', 'Détroit de Gibraltar'],
  },
];

const strategicPassages = [
  {
    name: 'Canal de Suez',
    location: 'Égypte',
    opened: '1869',
    length: '193.3 km',
    transitTime: '12-16 heures',
    traffic: '~20,000 navires/an',
    importance: 'Relie la Méditerranée à la Mer Rouge. Raccourcit de 7,000 km la route Europe-Asie.',
  },
  {
    name: 'Canal de Panama',
    location: 'Panama',
    opened: '1914',
    length: '82 km',
    transitTime: '8-10 heures',
    traffic: '~14,000 navires/an',
    importance: 'Relie l\'Atlantique au Pacifique. Crucial pour le commerce Asie-Côte Est USA.',
  },
  {
    name: 'Détroit de Malacca',
    location: 'Malaisie/Indonésie',
    opened: 'Naturel',
    length: '800 km',
    transitTime: '12 heures',
    traffic: '~90,000 navires/an',
    importance: 'Point de passage obligé entre Océan Indien et Mer de Chine. 25% du commerce mondial.',
  },
  {
    name: 'Détroit de Gibraltar',
    location: 'Espagne/Maroc',
    opened: 'Naturel',
    length: '60 km',
    transitTime: '2-3 heures',
    traffic: '~100,000 navires/an',
    importance: 'Entrée en Méditerranée depuis l\'Atlantique.',
  },
];

const majorPorts = [
  { name: 'Shanghai', country: 'Chine', volume: '47.0', rank: 1 },
  { name: 'Singapour', country: 'Singapour', volume: '37.2', rank: 2 },
  { name: 'Ningbo-Zhoushan', country: 'Chine', volume: '33.0', rank: 3 },
  { name: 'Shenzhen', country: 'Chine', volume: '30.0', rank: 4 },
  { name: 'Guangzhou', country: 'Chine', volume: '24.2', rank: 5 },
  { name: 'Busan', country: 'Corée du Sud', volume: '22.7', rank: 6 },
  { name: 'Qingdao', country: 'Chine', volume: '22.0', rank: 7 },
  { name: 'Rotterdam', country: 'Pays-Bas', volume: '14.5', rank: 8 },
  { name: 'Dubai/Jebel Ali', country: 'EAU', volume: '14.1', rank: 9 },
  { name: 'Tianjin', country: 'Chine', volume: '14.0', rank: 10 },
];

export default function PortsRoutesPage() {
  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">Ports et Routes Maritimes</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">
          Le transport maritime assure plus de 80% du commerce mondial en volume.
          Comprendre les grandes routes et les ports stratégiques est essentiel pour optimiser sa supply chain.
        </p>
      </div>

      {/* Key Stats */}
      <Card className="bg-blue-50 border-blue-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-blue-900 mb-3">📊 Chiffres Clés du Maritime Mondial</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="text-center">
              <p className="text-3xl font-bold text-blue-700">80%</p>
              <p className="text-sm text-blue-600">du commerce mondial (volume)</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-blue-700">~800M</p>
              <p className="text-sm text-blue-600">TEU transportés/an</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-blue-700">~60,000</p>
              <p className="text-sm text-blue-600">navires marchands</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-blue-700">~14B</p>
              <p className="text-sm text-blue-600">tonnes de marchandises/an</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Major Routes */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">🛳️ Routes Commerciales Majeures</h2>
        <div className="space-y-4">
          {majorRoutes.map((route) => (
            <Card key={route.name} className="bg-white">
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">{route.name}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-3">{route.description}</p>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                  <div>
                    <span className="text-gray-500">Transit time:</span>
                    <p className="font-medium">{route.transitTime}</p>
                  </div>
                  <div>
                    <span className="text-gray-500">Volume annuel:</span>
                    <p className="font-medium">{route.volume}</p>
                  </div>
                  <div>
                    <span className="text-gray-500">Ports clés:</span>
                    <p className="font-medium">{route.keyPorts.slice(0, 3).join(', ')}</p>
                  </div>
                  <div>
                    <span className="text-gray-500">Passages:</span>
                    <p className="font-medium">{route.passages.join(', ')}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Strategic Passages */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">⚓ Passages Stratégiques</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {strategicPassages.map((passage) => (
            <Card key={passage.name} className="bg-white">
              <CardHeader className="pb-2">
                <CardTitle className="flex items-center gap-2">
                  <span className="text-lg">{passage.name}</span>
                  <span className="text-xs bg-gray-100 px-2 py-1 rounded">{passage.location}</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 text-sm mb-3">{passage.importance}</p>
                <div className="grid grid-cols-2 gap-2 text-xs">
                  <div className="bg-gray-50 p-2 rounded">
                    <span className="text-gray-500">Longueur:</span>
                    <p className="font-medium">{passage.length}</p>
                  </div>
                  <div className="bg-gray-50 p-2 rounded">
                    <span className="text-gray-500">Transit:</span>
                    <p className="font-medium">{passage.transitTime}</p>
                  </div>
                  <div className="bg-gray-50 p-2 rounded">
                    <span className="text-gray-500">Trafic:</span>
                    <p className="font-medium">{passage.traffic}</p>
                  </div>
                  <div className="bg-gray-50 p-2 rounded">
                    <span className="text-gray-500">Ouverture:</span>
                    <p className="font-medium">{passage.opened}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* Top Ports */}
      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">🏆 Top 10 Ports Mondiaux (TEU)</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">Rang</th>
                    <th className="text-left py-2 font-medium">Port</th>
                    <th className="text-left py-2 font-medium">Pays</th>
                    <th className="text-right py-2 font-medium">Volume (M TEU)</th>
                  </tr>
                </thead>
                <tbody>
                  {majorPorts.map((port) => (
                    <tr key={port.name} className="border-b last:border-0 hover:bg-gray-50">
                      <td className="py-3">
                        <span className={`inline-block w-6 h-6 text-center rounded-full text-white text-xs leading-6 ${
                          port.rank <= 3 ? 'bg-yellow-500' : 'bg-gray-400'
                        }`}>
                          {port.rank}
                        </span>
                      </td>
                      <td className="py-3 font-medium text-gray-900">{port.name}</td>
                      <td className="py-3 text-gray-600">{port.country}</td>
                      <td className="py-3 text-right font-mono">{port.volume}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="text-xs text-gray-500 mt-3">Source: World Shipping Council, données approximatives</p>
          </CardContent>
        </Card>
      </div>

      {/* Hub Ports Info */}
      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">🔄 Ports Hub vs Ports Régionaux</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium text-gray-900">Ports Hub (Transbordement)</h4>
              <p className="text-sm text-gray-600 mt-1">
                Grands ports où les conteneurs sont transférés entre navires mères et feeders.
                Ex: Singapour, Tanger Med, Algésiras.
              </p>
              <p className="text-xs text-gray-500 mt-2">Avantage: Desserte mondiale, fréquence élevée</p>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium text-gray-900">Ports Régionaux (Gateway)</h4>
              <p className="text-sm text-gray-600 mt-1">
                Ports desservant directement un hinterland économique.
                Ex: Le Havre, Marseille, Hambourg.
              </p>
              <p className="text-xs text-gray-500 mt-2">Avantage: Proximité du marché final, moins de manutention</p>
            </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>Privilégiez les routes directes pour réduire les délais et risques</li>
            <li>Anticipez les congestions portuaires (Los Angeles, Rotterdam en haute saison)</li>
            <li>Surveillez les perturbations géopolitiques (Canal de Suez, Détroit d&apos;Ormuz)</li>
            <li>Comparez les transbordements vs les services directs selon vos priorités (coût vs délai)</li>
            <li>Vérifiez les connexions ferroviaires/fluviales depuis les ports</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}