import React from 'react';
import { 
  Zap, 
  Wrench, 
  HardHat, 
  Monitor, 
  Scale, 
  Stethoscope, 
  BarChart3, 
  Megaphone, 
  Car, 
  MessageSquare, 
  Save, 
  Database 
} from 'lucide-react';

export const ContextView: React.FC = () => {
  return (
    <div className="max-w-5xl mx-auto">
      <div className="mb-12">
        <span className="accent-pill mb-4 block w-fit italic">Personnalisation IA</span>
        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Contexte & Glossaire</h1>
        <p className="text-brand-dark/40 font-medium max-w-2xl">Améliorez la qualité de traduction avec des instructions et un vocabulaire spécifiques à votre domaine.</p>
      </div>

      <div className="space-y-12">
        {/* Professional Glossaries */}
        <section className="editorial-card p-12 bg-white border-none shadow-editorial">
          <div className="flex items-center gap-4 mb-8 text-brand-accent">
            <Zap size={20} />
            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark">Glossaires professionnels</h3>
          </div>
          <p className="text-sm text-brand-dark/40 mb-12 font-medium">Chargez un glossaire complet avec instructions et terminologie spécialisée</p>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { id: 'hvac', label: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation', icon: <Wrench size={24} /> },
              { id: 'btp', label: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes', icon: <HardHat size={24} /> },
              { id: 'it', label: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: <Monitor size={24} /> },
              { id: 'legal', label: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: <Scale size={24} /> },
              { id: 'medical', label: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: <Stethoscope size={24} /> },
              { id: 'finance', label: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: <BarChart3 size={24} /> },
              { id: 'marketing', label: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: <Megaphone size={24} /> },
              { id: 'auto', label: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: <Car size={24} /> },
            ].map((p) => (
              <button key={p.id} className="p-6 bg-brand-muted hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 hover:shadow-2xl hover:-translate-y-1">
                <div className="flex justify-center mb-4 text-brand-dark group-hover:text-brand-accent group-hover:scale-125 transition-all">
                  {p.icon}
                </div>
                <h4 className="text-[11px] font-black uppercase tracking-tight text-brand-dark group-hover:text-white mb-2">{p.label}</h4>
                <p className="text-[8px] text-brand-dark/30 group-hover:text-white/40 font-bold uppercase tracking-widest leading-relaxed">{p.desc}</p>
              </button>
            ))}
          </div>
        </section>

        {/* Context Instructions */}
        <section className="editorial-card p-12 bg-white border-none shadow-editorial">
          <div className="flex items-center gap-4 mb-8 text-brand-accent">
            <MessageSquare size={20} />
            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark">Instructions de contexte</h3>
          </div>
          <p className="text-sm text-brand-dark/40 mb-10 font-medium">Instructions que l'IA suivra pendant la traduction</p>
          <textarea 
            className="w-full h-48 p-8 bg-brand-muted rounded-[32px] border border-black/5 text-sm focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none"
            placeholder="Ex : Vous traduisez des documents techniques HVAC. Utilisez une terminologie d'ingénierie précise..."
          />
          <div className="flex justify-end mt-6 gap-4">
             <button className="px-8 py-3 bg-brand-muted text-brand-dark/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark transition-all">Effacer</button>
             <button className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3"><Save size={14}/> Enregistrer</button>
          </div>
        </section>

        {/* Technical Glossary */}
        <section className="editorial-card p-12 bg-white border-none shadow-editorial">
          <div className="flex items-center gap-4 mb-8 text-brand-accent">
            <Database size={20} />
            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark">Glossaire technique</h3>
          </div>
          <p className="text-sm text-brand-dark/40 mb-10 font-medium">Format : source=cible (un par ligne). Les glossaires chargés via preset sont modifiables.</p>
          <textarea 
            className="w-full h-64 p-8 bg-brand-muted rounded-[32px] border border-black/5 text-sm font-mono focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none"
            defaultValue={`pression statique=static pressure\nrécupérateur de chaleur=heat recovery unit`}
          />
          <div className="flex justify-between items-center mt-6">
             <span className="text-[9px] text-brand-dark/20 font-black uppercase tracking-widest">2 termes définis</span>
             <div className="flex gap-4">
               <button className="px-8 py-3 bg-brand-muted text-brand-dark/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark transition-all">Importer CSV</button>
               <button className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3"><Save size={14}/> Appliquer</button>
             </div>
          </div>
        </section>
      </div>
    </div>
  );
};
