'use client'

import { Badge } from '@/components/ui/badge'
import { useLanguage } from '@/lib/i18n'
import { FileText, Sparkles, MessageCircle } from 'lucide-react'

export default function AboutSettingsPage() {
  const { t } = useLanguage()
  const version = '1.0.0'
  const buildDate = '2026-01-17'

  return (
    <div className="space-y-8">
      <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
        {t('about.description')}
      </p>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* App info */}
        <div className="bg-card rounded-lg border border-border p-6 shadow-sm flex flex-col gap-4">
          <div className="flex items-center gap-3 mb-2">
            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
              <FileText className="h-5 w-5" />
            </div>
            <div>
              <h3 className="font-semibold text-foreground">{t('about.appName')}</h3>
              <p className="text-sm text-muted-foreground">{t('about.appDescription')}</p>
            </div>
          </div>
          <div className="space-y-3 pt-2 border-t border-border">
            <div className="flex justify-between items-center text-sm">
              <span className="text-muted-foreground">{t('about.version')}</span>
              <Badge variant="secondary">{version}</Badge>
            </div>
            <div className="flex justify-between items-center text-sm">
              <span className="text-muted-foreground">{t('about.buildDate')}</span>
              <Badge variant="outline">{buildDate}</Badge>
            </div>
            <div className="flex justify-between items-center text-sm">
              <span className="text-muted-foreground">{t('about.platform')}</span>
              <Badge variant="outline">{t('about.platformWeb')}</Badge>
            </div>
          </div>
        </div>

        {/* Features */}
        <div className="bg-card rounded-lg border border-border p-6 shadow-sm flex flex-col gap-4">
          <div className="flex items-center gap-3 mb-2">
            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
              <Sparkles className="h-5 w-5" />
            </div>
            <div>
              <h3 className="font-semibold text-foreground">{t('about.features.title')}</h3>
              <p className="text-sm text-muted-foreground">{t('about.features.description')}</p>
            </div>
          </div>
          <ul className="space-y-2 pt-2 border-t border-border">
            {[
              t('about.features.titleSuggestions'),
              t('about.features.semanticSearch'),
              t('about.features.paragraphReformulation'),
              t('about.features.memoryEcho'),
              t('about.features.notebookOrganization'),
              t('about.features.dragDrop'),
              t('about.features.labelSystem'),
              t('about.features.multipleProviders'),
            ].map((feature) => (
              <li key={feature} className="flex items-center gap-2 text-sm text-foreground">
                <span className="text-primary font-bold">✓</span>
                {feature}
              </li>
            ))}
          </ul>
        </div>

        {/* Support — full width */}
        <div className="md:col-span-2 bg-card rounded-lg border border-border p-6 shadow-sm">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
              <MessageCircle className="h-5 w-5" />
            </div>
            <div>
              <h3 className="font-semibold text-foreground">{t('about.support.title')}</h3>
              <p className="text-sm text-muted-foreground">{t('about.support.description')}</p>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4 border-t border-border">
            {[
              { title: t('about.support.documentation'), desc: 'Guides détaillés et tutoriels.' },
              { title: t('about.support.reportIssues'), desc: 'Signalez un bug dans le gestionnaire.' },
              { title: t('about.support.feedback'), desc: 'Vos retours nous aident à améliorer l\'app.' },
            ].map((item) => (
              <div key={item.title} className="p-3 rounded-md bg-muted">
                <p className="font-medium text-sm text-foreground">{item.title}</p>
                <p className="text-xs text-muted-foreground mt-1">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}