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

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

  const criteria = t.raw('lclVsFcl.criteria') as Array<{ criterion: string; lcl: string; fcl: string }>;
  const lclProcess = t.raw('lclVsFcl.lclProcess') as Array<{ step: string; title: string; description: string }>;
  const chooseLcl = t.raw('lclVsFcl.chooseLcl') as string[];
  const chooseFcl = t.raw('lclVsFcl.chooseFcl') 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">
          <Scale className="w-10 h-10 text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">{t('lclVsFcl.title')}</h1>
        </div>
        <p className="mt-3 text-gray-600 max-w-3xl">{t('lclVsFcl.description')}</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="bg-blue-50 border-blue-200">
          <CardContent className="pt-6">
            <h3 className="text-lg font-bold text-blue-900 mb-2">{t('lclVsFcl.lclTitle')}</h3>
            <p className="text-sm text-blue-800">{t('lclVsFcl.lclDescription')}</p>
          </CardContent>
        </Card>
        <Card className="bg-green-50 border-green-200">
          <CardContent className="pt-6">
            <h3 className="text-lg font-bold text-green-900 mb-2">{t('lclVsFcl.fclTitle')}</h3>
            <p className="text-sm text-green-800">{t('lclVsFcl.fclDescription')}</p>
          </CardContent>
        </Card>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('lclVsFcl.comparisonTitle')}</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('lclVsFcl.colCriterion')}</th>
                <th className="text-left p-3 font-medium text-blue-600">{t('lclVsFcl.colLcl')}</th>
                <th className="text-left p-3 font-medium text-green-600">{t('lclVsFcl.colFcl')}</th>
              </tr>
            </thead>
            <tbody>
              {criteria.map((row) => (
                <tr key={row.criterion} className="border-t hover:bg-gray-50">
                  <td className="p-3 font-medium text-gray-900">{row.criterion}</td>
                  <td className="p-3 text-gray-600">{row.lcl}</td>
                  <td className="p-3 text-gray-600">{row.fcl}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-900 mb-4">{t('lclVsFcl.lclProcessTitle')}</h2>
        <div className="space-y-3">
          {lclProcess.map((step) => (
            <div key={step.step} className="flex items-start gap-4 bg-white p-4 rounded-lg border">
              <div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold text-sm">
                {step.step}
              </div>
              <div>
                <h4 className="font-medium text-gray-900">{step.title}</h4>
                <p className="text-sm text-gray-600">{step.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
        <Card className="bg-blue-50 border-blue-200">
          <CardContent className="pt-6">
            <h3 className="font-semibold text-blue-900 mb-3">{t('lclVsFcl.chooseLclTitle')}</h3>
            <ul className="space-y-2">
              {chooseLcl.map((item, i) => (
                <li key={i} className="flex items-start gap-2 text-sm text-blue-800">
                  <span className="text-blue-500 mt-0.5">✓</span> {item}
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>
        <Card className="bg-green-50 border-green-200">
          <CardContent className="pt-6">
            <h3 className="font-semibold text-green-900 mb-3">{t('lclVsFcl.chooseFclTitle')}</h3>
            <ul className="space-y-2">
              {chooseFcl.map((item, i) => (
                <li key={i} className="flex items-start gap-2 text-sm text-green-800">
                  <span className="text-green-500 mt-0.5">✓</span> {item}
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}