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

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

  const why = t.raw('vgm.why') as Array<{ title: string; description: string }>;
  const elements = t.raw('vgm.elements') as Array<{
    element: string;
    description: string;
    example: string;
  }>;
  const methods = t.raw('vgm.methods') as Array<{
    method: string;
    name: string;
    description: string;
    process: string[];
    advantages: string[];
    disadvantages: string[];
  }>;
  const responsibilities = t.raw('vgm.responsibilities') as Array<{
    role: string;
    description: string;
  }>;
  const sanctions = t.raw('vgm.sanctions') as Array<{ region: string; sanction: string }>;
  const tips = t.raw('vgm.tips') as 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">
          <Anchor className="w-10 h-10 text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">{t('vgm.title')}</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">{t('vgm.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('vgm.whyTitle')}</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-blue-800">
            {why.map(item => (
              <div key={item.title}>
                <h4 className="font-medium">{item.title}</h4>
                <p className="text-sm mt-0.5">{item.description}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('vgm.componentsTitle')}</h2>
        <Card className="bg-white">
          <CardContent className="pt-6">
            <div className="bg-gray-50 p-4 rounded-lg border mb-4 text-center font-mono text-lg">
              <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded">
                {t('vgm.formula')}
              </span>
            </div>
            <div className="space-y-3">
              {elements.map(item => (
                <div
                  key={item.element}
                  className="flex items-center justify-between py-3 border-b last:border-0"
                >
                  <div>
                    <h4 className="font-medium text-gray-900">{item.element}</h4>
                    <p className="text-sm text-gray-600">{item.description}</p>
                  </div>
                  <span className="text-sm font-mono bg-gray-100 px-3 py-1 rounded ml-4 flex-shrink-0">
                    {item.example}
                  </span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('vgm.methodsTitle')}</h2>
        <div className="space-y-4">
          {methods.map(method => (
            <Card key={method.method} className="bg-white">
              <CardHeader className="pb-2">
                <CardTitle className="flex items-center gap-3">
                  <span className="px-3 py-1 bg-green-600 text-white rounded-md text-sm">
                    {method.method}
                  </span>
                  <span className="text-lg">{method.name}</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-4">{method.description}</p>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div>
                    <h4 className="font-medium text-gray-700 mb-2">{t('vgm.processLabel')}</h4>
                    <ol className="list-decimal list-inside text-sm text-gray-600 space-y-1">
                      {method.process.map((step, i) => (
                        <li key={i}>{step}</li>
                      ))}
                    </ol>
                  </div>
                  <div>
                    <h4 className="font-medium text-green-700 mb-2">
                      ✓ {t('vgm.advantagesLabel')}
                    </h4>
                    <ul className="text-sm text-gray-600 space-y-1">
                      {method.advantages.map(adv => (
                        <li key={adv} className="flex items-center gap-2">
                          <span className="w-1.5 h-1.5 bg-green-500 rounded-full flex-shrink-0" />
                          {adv}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-medium text-red-700 mb-2">
                      ✗ {t('vgm.disadvantagesLabel')}
                    </h4>
                    <ul className="text-sm text-gray-600 space-y-1">
                      {method.disadvantages.map(dis => (
                        <li key={dis} className="flex items-center gap-2">
                          <span className="w-1.5 h-1.5 bg-red-500 rounded-full flex-shrink-0" />
                          {dis}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <Card className="mt-8 bg-gray-50">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-gray-900 mb-3">{t('vgm.responsibilityTitle')}</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {responsibilities.map(r => (
              <div key={r.role} className="bg-white p-4 rounded-lg border">
                <h4 className="font-medium text-gray-900">{r.role}</h4>
                <p className="text-sm text-gray-600 mt-1">{r.description}</p>
              </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('vgm.tolerancesTitle')}</h3>
          <div className="bg-white p-4 rounded-lg border">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
              <div>
                <span className="font-medium">{t('vgm.toleranceLabel')} :</span>
                <p className="text-gray-600">{t('vgm.toleranceValue')}</p>
              </div>
              <div>
                <span className="font-medium">{t('vgm.consequenceLabel')} :</span>
                <p className="text-gray-600">{t('vgm.consequenceValue')}</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('vgm.sanctionsTitle')}</h2>
        <Card className="bg-white">
          <CardContent className="pt-6">
            <div className="space-y-3">
              {sanctions.map(s => (
                <div
                  key={s.region}
                  className="flex items-center justify-between py-3 border-b last:border-0"
                >
                  <span className="font-medium text-gray-900">{s.region}</span>
                  <span className="text-sm text-red-600">{s.sanction}</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </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('vgm.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>
  );
}
