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

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

  const classes = t.raw('imdg.classes') as Array<{
    class: string;
    name: string;
    description: string;
    subdivisions?: string[];
  }>;
  const documents = t.raw('imdg.documents') as Array<{ name: string; description: string }>;
  const packagingGroups = t.raw('imdg.packagingGroups') as Array<{
    group: 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">
          <AlertTriangle className="w-10 h-10 text-orange-500" />
          <h1 className="text-3xl font-bold text-gray-900">{t('imdg.title')}</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">{t('imdg.description')}</p>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('imdg.classesTitle')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {classes.map(cls => (
            <Card key={cls.class} className="bg-white border-orange-200">
              <CardContent className="pt-4">
                <div className="flex items-center gap-2 mb-1">
                  <span className="px-2 py-0.5 bg-orange-100 text-orange-800 text-xs font-bold rounded">
                    {cls.class}
                  </span>
                  <h4 className="font-semibold text-gray-900">{cls.name}</h4>
                </div>
                <p className="text-sm text-gray-600">{cls.description}</p>
                {cls.subdivisions && (
                  <div className="mt-2">
                    <p className="text-xs font-medium text-gray-500 mb-1">
                      {t('imdg.subdivisionsLabel')}
                    </p>
                    <ul className="text-xs text-gray-600 space-y-0.5">
                      {cls.subdivisions.map((sub, j) => (
                        <li key={j}>• {sub}</li>
                      ))}
                    </ul>
                  </div>
                )}
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('imdg.documentsTitle')}</h2>
        <div className="space-y-3">
          {documents.map(doc => (
            <Card key={doc.name} className="bg-white">
              <CardContent className="py-3">
                <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>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('imdg.packagingGroupsTitle')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {packagingGroups.map((pg, i) => {
            const colors = [
              'bg-red-50 border-red-200',
              'bg-yellow-50 border-yellow-200',
              'bg-green-50 border-green-200',
            ];
            return (
              <Card key={pg.group} className={`border ${colors[i]}`}>
                <CardContent className="pt-4">
                  <h4 className="font-semibold text-gray-900">{pg.group}</h4>
                  <p className="text-sm text-gray-600 mt-1">{pg.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-2">{t('imdg.labelingTitle')}</h3>
          <p className="text-sm text-blue-800">{t('imdg.labelingContent')}</p>
        </CardContent>
      </Card>

      <Card className="mt-4 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-2">{t('imdg.segregationTitle')}</h3>
          <p className="text-sm text-gray-700">{t('imdg.segregationContent')}</p>
        </CardContent>
      </Card>
    </div>
  );
}