/**
 * 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';
import {
  ScrollText,
  ClipboardList,
  Package,
  Scale,
  ShieldCheck,
  Shield,
  Calculator,
  Globe,
  Anchor,
  AlertTriangle,
  CreditCard,
  Timer,
  type LucideIcon,
} from 'lucide-react';

interface WikiTopic {
  title: string;
  description: string;
  icon: LucideIcon;
  href: string;
  tags: string[];
}

const wikiTopics: WikiTopic[] = [
  {
    title: 'Incoterms 2020',
    description: 'Les règles internationales pour l\'interprétation des termes commerciaux',
    icon: ScrollText,
    href: '/dashboard/wiki/incoterms',
    tags: ['FOB', 'CIF', 'EXW', 'DDP'],
  },
  {
    title: 'Documents de Transport',
    description: 'Les documents essentiels pour le transport maritime',
    icon: ClipboardList,
    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: Package,
    href: '/dashboard/wiki/conteneurs',
    tags: ['20\'', '40\'', 'Reefer', 'Open Top'],
  },
  {
    title: 'LCL vs FCL',
    description: 'Différences entre groupage et conteneur complet',
    icon: Scale,
    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: ShieldCheck,
    href: '/dashboard/wiki/douanes',
    tags: ['Déclaration', 'Tarifs', 'Régimes'],
  },
  {
    title: 'Assurance Maritime',
    description: 'Protection des marchandises en transit',
    icon: Shield,
    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: Calculator,
    href: '/dashboard/wiki/calcul-fret',
    tags: ['CBM', 'THC', 'BAF', 'CAF'],
  },
  {
    title: 'Ports et Routes Maritimes',
    description: 'Les principales routes commerciales mondiales',
    icon: Globe,
    href: '/dashboard/wiki/ports-routes',
    tags: ['Hub', 'Détroits', 'Canaux'],
  },
  {
    title: 'VGM (Verified Gross Mass)',
    description: 'Obligation de pesée des conteneurs (SOLAS)',
    icon: Anchor,
    href: '/dashboard/wiki/vgm',
    tags: ['SOLAS', 'Pesée', 'Certification'],
  },
  {
    title: 'Marchandises Dangereuses (IMDG)',
    description: 'Transport de matières dangereuses par mer',
    icon: AlertTriangle,
    href: '/dashboard/wiki/imdg',
    tags: ['Classes', 'Étiquetage', 'Sécurité'],
  },
  {
    title: 'Lettre de Crédit (L/C)',
    description: 'Instrument de paiement international sécurisé',
    icon: CreditCard,
    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: Timer,
    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) => {
          const IconComponent = topic.icon;
          return (
            <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">
                    <div className="h-10 w-10 rounded-lg bg-blue-50 flex items-center justify-center">
                      <IconComponent className="h-5 w-5 text-blue-600" />
                    </div>
                  </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>
  );
}
