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

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

  const containers = t.raw('conteneurs.containers') as Array<{
    type: string; description: string; internal: string; door: string; volume: string; payload: string;
  }>;
  const specialEquipment = t.raw('conteneurs.specialEquipment') as Array<{ name: string; description: string }>;
  const selectionGuide = t.raw('conteneurs.selectionGuide') as Array<{ condition: string; recommendation: 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">
          <Package className="w-10 h-10 text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">{t('conteneurs.title')}</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">{t('conteneurs.description')}</p>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('conteneurs.standardTitle')}</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('conteneurs.colDimensions')}</th>
                <th className="text-left p-3 font-medium">{t('conteneurs.colInternal')}</th>
                <th className="text-left p-3 font-medium">{t('conteneurs.colDoor')}</th>
                <th className="text-left p-3 font-medium">{t('conteneurs.colVolume')}</th>
                <th className="text-left p-3 font-medium">{t('conteneurs.colPayload')}</th>
              </tr>
            </thead>
            <tbody>
              {containers.map((c) => (
                <tr key={c.type} className="border-t hover:bg-gray-50">
                  <td className="p-3">
                    <div className="font-semibold text-gray-900">{c.type}</div>
                    <div className="text-xs text-gray-500">{c.description}</div>
                  </td>
                  <td className="p-3 font-mono text-xs">{c.internal}</td>
                  <td className="p-3 font-mono text-xs">{c.door}</td>
                  <td className="p-3 font-mono text-xs text-blue-600">{c.volume}</td>
                  <td className="p-3 font-mono text-xs">{c.payload}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('conteneurs.specialEquipmentTitle')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {specialEquipment.map((eq) => (
            <Card key={eq.name} className="bg-white">
              <CardContent className="pt-4">
                <h4 className="font-semibold text-gray-900">{eq.name}</h4>
                <p className="text-sm text-gray-600 mt-1">{eq.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('conteneurs.selectionTitle')}</h3>
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-blue-200">
                <th className="text-left py-2 font-medium text-blue-800">{t('conteneurs.colCondition')}</th>
                <th className="text-left py-2 font-medium text-blue-800">{t('conteneurs.colRecommendation')}</th>
              </tr>
            </thead>
            <tbody>
              {selectionGuide.map((row, i) => (
                <tr key={i} className="border-b border-blue-100 last:border-0">
                  <td className="py-2 text-blue-700">{row.condition}</td>
                  <td className="py-2 font-medium text-blue-900">{row.recommendation}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </div>
  );
}