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

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

  const clauses = t.raw('assurance.clauses') as Array<{
    name: string;
    level: string;
    includes: string[];
    excludes: string[];
  }>;
  const extensions = t.raw('assurance.extensions') as Array<{ name: string; description: string }>;
  const processSteps = t.raw('assurance.processSteps') as string[];

  const clauseColors = [
    'border-green-500 bg-green-50',
    'border-yellow-500 bg-yellow-50',
    'border-red-500 bg-red-50',
  ];
  const clauseBadges = ['bg-green-600', 'bg-yellow-600', 'bg-red-600'];

  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">
          <Shield className="w-10 h-10 text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">{t('assurance.title')}</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">{t('assurance.description')}</p>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('assurance.iccTitle')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {clauses.map((clause, i) => (
            <Card key={clause.name} className={`border-2 ${clauseColors[i]}`}>
              <CardContent className="pt-4">
                <div className="flex items-center justify-between mb-3">
                  <h3 className="text-xl font-bold">{clause.name}</h3>
                  <span className={`px-2 py-1 rounded text-white text-sm ${clauseBadges[i]}`}>
                    {clause.level}
                  </span>
                </div>
                <div className="mb-3">
                  <h4 className="text-sm font-semibold text-green-700 mb-1">
                    {t('includesLabel')}
                  </h4>
                  <ul className="text-sm space-y-1">
                    {clause.includes.map((item, j) => (
                      <li key={j} className="flex items-start gap-1 text-gray-700">
                        <span className="text-green-500 mt-0.5">✓</span> {item}
                      </li>
                    ))}
                  </ul>
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-red-700 mb-1">{t('excludesLabel')}</h4>
                  <ul className="text-sm space-y-1">
                    {clause.excludes.map((item, j) => (
                      <li key={j} className="flex items-start gap-1 text-gray-700">
                        <span className="text-red-500 mt-0.5">✗</span> {item}
                      </li>
                    ))}
                  </ul>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('assurance.extensionsTitle')}</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {extensions.map(ext => (
            <Card key={ext.name} className="bg-white">
              <CardContent className="pt-4">
                <h4 className="font-semibold text-gray-900">{ext.name}</h4>
                <p className="text-sm text-gray-600 mt-1">{ext.description}</p>
              </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('assurance.processTitle')}</h3>
          <ol className="list-decimal list-inside space-y-2 text-gray-700">
            {processSteps.map((step, i) => (
              <li key={i}>{step}</li>
            ))}
          </ol>
        </CardContent>
      </Card>

      <Card className="mt-4 bg-blue-50 border-blue-200">
        <CardContent className="pt-6">
          <h3 className="font-semibold text-blue-900 mb-2">{t('assurance.valueTitle')}</h3>
          <p className="font-mono text-blue-800 bg-white p-3 rounded border text-sm">
            {t('assurance.valueFormula')}
          </p>
          <p className="text-sm text-blue-700 mt-2">{t('assurance.valueNote')}</p>
        </CardContent>
      </Card>
    </div>
  );
}