'use client'

import { Button } from '@/components/ui/button'
import { ArrowLeft, TestTube, Info, Sparkles, Zap, Brain, MessageSquare, Search } from 'lucide-react'
import { AI_TESTER } from './ai-tester'
import { useLanguage } from '@/lib/i18n'

export default function AITestPage() {
  const { t } = useLanguage()

  return (
    <div className="bg-background flex flex-col min-h-screen">
      <div className="flex-1 overflow-y-auto">
        <div className="max-w-[1800px] mx-auto px-6 md:px-16 py-12 space-y-16">
          {/* Header - Even larger and more spaced */}
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-10 border-b border-border/40 pb-12">
            <div className="flex items-start gap-8">
              <a href="/admin/settings" className="mt-2">
                <Button variant="outline" size="icon" className="rounded-3xl h-16 w-16 border-border/60 bg-card hover:bg-muted transition-all shadow-md group">
                  <ArrowLeft className="h-7 w-7 group-hover:-translate-x-1 transition-transform" />
                </Button>
              </a>
              <div>
                <div className="flex items-center gap-4 mb-3">
                  <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center text-primary shadow-inner">
                    <TestTube className="h-7 w-7" />
                  </div>
                  <span className="text-sm font-black uppercase tracking-[0.3em] text-primary/70">Diagnostics Haute Précision</span>
                </div>
                <h1 className="text-5xl md:text-7xl font-black tracking-tight text-foreground leading-[1.1]">
                  {t('admin.aiTest.title')}
                </h1>
                <p className="text-muted-foreground mt-4 text-xl font-medium max-w-3xl leading-relaxed">
                  {t('admin.aiTest.description')}
                </p>
              </div>
            </div>
            
            <div className="flex flex-col items-end gap-3 px-8 py-5 bg-card border border-border/50 rounded-[2.5rem] shadow-sm">
              <div className="flex items-center gap-4">
                <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse" />
                <span className="text-base font-black uppercase tracking-widest text-foreground">Système Actif</span>
              </div>
              <p className="text-xs text-muted-foreground font-bold uppercase tracking-widest">Latence: Optimisée</p>
            </div>
          </div>

          {/* New Horizontal Section for each Test - Maximum Width Utilization */}
          <div className="space-y-12">
            {/* 1. Tags Test - Horizontal Layout */}
            <div className="bg-card rounded-[4rem] border border-border/60 shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-700 group flex flex-col xl:flex-row">
              <div className="xl:w-1/3 p-12 md:p-16 border-b xl:border-b-0 xl:border-r border-border/40 bg-gradient-to-br from-primary/[0.05] to-transparent relative overflow-hidden">
                <div className="absolute -right-10 -bottom-10 opacity-[0.03] group-hover:opacity-[0.08] transition-all duration-700 group-hover:scale-125 group-hover:-rotate-12">
                  <Brain className="h-80 w-80 text-primary" />
                </div>
                <div className="relative space-y-8">
                  <div className="w-20 h-20 rounded-[1.5rem] bg-background flex items-center justify-center text-4xl shadow-2xl border border-border/50 group-hover:scale-110 transition-transform duration-500">
                    🏷️
                  </div>
                  <div>
                    <h3 className="text-3xl md:text-4xl font-black text-foreground tracking-tight mb-4">{t('admin.aiTest.tagsTestTitle')}</h3>
                    <p className="text-lg text-muted-foreground font-bold opacity-80 leading-relaxed">{t('admin.aiTest.tagsTestDescription')}</p>
                  </div>
                  <div className="flex flex-wrap gap-3">
                    <span className="px-4 py-2 bg-primary/10 rounded-xl text-primary text-[10px] font-black uppercase tracking-widest">Auto-Labeling</span>
                    <span className="px-4 py-2 bg-primary/10 rounded-xl text-primary text-[10px] font-black uppercase tracking-widest">Suggestions</span>
                  </div>
                </div>
              </div>
              <div className="xl:w-2/3 p-12 md:p-16 bg-gradient-to-l from-transparent to-primary/[0.01]">
                <div className="max-w-4xl">
                  <AI_TESTER type="tags" />
                </div>
              </div>
            </div>

            {/* 2. Embeddings Test - Horizontal Layout */}
            <div className="bg-card rounded-[4rem] border border-border/60 shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-700 group flex flex-col xl:flex-row">
              <div className="xl:w-1/3 p-12 md:p-16 border-b xl:border-b-0 xl:border-r border-border/40 bg-gradient-to-br from-green-500/[0.05] to-transparent relative overflow-hidden">
                <div className="absolute -right-10 -bottom-10 opacity-[0.03] group-hover:opacity-[0.08] transition-all duration-700 group-hover:scale-125 group-hover:rotate-12">
                  <Search className="h-80 w-80 text-green-500" />
                </div>
                <div className="relative space-y-8">
                  <div className="w-20 h-20 rounded-[1.5rem] bg-background flex items-center justify-center text-4xl shadow-2xl border border-border/50 group-hover:scale-110 transition-transform duration-500">
                    🔍
                  </div>
                  <div>
                    <h3 className="text-3xl md:text-4xl font-black text-foreground tracking-tight mb-4">{t('admin.aiTest.embeddingsTestTitle')}</h3>
                    <p className="text-lg text-muted-foreground font-bold opacity-80 leading-relaxed">{t('admin.aiTest.embeddingsTestDescription')}</p>
                  </div>
                  <div className="flex flex-wrap gap-3">
                    <span className="px-4 py-2 bg-green-500/10 rounded-xl text-green-600 text-[10px] font-black uppercase tracking-widest">Vector Store</span>
                    <span className="px-4 py-2 bg-green-500/10 rounded-xl text-green-600 text-[10px] font-black uppercase tracking-widest">Similarity</span>
                  </div>
                </div>
              </div>
              <div className="xl:w-2/3 p-12 md:p-16 bg-gradient-to-l from-transparent to-green-500/[0.01]">
                <div className="max-w-4xl">
                  <AI_TESTER type="embeddings" />
                </div>
              </div>
            </div>

            {/* 3. Chat Test - Horizontal Layout */}
            <div className="bg-card rounded-[4rem] border border-border/60 shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-700 group flex flex-col xl:flex-row">
              <div className="xl:w-1/3 p-12 md:p-16 border-b xl:border-b-0 xl:border-r border-border/40 bg-gradient-to-br from-zinc-500/[0.05] to-transparent relative overflow-hidden">
                <div className="absolute -right-10 -bottom-10 opacity-[0.03] group-hover:opacity-[0.08] transition-all duration-700 group-hover:scale-125 group-hover:-rotate-6">
                  <MessageSquare className="h-80 w-80 text-zinc-500" />
                </div>
                <div className="relative space-y-8">
                  <div className="w-20 h-20 rounded-[1.5rem] bg-background flex items-center justify-center text-4xl shadow-2xl border border-border/50 group-hover:scale-110 transition-transform duration-500">
                    💬
                  </div>
                  <div>
                    <h3 className="text-3xl md:text-4xl font-black text-foreground tracking-tight mb-4">{t('admin.aiTest.chatTestTitle')}</h3>
                    <p className="text-lg text-muted-foreground font-bold opacity-80 leading-relaxed">{t('admin.aiTest.chatTestDescription')}</p>
                  </div>
                  <div className="flex flex-wrap gap-3">
                    <span className="px-4 py-2 bg-zinc-500/10 rounded-xl text-zinc-600 text-[10px] font-black uppercase tracking-widest">Conversational</span>
                    <span className="px-4 py-2 bg-zinc-500/10 rounded-xl text-zinc-600 text-[10px] font-black uppercase tracking-widest">Streaming</span>
                  </div>
                </div>
              </div>
              <div className="xl:w-2/3 p-12 md:p-16 bg-gradient-to-l from-transparent to-zinc-500/[0.01]">
                <div className="max-w-4xl">
                  <AI_TESTER type="chat" />
                </div>
              </div>
            </div>
          </div>

          {/* Tips Section - Broad and visible */}
          <div className="bg-amber-500/5 border border-amber-500/20 rounded-[3rem] p-12 flex flex-col md:flex-row items-center gap-10">
            <div className="w-24 h-24 rounded-3xl bg-amber-500/10 flex items-center justify-center text-5xl shrink-0 shadow-inner">
              💡
            </div>
            <div className="space-y-4">
              <h4 className="text-2xl font-black text-amber-700 dark:text-amber-400 uppercase tracking-tight">{t('admin.aiTest.tipTitle')}</h4>
              <p className="text-xl text-amber-600/90 dark:text-amber-300/80 leading-relaxed font-bold">
                {t('admin.aiTest.tipContent')}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}