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

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

  const timeline = t.raw('transitTime.timeline') as Array<{
    step: string; description: string; delay: string; responsible: string;
  }>;
  const transitTimes = t.raw('transitTime.transitTimes') as Array<{ route: string; time: string; via: string }>;
  const lateFees = t.raw('transitTime.lateFees') as Array<{
    name: string; definition: string; rate: string; location: string;
  }>;
  const potentialDelays = t.raw('transitTime.potentialDelays') as string[];
  const seasonalVariations = t.raw('transitTime.seasonalVariations') as string[];
  const rolloverCauses = t.raw('transitTime.rolloverCauses') as string[];
  const tips = t.raw('transitTime.tips') as string[];

  const keyTerms = [
    { key: 'ETD', def: t('transitTime.etd') },
    { key: 'ETA', def: t('transitTime.eta') },
    { key: 'Cut-off', def: t('transitTime.cutoff') },
    { key: 'Free time', def: t('transitTime.freeTime') },
  ];

  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">
          <Clock className="w-10 h-10 text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">{t('transitTime.title')}</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">{t('transitTime.description')}</p>
      </div>

      <Card className="bg-blue-50 border-blue-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-blue-900 mb-3">{t('transitTime.keyTermsTitle')}</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {keyTerms.map((term) => (
              <div key={term.key}>
                <h4 className="font-medium text-blue-800">{term.key}</h4>
                <p className="text-sm text-blue-700">{term.def}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('transitTime.timelineTitle')}</h2>
        <div className="space-y-3">
          {timeline.map((item, index) => (
            <Card key={index} className={`bg-white ${index === 5 || index === 7 ? 'border-blue-300 border-2' : ''}`}>
              <CardContent className="py-4">
                <div className="flex items-start gap-4">
                  <div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-sm">
                    {index + 1}
                  </div>
                  <div className="flex-1">
                    <div className="flex flex-wrap items-center gap-2 mb-1">
                      <h4 className="font-medium text-gray-900">{item.step}</h4>
                      <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{item.delay}</span>
                    </div>
                    <p className="text-sm text-gray-600">{item.description}</p>
                    <p className="text-xs text-gray-400 mt-1">{t('transitTime.responsibleLabel')} : {item.responsible}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('transitTime.transitTimesTitle')}</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">{t('transitTime.colRoute')}</th>
                    <th className="text-center py-2 font-medium">{t('transitTime.colTime')}</th>
                    <th className="text-right py-2 font-medium">{t('transitTime.colVia')}</th>
                  </tr>
                </thead>
                <tbody>
                  {transitTimes.map((tt) => (
                    <tr key={tt.route} className="border-b last:border-0 hover:bg-gray-50">
                      <td className="py-3 text-gray-900">{tt.route}</td>
                      <td className="py-3 text-center font-mono text-blue-600">{tt.time}</td>
                      <td className="py-3 text-right text-gray-500">{tt.via}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="text-xs text-gray-500 mt-3">{t('transitTime.transitNote')}</p>
          </CardContent>
        </Card>
      </div>

      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">{t('transitTime.freeTimeTitle')}</h3>
          <p className="text-gray-600 mb-4">{t('transitTime.freeTimeDescription')}</p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium text-gray-900">{t('transitTime.freeTimeStandard')}</h4>
              <p className="text-2xl font-bold text-blue-600">{t('transitTime.freeTimeValue')}</p>
              <p className="text-xs text-gray-500">{t('transitTime.freeTimeNote')}</p>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium text-gray-900">{t('transitTime.demurrageStart')}</h4>
              <p className="text-sm text-gray-600">{t('transitTime.demurrageStartDesc')}</p>
            </div>
            <div className="bg-white p-4 rounded-lg border">
              <h4 className="font-medium text-gray-900">{t('transitTime.detentionStart')}</h4>
              <p className="text-sm text-gray-600">{t('transitTime.detentionStartDesc')}</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('transitTime.lateFeesTitle')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {lateFees.map((fee) => (
            <Card key={fee.name} className="bg-white border-red-200">
              <CardContent className="pt-4">
                <h4 className="text-lg font-semibold text-red-700 mb-1">{fee.name}</h4>
                <p className="text-gray-600 text-sm mb-2">{fee.definition}</p>
                <div className="flex justify-between text-sm">
                  <span className="text-gray-500">{t('transitTime.colRate')} :</span>
                  <span className="font-mono text-red-600">{fee.rate}</span>
                </div>
                <div className="flex justify-between text-sm mt-1">
                  <span className="text-gray-500">{t('transitTime.colLocation')} :</span>
                  <span className="text-gray-700">{fee.location}</span>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <Card className="mt-8 bg-orange-50 border-orange-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-orange-900 mb-3">{t('transitTime.delayFactorsTitle')}</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <h4 className="font-medium text-orange-800">{t('transitTime.potentialDelaysTitle')}</h4>
              <ul className="text-sm text-orange-700 mt-2 space-y-1">
                {potentialDelays.map((d, i) => <li key={i}>• {d}</li>)}
              </ul>
            </div>
            <div>
              <h4 className="font-medium text-orange-800">{t('transitTime.seasonalVariationsTitle')}</h4>
              <ul className="text-sm text-orange-700 mt-2 space-y-1">
                {seasonalVariations.map((v, i) => <li key={i}>• {v}</li>)}
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="mt-4 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">{t('transitTime.rolloverTitle')}</h3>
          <p className="text-gray-600 mb-3">{t('transitTime.rolloverDescription')}</p>
          <div className="bg-white p-4 rounded-lg border">
            <h4 className="font-medium text-gray-900">{t('transitTime.rolloverCausesTitle')}</h4>
            <ul className="text-sm text-gray-600 mt-2 space-y-1">
              {rolloverCauses.map((cause, i) => <li key={i}>• {cause}</li>)}
            </ul>
            <p className="text-xs text-gray-500 mt-3">{t('transitTime.rolloverImpact')}</p>
          </div>
        </CardContent>
      </Card>

      <Card className="mt-8 bg-amber-50 border-amber-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-amber-900 mb-3">{t('transitTime.tipsTitle')}</h3>
          <ul className="list-disc list-inside space-y-2 text-amber-800">
            {tips.map((tip, i) => <li key={i}>{tip}</li>)}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}