/**
 * Wiki Page - Maritime Import/Export Knowledge Base
 *
 * Main page displaying cards for all wiki topics
 */

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

const wikiTopics = [
  {
    title: 'Incoterms 2020',
    description: 'Les règles internationales pour l\'interprétation des termes commerciaux',
    icon: '📜',
    href: '/dashboard/wiki/incoterms',
    tags: ['FOB', 'CIF', 'EXW', 'DDP'],
  },
  {
    title: 'Documents de Transport',
    description: 'Les documents essentiels pour le transport maritime',
    icon: '📋',
    href: '/dashboard/wiki/documents-transport',
    tags: ['B/L', 'Sea Waybill', 'Manifest'],
  },
  {
    title: 'Conteneurs et Types de Cargo',
    description: 'Guide complet des types de conteneurs maritimes',
    icon: '📦',
    href: '/dashboard/wiki/conteneurs',
    tags: ['20\'', '40\'', 'Reefer', 'Open Top'],
  },
  {
    title: 'LCL vs FCL',
    description: 'Différences entre groupage et conteneur complet',
    icon: '⚖️',
    href: '/dashboard/wiki/lcl-vs-fcl',
    tags: ['Groupage', 'Complet', 'Coûts'],
  },
  {
    title: 'Procédures Douanières',
    description: 'Guide des formalités douanières import/export',
    icon: '🛃',
    href: '/dashboard/wiki/douanes',
    tags: ['Déclaration', 'Tarifs', 'Régimes'],
  },
  {
    title: 'Assurance Maritime',
    description: 'Protection des marchandises en transit',
    icon: '🛡️',
    href: '/dashboard/wiki/assurance',
    tags: ['ICC A', 'ICC B', 'ICC C'],
  },
  {
    title: 'Calcul du Fret Maritime',
    description: 'Comment sont calculés les coûts de transport',
    icon: '🧮',
    href: '/dashboard/wiki/calcul-fret',
    tags: ['CBM', 'THC', 'BAF', 'CAF'],
  },
  {
    title: 'Ports et Routes Maritimes',
    description: 'Les principales routes commerciales mondiales',
    icon: '🌍',
    href: '/dashboard/wiki/ports-routes',
    tags: ['Hub', 'Détroits', 'Canaux'],
  },
  {
    title: 'VGM (Verified Gross Mass)',
    description: 'Obligation de pesée des conteneurs (SOLAS)',
    icon: '⚓',
    href: '/dashboard/wiki/vgm',
    tags: ['SOLAS', 'Pesée', 'Certification'],
  },
  {
    title: 'Marchandises Dangereuses (IMDG)',
    description: 'Transport de matières dangereuses par mer',
    icon: '⚠️',
    href: '/dashboard/wiki/imdg',
    tags: ['Classes', 'Étiquetage', 'Sécurité'],
  },
  {
    title: 'Lettre de Crédit (L/C)',
    description: 'Instrument de paiement international sécurisé',
    icon: '💳',
    href: '/dashboard/wiki/lettre-credit',
    tags: ['Banque', 'Paiement', 'Sécurité'],
  },
  {
    title: 'Transit Time et Délais',
    description: 'Comprendre les délais en transport maritime',
    icon: '⏱️',
    href: '/dashboard/wiki/transit-time',
    tags: ['Cut-off', 'Free time', 'Demurrage'],
  },
];

export default function WikiPage() {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">Wiki Maritime</h1>
        <p className="mt-2 text-gray-600">
          Base de connaissances sur l&apos;import/export maritime. Cliquez sur un sujet pour en savoir plus.
        </p>
      </div>

      {/* Cards Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {wikiTopics.map((topic) => (
          <Link key={topic.href} href={topic.href} className="block group">
            <Card className="h-full transition-all duration-200 hover:shadow-lg hover:border-blue-300 bg-white">
              <CardHeader>
                <div className="flex items-start justify-between">
                  <span className="text-4xl">{topic.icon}</span>
                </div>
                <CardTitle className="text-xl mt-3 group-hover:text-blue-600 transition-colors">
                  {topic.title}
                </CardTitle>
                <CardDescription className="text-gray-600">
                  {topic.description}
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {topic.tags.map((tag) => (
                    <span
                      key={tag}
                      className="px-2 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>

      {/* Footer info */}
      <div className="mt-8 p-4 bg-blue-50 rounded-lg">
        <p className="text-sm text-blue-800">
          <span className="font-semibold">Besoin d&apos;aide ?</span> Ces guides sont régulièrement mis à jour avec les dernières réglementations et bonnes pratiques du secteur maritime.
        </p>
      </div>
    </div>
  );
}