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

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

  const list = t.raw('incoterms.list') as Array<{
    code: string;
    name: string;
    description: string;
    risk: string;
    transport: string;
  }>;
  const categorySections = t.raw('incoterms.categorySections') as Array<{
    name: string;
    description: string;
    terms: string[];
  }>;
  const keyPoints = t.raw('incoterms.keyPoints') as string[];
  const tips = t.raw('incoterms.tips') as string[];

  const categoryColors = [
    'bg-green-100 text-green-800',
    'bg-red-100 text-red-800',
    'bg-blue-100 text-blue-800',
  ];

  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">
          <ScrollText className="w-10 h-10 text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">{t('incoterms.title')}</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">{t('incoterms.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('incoterms.keyPointsTitle')}</h3>
          <ul className="space-y-2">
            {keyPoints.map((point, i) => (
              <li key={i} className="flex items-start gap-2 text-blue-800">
                <span className="mt-1 w-2 h-2 bg-blue-600 rounded-full flex-shrink-0" />
                <span className="text-sm">{point}</span>
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('incoterms.categoriesTitle')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {categorySections.map((cat, i) => (
            <Card key={i} className="bg-white">
              <CardContent className="pt-4">
                <h3 className="font-semibold text-gray-900">{cat.name}</h3>
                <p className="text-sm text-gray-600 mt-1">{cat.description}</p>
                <div className="flex flex-wrap gap-1 mt-3">
                  {cat.terms.map(term => (
                    <span
                      key={term}
                      className={`px-2 py-0.5 rounded text-xs font-mono font-bold ${categoryColors[i]}`}
                    >
                      {term}
                    </span>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('incoterms.tableTitle')}</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('incoterms.colCode')}</th>
                <th className="text-left p-3 font-medium">{t('incoterms.colName')}</th>
                <th className="text-left p-3 font-medium">{t('incoterms.colDescription')}</th>
                <th className="text-left p-3 font-medium">{t('incoterms.colRisk')}</th>
                <th className="text-left p-3 font-medium">{t('incoterms.colTransport')}</th>
              </tr>
            </thead>
            <tbody>
              {list.map(item => (
                <tr key={item.code} className="border-t hover:bg-gray-50">
                  <td className="p-3 font-mono font-bold text-blue-600">{item.code}</td>
                  <td className="p-3 font-medium">{item.name}</td>
                  <td className="p-3 text-gray-600">{item.description}</td>
                  <td className="p-3 text-gray-500">{item.risk}</td>
                  <td className="p-3 text-gray-500">{item.transport}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <Card className="mt-8 bg-amber-50 border-amber-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-amber-900 mb-3">{t('incoterms.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>
  );
}