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

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

  const documents = t.raw('documentsTransport.documents') as Array<{
    name: string;
    type: string;
    description: string;
    types: string[];
  }>;
  const additionalDocs = t.raw('documentsTransport.additionalDocs') as Array<{
    name: string;
    description: string;
  }>;
  const blFunctions = t.raw('documentsTransport.blFunctions') as Array<{
    title: string;
    description: 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">
          <ClipboardList className="w-10 h-10 text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">{t('documentsTransport.title')}</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">{t('documentsTransport.description')}</p>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">
          {t('documentsTransport.mainDocumentsTitle')}
        </h2>
        <div className="space-y-4">
          {documents.map(doc => (
            <Card key={doc.name} className="bg-white">
              <CardContent className="pt-4">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <h4 className="font-semibold text-gray-900">{doc.name}</h4>
                      <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded">
                        {doc.type}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 mb-2">{doc.description}</p>
                    <div className="flex flex-wrap gap-1">
                      {doc.types.map((type, j) => (
                        <span
                          key={j}
                          className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded"
                        >
                          {type}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">
          {t('documentsTransport.additionalDocsTitle')}
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {additionalDocs.map(doc => (
            <Card key={doc.name} className="bg-white">
              <CardContent className="pt-4">
                <h4 className="font-semibold text-gray-900">{doc.name}</h4>
                <p className="text-sm text-gray-600 mt-1">{doc.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <Card className="mt-8 bg-blue-50 border-blue-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-blue-900 mb-4">
            {t('documentsTransport.blFocusTitle')}
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {blFunctions.map(fn => (
              <div key={fn.title} className="bg-white p-4 rounded-lg border border-blue-200">
                <h4 className="font-medium text-blue-800 mb-1">{fn.title}</h4>
                <p className="text-sm text-gray-600">{fn.description}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}