import { getTranslations } from 'next-intl/server';
import { Link } from '@/i18n/navigation';
import { Card, CardContent } from '@/components/ui/card';
import { Globe } from 'lucide-react';

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

  const routes = t.raw('portsRoutes.routes') as Array<{
    name: string;
    description: string;
    via: string;
    transitTime: string;
    majorPorts: string[];
  }>;
  const passages = t.raw('portsRoutes.passages') as Array<{
    name: string;
    location: string;
    length: string;
    description: string;
    keyStat: string;
  }>;
  const ports = t.raw('portsRoutes.ports') as Array<{
    rank: number;
    port: string;
    country: string;
    teu: string;
  }>;

  return (
    <div className="space-y-6">
      <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>
          {t('backToWiki')}
        </Link>
      </div>

      <div className="mb-8">
        <div className="flex items-center gap-3">
          <Globe className="w-10 h-10 text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">{t('portsRoutes.title')}</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">{t('portsRoutes.description')}</p>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">
          {t('portsRoutes.majorRoutesTitle')}
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {routes.map(route => (
            <Card key={route.name} className="bg-white">
              <CardContent className="pt-4">
                <h4 className="font-semibold text-gray-900 mb-1">{route.name}</h4>
                <p className="text-sm text-gray-600 mb-3">{route.description}</p>
                <div className="flex items-center gap-4 text-sm">
                  <span className="text-gray-500">
                    {t('portsRoutes.colVia')}:{' '}
                    <strong className="text-gray-800">{route.via}</strong>
                  </span>
                  <span className="text-gray-500">
                    {t('portsRoutes.colTransit')}:{' '}
                    <strong className="text-blue-600">{route.transitTime}</strong>
                  </span>
                </div>
                <div className="flex flex-wrap gap-1 mt-2">
                  {route.majorPorts.map(port => (
                    <span
                      key={port}
                      className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded"
                    >
                      {port}
                    </span>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('portsRoutes.passagesTitle')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {passages.map(p => (
            <Card key={p.name} className="bg-white border-blue-200">
              <CardContent className="pt-4">
                <div className="flex items-start justify-between mb-2">
                  <div>
                    <h4 className="font-semibold text-gray-900">{p.name}</h4>
                    <p className="text-sm text-gray-500">
                      {p.location} — {t('portsRoutes.colLength')}: {p.length}
                    </p>
                  </div>
                  <span className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded font-medium whitespace-nowrap">
                    {p.keyStat}
                  </span>
                </div>
                <p className="text-sm text-gray-600">{p.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('portsRoutes.portsTitle')}</h2>
        <div className="overflow-x-auto">
          <table className="w-full text-sm bg-white rounded-lg border">
            <thead className="bg-gray-50">
              <tr>
                <th className="text-left p-3 font-medium">{t('portsRoutes.colRank')}</th>
                <th className="text-left p-3 font-medium">{t('portsRoutes.colPort')}</th>
                <th className="text-left p-3 font-medium">{t('portsRoutes.colCountry')}</th>
                <th className="text-right p-3 font-medium">{t('portsRoutes.colTeu')}</th>
              </tr>
            </thead>
            <tbody>
              {ports.map(port => (
                <tr key={port.rank} className="border-t hover:bg-gray-50">
                  <td className="p-3 font-bold text-gray-400">#{port.rank}</td>
                  <td className="p-3 font-medium text-gray-900">{port.port}</td>
                  <td className="p-3 text-gray-600">{port.country}</td>
                  <td className="p-3 text-right font-mono text-blue-600">{port.teu}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
        <Card className="bg-blue-50 border-blue-200">
          <CardContent className="pt-6">
            <h3 className="font-semibold text-blue-900 mb-2">{t('portsRoutes.hubTitle')}</h3>
            <p className="text-sm text-blue-800">{t('portsRoutes.hubDescription')}</p>
          </CardContent>
        </Card>
        <Card className="bg-green-50 border-green-200">
          <CardContent className="pt-6">
            <h3 className="font-semibold text-green-900 mb-2">{t('portsRoutes.gatewayTitle')}</h3>
            <p className="text-sm text-green-800">{t('portsRoutes.gatewayDescription')}</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}