import { useEffect } from 'react';
import { Outlet, useNavigate, useParams } from 'react-router-dom';
import * as RD from '@radix-ui/react-dialog';
import { Menu, PanelRight, Plus } from 'lucide-react';
import { Sidebar } from './sidebar';
import { ArtifactsPanel } from '@/features/conversations/artifacts-panel';
import { SettingsDialog } from '@/features/auth/settings-dialog';
import { Logo } from '@/components/ui/logo';
import { useUI } from '@/stores/ui';
import { useChat } from '@/stores/chat';
import { useAuth } from '@/stores/auth';
import { cn } from '@/lib/cn';

export function AppShell() {
  const { id } = useParams();
  const nav = useNavigate();
  const { sidebarOpen, setSidebar, panelOpen, setPanel } = useUI();
  const conv = useChat((s) => s.conversations.find((c) => c.id === id));
  const user = useAuth((s) => s.user);

  useEffect(() => {
    const fs = user?.preferences.font_scale ?? 1;
    document.documentElement.style.setProperty('--font-scale', String(fs));
  }, [user]);

  return (
    <div className="flex h-[100dvh] w-full overflow-hidden bg-neutral-bg">
      <div className="hidden lg:block shrink-0"><Sidebar /></div>
      <RD.Root open={sidebarOpen} onOpenChange={setSidebar}>
        <RD.Portal>
          <RD.Overlay className="fixed inset-0 z-40 bg-uqo-blue-dark/50 backdrop-blur-[2px] lg:hidden animate-fadein" />
          <RD.Content className="fixed inset-y-0 left-0 z-50 lg:hidden outline-none data-[state=open]:animate-[slidein_.22s_ease-out]" aria-describedby={undefined}>
            <RD.Title className="sr-only">Menu</RD.Title>
            <Sidebar onClose={() => setSidebar(false)} />
          </RD.Content>
        </RD.Portal>
      </RD.Root>

      <main className="relative flex min-w-0 flex-1 flex-col">
        <header className="relative z-10 flex items-center gap-1 bg-white/90 backdrop-blur border-b border-neutral-line px-2 sm:px-4 pt-[var(--safe-top)] h-[calc(58px+var(--safe-top))] shrink-0">
          <span className="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-uqo-blue via-uqo-blue-dark to-uqo-green lg:hidden" aria-hidden="true" />
          <button onClick={() => setSidebar(true)} className="lg:hidden h-11 w-11 inline-flex items-center justify-center rounded-xl hover:bg-neutral-surface active:scale-95 transition" aria-label="Ouvrir le menu"><Menu size={22} /></button>
          <div className="lg:hidden pl-1"><Logo withText={false} size="sm" /></div>
          <div className="min-w-0 flex-1 px-2">
            <div className="truncate text-[15px] sm:text-base font-semibold text-uqo-blue-dark tracking-tight">{conv?.title || 'Nouvelle conversation'}</div>
            <div className="truncate text-[11px] text-neutral-muted">{conv ? <><span className="inline-block h-1.5 w-1.5 rounded-full bg-uqo-green mr-1 align-middle" />{conv.course}</> : 'Tuteur IA · IMM1003 · IMM1033'}</div>
          </div>
          <button onClick={() => nav('/')} className="lg:hidden h-11 w-11 inline-flex items-center justify-center rounded-xl hover:bg-neutral-surface active:scale-95 transition text-uqo-blue" aria-label="Nouvelle conversation"><Plus size={22} /></button>
          {id && (
            <button onClick={() => setPanel(!panelOpen)} className={cn('h-11 w-11 inline-flex items-center justify-center rounded-xl hover:bg-neutral-surface active:scale-95 transition', panelOpen && 'bg-uqo-blue-light text-uqo-blue')} aria-label="Fichiers et sources de la conversation" aria-pressed={panelOpen}><PanelRight size={20} /></button>
          )}
        </header>
        <div className="flex min-h-0 flex-1 bg-uqo-soft">
          <div className="relative min-w-0 flex-1"><Outlet /></div>
          {id && panelOpen && (
            <div className="hidden md:block w-[330px] shrink-0 border-l border-neutral-line bg-white"><ArtifactsPanel conversationId={id} /></div>
          )}
        </div>
        {id && panelOpen && (
          <RD.Root open onOpenChange={setPanel}>
            <RD.Portal>
              <RD.Overlay className="fixed inset-0 z-40 bg-uqo-blue-dark/50 backdrop-blur-[2px] md:hidden" />
              <RD.Content className="fixed inset-x-0 bottom-0 z-50 md:hidden max-h-[82dvh] rounded-t-3xl bg-white outline-none shadow-float" aria-describedby={undefined}>
                <div className="mx-auto mt-2 h-1.5 w-10 rounded-full bg-neutral-line" aria-hidden="true" />
                <RD.Title className="sr-only">Fichiers et sources</RD.Title>
                <ArtifactsPanel conversationId={id} onClose={() => setPanel(false)} />
              </RD.Content>
            </RD.Portal>
          </RD.Root>
        )}
      </main>
      <SettingsDialog />
    </div>
  );
}