office_translator/frontend/src/app/dashboard/glossaries/page.tsx

'use client';

import { useState, useEffect } from 'react';
import {
  BookText, Plus, Library, Calendar, Hash,
  Zap, Save, Trash2, MessageSquare, Loader2,
  Wrench, HardHat, Monitor, Scale, Stethoscope, BarChart3,
  Megaphone, Car,
} from 'lucide-react';
import { useUser } from '@/app/dashboard/useUser';
import { useI18n } from '@/lib/i18n';
import { useGlossaries, useGlossary } from './useGlossaries';
import type { Glossary, GlossaryTermInput, GlossaryListItem } from './types';
import { ProUpgradePrompt } from './ProUpgradePrompt';
import { CreateGlossaryDialog } from './CreateGlossaryDialog';
import { EditGlossaryDialog } from './EditGlossaryDialog';
import { DeleteGlossaryDialog } from './DeleteGlossaryDialog';
import { useToast } from '@/components/ui/toast';
import { useTranslationStore } from '@/lib/store';
import { API_BASE } from '@/lib/config';

const PRESETS = [
  { key: 'hvac', title: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation', icon: Wrench, templateId: 'hvac' },
  { key: 'construction', title: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes', icon: HardHat, templateId: 'construction' },
  { key: 'it', title: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: Monitor, templateId: 'technology' },
  { key: 'legal', title: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: Scale, templateId: 'legal' },
  { key: 'medical', title: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: Stethoscope, templateId: 'medical' },
  { key: 'finance', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: BarChart3, templateId: 'finance' },
  { key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone, templateId: 'marketing' },
  { key: 'automotive', title: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: Car, templateId: 'automotive' },
];

export default function GlossariesPage() {
  const { t } = useI18n();
  const { data: user, isLoading: isLoadingUser } = useUser();
  const {
    glossaries,
    total,
    isLoading: isLoadingGlossaries,
    isCreating,
    isUpdating,
    isDeleting,
    isImportingTemplate,
    createGlossary,
    updateGlossary,
    deleteGlossary,
    importTemplate,
  } = useGlossaries();
  const { toast } = useToast();
  const { settings, updateSettings } = useTranslationStore();

  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [selectedGlossary, setSelectedGlossary] = useState<GlossaryListItem | null>(null);
  const [glossaryToEdit, setGlossaryToEdit] = useState<Glossary | null>(null);
  const [glossaryToDelete, setGlossaryToDelete] = useState<{ id: string; name: string } | null>(null);
  const [systemPrompt, setSystemPrompt] = useState(settings.systemPrompt);
  const [isSavingPrompt, setIsSavingPrompt] = useState(false);
  const [creatingPreset, setCreatingPreset] = useState<string | null>(null);

  const { glossary: fullGlossary, isLoading: isLoadingGlossaryDetail } = useGlossary(
    selectedGlossary?.id || null
  );

  const isPro = user?.tier === 'pro';
  const isLoading = isLoadingUser || isLoadingGlossaries;

  useEffect(() => {
    setSystemPrompt(settings.systemPrompt);
  }, [settings]);

  const handleSavePrompt = async () => {
    setIsSavingPrompt(true);
    try {
      updateSettings({ systemPrompt });
      await new Promise(resolve => setTimeout(resolve, 300));
      toast({ title: t('context.saved'), description: t('context.savedDesc') });
    } finally { setIsSavingPrompt(false); }
  };

  const handleClearPrompt = () => {
    updateSettings({ systemPrompt: '' });
    setSystemPrompt('');
  };

  const handleCreatePresetGlossary = async (preset: typeof PRESETS[0]) => {
    setCreatingPreset(preset.key);
    try {
      const token = localStorage.getItem('token');
      if (!token) return;
      const headers: Record<string, string> = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      };
      const params = new URLSearchParams({ template_id: preset.templateId });
      const res = await fetch(`${API_BASE}/api/v1/glossaries/import?${params.toString()}`, {
        method: 'POST',
        headers,
      });
      if (res.ok) {
        const result = await res.json();
        const glossary = result.data;
        toast({
          title: t('context.presets.created'),
          description: t('context.presets.createdDesc', {
            name: glossary?.name ?? preset.title,
            count: String(glossary?.terms?.length ?? 0),
          }),
        });
      } else {
        toast({ variant: 'destructive', title: t('glossaries.toast.error'), description: t('glossaries.toast.errorCreate') });
      }
    } catch {
      toast({ variant: 'destructive', title: t('glossaries.toast.error'), description: t('glossaries.toast.errorImport') });
    } finally {
      setCreatingPreset(null);
    }
  };

  const handleEditClick = (id: string) => {
    const glossary = glossaries.find((g: GlossaryListItem) => g.id === id);
    if (glossary) {
      setSelectedGlossary(glossary);
      setEditDialogOpen(true);
    }
  };

  const handleDeleteClick = (id: string, name: string) => {
    setGlossaryToDelete({ id, name });
    setDeleteDialogOpen(true);
  };

  const handleCreateGlossary = async (data: { name: string; terms: GlossaryTermInput[] }) => {
    try {
      await createGlossary(data);
      setCreateDialogOpen(false);
      toast({
        title: t('glossaries.toast.created'),
        description: t('glossaries.toast.createdDesc', { name: data.name }),
      });
    } catch (error) {
      toast({
        variant: 'destructive',
        title: t('glossaries.toast.error'),
        description: t('glossaries.toast.errorCreate'),
      });
      throw error;
    }
  };

  const handleImportTemplate = async (templateId: string, name?: string) => {
    try {
      await importTemplate(templateId, name);
      setCreateDialogOpen(false);
      toast({
        title: t('glossaries.toast.imported'),
        description: name
          ? t('glossaries.toast.importedDesc', { name })
          : t('glossaries.toast.importedDesc', { name: templateId }),
      });
    } catch (error) {
      toast({
        variant: 'destructive',
        title: t('glossaries.toast.error'),
        description: t('glossaries.toast.errorImport'),
      });
      throw error;
    }
  };

  const handleSaveGlossary = async (id: string, data: { name: string; terms: GlossaryTermInput[] }) => {
    try {
      await updateGlossary(id, data);
      setEditDialogOpen(false);
      setSelectedGlossary(null);
      toast({
        title: t('glossaries.toast.updated'),
        description: t('glossaries.toast.updatedDesc', { name: data.name }),
      });
    } catch (error) {
      toast({
        variant: 'destructive',
        title: t('glossaries.toast.error'),
        description: t('glossaries.toast.errorUpdate'),
      });
      throw error;
    }
  };

  const handleDeleteConfirm = async () => {
    if (!glossaryToDelete) return;
    try {
      await deleteGlossary(glossaryToDelete.id);
      setDeleteDialogOpen(false);
      setGlossaryToDelete(null);
      toast({
        title: t('glossaries.toast.deleted'),
        description: t('glossaries.toast.deletedDesc'),
      });
    } catch (error) {
      toast({
        variant: 'destructive',
        title: t('glossaries.toast.error'),
        description: t('glossaries.toast.errorDelete'),
      });
    }
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-center space-y-4">
          <div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-muted border-t-brand-accent mx-auto"></div>
          <p className="text-[9px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-widest">Loading...</p>
        </div>
      </div>
    );
  }

  if (!isPro) {
    return <ProUpgradePrompt />;
  }

  return (
    <div className="max-w-6xl mx-auto w-full p-6 lg:p-8">
      {/* ── Editorial Header ───────────────────────────────────── */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-12 gap-6">
        <div>
          <span className="accent-pill mb-4 block w-fit">{t('glossaries.yourGlossaries')}</span>
          <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
            {t('glossaries.title')}
          </h1>
          <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('glossaries.description')}</p>
        </div>
        <button
          onClick={() => setCreateDialogOpen(true)}
          disabled={isCreating}
          className="premium-button px-10 py-4 text-[11px] uppercase tracking-widest !rounded-2xl flex items-center gap-2 disabled:opacity-50 shrink-0"
        >
          <Plus size={14} />
          {t('glossaries.createNew')}
        </button>
      </div>

      <div className="space-y-12">
        {/* ── System Prompt ────────────────────────────────────── */}
        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] 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 dark:text-white">
              {t('context.instructions.title')}
            </h3>
          </div>
          <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.instructions.desc')}</p>
          <textarea
            value={systemPrompt}
            onChange={e => setSystemPrompt(e.target.value)}
            placeholder={t('context.instructions.placeholder')}
            className="w-full h-48 p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 text-sm focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
          />
          <div className="flex justify-end mt-6 gap-4">
            <button
              onClick={handleClearPrompt}
              className="px-8 py-3 bg-brand-muted dark:bg-white/5 text-brand-dark/40 dark:text-white/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark dark:hover:text-white transition-all"
            >
              <Trash2 size={12} className="inline mr-2" />{t('context.clearAll')}
            </button>
            <button
              onClick={handleSavePrompt}
              disabled={isSavingPrompt}
              className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3 disabled:opacity-50"
            >
              {isSavingPrompt ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
              {isSavingPrompt ? t('context.saving') : t('context.save')}
            </button>
          </div>
        </section>

        {/* ── Professional Presets ─────────────────────────────── */}
        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] 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 dark:text-white">
              {t('context.presets.title')}
            </h3>
          </div>
          <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-12 font-medium">{t('context.presets.desc')}</p>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {PRESETS.map((p) => {
              const Icon = p.icon;
              const isCreating = creatingPreset === p.key;
              return (
                <button
                  key={p.key}
                  onClick={() => handleCreatePresetGlossary(p)}
                  disabled={!!creatingPreset}
                  className="p-6 bg-brand-muted dark:bg-white/5 hover:bg-brand-dark dark:hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 dark:border-white/10 hover:shadow-2xl hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <div className="flex justify-center mb-4 text-brand-dark group-hover:text-brand-accent group-hover:scale-125 transition-all">
                    {isCreating ? <Loader2 size={24} className="animate-spin" /> : <Icon size={24} />}
                  </div>
                  <h4 className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white group-hover:text-white mb-2">
                    {p.title}
                  </h4>
                  <p className="text-[8px] text-brand-dark/30 dark:text-white/30 group-hover:text-white/40 font-bold uppercase tracking-widest leading-relaxed">
                    {p.desc}
                  </p>
                </button>
              );
            })}
          </div>

          <p className="mt-8 text-[9px] text-brand-dark/20 dark:text-white/20 font-black uppercase tracking-widest italic border-t border-black/5 dark:border-white/5 pt-6">
            {t('context.presets.hint')}
          </p>
        </section>

        {/* ── Glossary Grid ──────────────────────────────────────── */}
      {glossaries.length === 0 ? (
        <div className="editorial-card p-16 bg-white dark:bg-[#141414] border-none shadow-editorial text-center">
          <div className="w-16 h-16 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent mx-auto mb-6">
            <Library size={32} />
          </div>
          <p className="text-xl font-black uppercase tracking-tight text-brand-dark dark:text-white mb-2">{t('glossaries.empty')}</p>
          <p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest">{t('glossaries.emptyDesc')}</p>
        </div>
      ) : (
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {glossaries.map((glossary: GlossaryListItem) => {
            const termCount = glossary.terms_count ?? 0;
            return (
              <div
                key={glossary.id}
                className="editorial-card p-8 bg-white dark:bg-[#141414] border-none shadow-editorial group hover:-translate-y-2 transition-all cursor-pointer"
                onClick={() => handleEditClick(glossary.id)}
              >
                <div className="flex justify-between items-start mb-10">
                  <div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent group-hover:bg-brand-dark group-hover:text-white transition-all">
                    <Library size={24} />
                  </div>
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      handleDeleteClick(glossary.id, glossary.name);
                    }}
                    className="text-[8px] bg-red-500/10 text-red-500 px-3 py-1 rounded-full font-black uppercase tracking-widest hover:bg-red-500 hover:text-white transition-all"
                  >
                    Delete
                  </button>
                </div>
                <h3 className="text-2xl font-black uppercase tracking-tight mb-2 text-brand-dark dark:text-white truncate">
                  {glossary.name}
                </h3>
                <div className="flex justify-between items-center pt-8 border-t border-black/5 dark:border-white/10">
                  <span className="text-[9px] text-brand-dark/30 dark:text-white/30 font-black uppercase tracking-widest flex items-center gap-1.5">
                    <Hash size={10} />
                    {termCount} {t('glossaries.defineTerms')}
                  </span>
                  <span className="text-[9px] text-brand-dark/30 dark:text-white/30 font-black uppercase tracking-widest flex items-center gap-1.5">
                    <Calendar size={10} />
                    {new Date(glossary.created_at).toLocaleDateString()}
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* ── About section ──────────────────────────────────────── */}
      <div className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
        <div className="flex items-center gap-4 text-brand-accent mb-8">
          <BookText size={20} />
          <span className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
            {t('glossaries.aboutTitle')}
          </span>
        </div>
        <p className="text-sm text-brand-dark/40 dark:text-white/40 font-medium mb-4">{t('glossaries.aboutDesc')}</p>
        <p className="text-[10px] font-bold uppercase tracking-tight text-brand-dark/60 dark:text-white/60">
          {t('glossaries.aboutFormat')}
        </p>
      </div>
      </div>

      {/* Dialogs */}
      <CreateGlossaryDialog
        open={createDialogOpen}
        onOpenChange={setCreateDialogOpen}
        onCreate={handleCreateGlossary}
        onImportTemplate={handleImportTemplate}
        isCreating={isCreating}
        isImportingTemplate={isImportingTemplate}
      />

      {editDialogOpen && (fullGlossary || !isLoadingGlossaryDetail) && (
        <EditGlossaryDialog
          open={editDialogOpen}
          onOpenChange={(open) => {
            setEditDialogOpen(open);
            if (!open) setSelectedGlossary(null);
          }}
          glossary={fullGlossary}
          onSave={handleSaveGlossary}
          isSaving={isUpdating}
        />
      )}

      <DeleteGlossaryDialog
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        onConfirm={handleDeleteConfirm}
        isDeleting={isDeleting}
        glossaryName={glossaryToDelete?.name}
      />
    </div>
  );
}