import { getTranslations } from 'next-intl/server';
import { Link } from '@/i18n/navigation';
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';

type TopicKey =
  | 'incoterms'
  | 'documents'
  | 'containers'
  | 'lclFcl'
  | 'customs'
  | 'insurance'
  | 'freight'
  | 'ports'
  | 'vgm'
  | 'imdg'
  | 'letterOfCredit'
  | 'transitTime';

interface WikiTopic {
  key: TopicKey;
  icon: LucideIcon;
  href: string;
  tags: string[];
}

const wikiTopics: WikiTopic[] = [
  {
    key: 'incoterms',
    icon: ScrollText,
    href: '/dashboard/wiki/incoterms',
    tags: ['FOB', 'CIF', 'EXW', 'DDP'],
  },
  {
    key: 'documents',
    icon: ClipboardList,
    href: '/dashboard/wiki/documents-transport',
    tags: ['B/L', 'Sea Waybill', 'Manifest'],
  },
  {
    key: 'containers',
    icon: Package,
    href: '/dashboard/wiki/conteneurs',
    tags: ["20'", "40'", 'Reefer', 'Open Top'],
  },
  { key: 'lclFcl', icon: Scale, href: '/dashboard/wiki/lcl-vs-fcl', tags: ['LCL', 'FCL'] },
  {
    key: 'customs',
    icon: ShieldCheck,
    href: '/dashboard/wiki/douanes',
    tags: ['HS Code', 'EUR.1', 'AEO'],
  },
  {
    key: 'insurance',
    icon: Shield,
    href: '/dashboard/wiki/assurance',
    tags: ['ICC A', 'ICC B', 'ICC C'],
  },
  {
    key: 'freight',
    icon: Calculator,
    href: '/dashboard/wiki/calcul-fret',
    tags: ['CBM', 'THC', 'BAF', 'CAF'],
  },
  {
    key: 'ports',
    icon: Globe,
    href: '/dashboard/wiki/ports-routes',
    tags: ['Hub', 'Suez', 'Panama'],
  },
  { key: 'vgm', icon: Anchor, href: '/dashboard/wiki/vgm', tags: ['SOLAS', 'VGM'] },
  { key: 'imdg', icon: AlertTriangle, href: '/dashboard/wiki/imdg', tags: ['IMDG', 'MSDS', 'DG'] },
  {
    key: 'letterOfCredit',
    icon: CreditCard,
    href: '/dashboard/wiki/lettre-credit',
    tags: ['L/C', 'SWIFT', 'UCP 600'],
  },
  {
    key: 'transitTime',
    icon: Timer,
    href: '/dashboard/wiki/transit-time',
    tags: ['Cut-off', 'Free time', 'Demurrage'],
  },
];

export default async function WikiPage() {
  const t = await getTranslations('dashboard.wiki');

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">{t('title')}</h1>
        <p className="mt-2 text-gray-600">{t('description')}</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">
                    {t(`topics.${topic.key}.title` as any)}
                  </CardTitle>
                  <CardDescription className="text-gray-600">
                    {t(`topics.${topic.key}.description` as any)}
                  </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">{t('needHelp')} </span>
          {t('helpText')}
        </p>
      </div>
    </div>
  );
}