/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useMemo } from 'react';
import { 
  Plus, 
  Search, 
  Share2, 
  Archive, 
  Settings, 
  Lock, 
  ChevronRight,
  MoreVertical,
  ArrowLeft,
  Sparkles,
  MessageSquare,
  Wand2,
  FileCode,
  Globe,
  Send,
  RefreshCw,
  Clock,
  BookOpen,
  Layout,
  Scissors,
  Zap,
  Languages,
  ArrowRightLeft,
  History,
  Bot,
  Layers,
  Eye,
  Microscope,
  User,
  Activity,
  Play,
  Trash2,
  Edit3
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

// --- Types ---

type NavigationView = 'notebooks' | 'agents';
type AITone = 'Professional' | 'Creative' | 'Academic' | 'Casual';
type AITab = 'discussion' | 'actions' | 'resources';

interface Note {
  id: string;
  carnetId: string;
  title: string;
  content: string;
  imageUrl: string;
  date: string;
}

interface Carnet {
  id: string;
  name: string;
  initial: string;
  type: 'Private' | 'Project' | 'Shared';
  isPrivate?: boolean;
}

// --- Mock Data ---

const CARNETS: Carnet[] = [
  { id: '1', name: 'Daily Notes', initial: 'D', type: 'Private', isPrivate: true },
  { id: '2', name: 'Project: Neo', initial: 'P', type: 'Project' },
  { id: '3', name: 'Shared Docs', initial: 'S', type: 'Shared' },
  { id: '4', name: 'Architecture Research', initial: 'A', type: 'Project' },
];

const ALL_NOTES: Note[] = [
  {
    id: 'n1',
    carnetId: '4',
    title: 'Grid Systems',
    date: 'Oct 26, 2024',
    content: 'Grid Systems is streathen in ognitiacs clesign and simulhere desipmalt: complded structurer and manamateriai-s: ci arevenuatingly used, asiller straterty of insaee to the tmn and usaes of disrension, architecture of emiornabious tracious structures.',
    imageUrl: 'https://images.unsplash.com/photo-1503387762-592dea58ef23?auto=format&fit=crop&q=80&w=800&h=600'
  },
  {
    id: 'n2',
    carnetId: '4',
    title: 'Materiality',
    date: 'Oct 24, 2024',
    content: 'Materiality is combinated by relliaitic structureirs measure of plastics, natural, materials and priotical structures. Materialed coasts erabiocera alann light spaces and octicm employed design on thodolen of materiality, and tohlite tersev/ used in the gridin structures en obain materials, coms pathetic structure.',
    imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800&h=600'
  },
  {
    id: 'n3',
    carnetId: '4',
    title: 'Light & Space',
    date: 'Oct 22, 2024',
    content: 'Light & Space is a creaivity of light & Space inralicated in sizazant or dark crotrcning and netrescenations of avant trurme sivonpaltures for in inncr-en allimativefiting is cerriadating and sityle.',
    imageUrl: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=800&h=600'
  },
  {
    id: 'n4',
    carnetId: '2',
    title: 'Neo-Brutalism study',
    date: 'Sep 12, 2024',
    content: 'Exploring the raw aesthetic of neo-brutalism in urban environments. Focus on concrete textures and massive forms.',
    imageUrl: 'https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&q=80&w=800&h=600'
  }
];

// --- Components ---

interface NoteLinkProps {
  note: Note;
  isActive: boolean;
  onClick: () => void;
}

const NoteLink: React.FC<NoteLinkProps> = ({ note, isActive, onClick }) => (
  <motion.button
    initial={{ opacity: 0, x: -10 }}
    animate={{ opacity: 1, x: 0 }}
    onClick={onClick}
    className={`w-full flex items-center gap-2 pl-12 pr-4 py-2 text-[12px] transition-colors rounded-lg
      ${isActive ? 'bg-white/50 text-ink font-medium' : 'text-muted-ink hover:text-ink hover:bg-white/30'}`}
  >
    <div className={`w-1.5 h-1.5 rounded-full ${isActive ? 'bg-ink' : 'bg-transparent border border-muted-ink/30'}`} />
    <span className="truncate">{note.title}</span>
  </motion.button>
);

interface SidebarItemProps {
  carnet: Carnet;
  isActive: boolean;
  notes: Note[];
  activeNoteId: string | null;
  onCarnetClick: () => void;
  onNoteClick: (noteId: string) => void;
}

const SidebarItem: React.FC<SidebarItemProps> = ({ 
  carnet, 
  isActive, 
  notes,
  activeNoteId,
  onCarnetClick,
  onNoteClick
}) => {
  return (
    <div className="space-y-1">
      <motion.button
        whileHover={{ x: 4 }}
        onClick={() => {
          onCarnetClick();
        }}
        className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group
          ${isActive ? 'active-nav-item' : 'hover:bg-white/40'}`}
      >
        <motion.div 
          animate={{ rotate: isActive ? 90 : 0 }}
          className="text-muted-ink"
        >
          <ChevronRight size={14} />
        </motion.div>
        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border
          ${isActive ? 'bg-ink text-paper border-ink' : 'bg-white/60 text-ink border-border'}`}>
          {carnet.initial}
        </div>
        <div className="flex-1 text-left">
          <div className="flex items-center gap-2">
            <span className={`text-[13px] font-medium transition-colors ${isActive ? 'text-ink' : 'text-muted-ink'}`}>
              {carnet.name}
            </span>
            {carnet.isPrivate && <Lock size={10} className="text-muted-ink" />}
          </div>
        </div>
      </motion.button>

      <AnimatePresence>
        {isActive && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
            className="overflow-hidden space-y-0.5"
          >
            {notes.map(note => (
              <NoteLink 
                key={note.id} 
                note={note} 
                isActive={activeNoteId === note.id}
                onClick={() => onNoteClick(note.id)}
              />
            ))}
            {notes.length === 0 && (
              <p className="pl-12 text-[11px] text-muted-ink/50 py-2 italic font-light">No notes yet</p>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default function App() {
  const [activeView, setActiveView] = useState<NavigationView>('notebooks');
  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
  const [carnets, setCarnets] = useState<Carnet[]>(CARNETS);
  const [notes, setNotes] = useState<Note[]>(ALL_NOTES);
  const [activeCarnetId, setActiveCarnetId] = useState('4');
  const [activeNoteId, setActiveNoteId] = useState<string | null>(null);
  const [isAISidebarOpen, setIsAISidebarOpen] = useState(false);
  const [aiTab, setAiTab] = useState<AITab>('discussion');
  const [selectedTone, setSelectedTone] = useState<AITone>('Professional');
  
  // Modal States
  const [showNewCarnetModal, setShowNewCarnetModal] = useState(false);
  const [showNewNoteModal, setShowNewNoteModal] = useState(false);
  
  // Form States
  const [newCarnetName, setNewCarnetName] = useState('');
  const [newNoteTitle, setNewNoteTitle] = useState('');
  const [newNoteContent, setNewNoteContent] = useState('');

  const filteredNotes = useMemo(() => 
    notes.filter(n => n.carnetId === activeCarnetId),
  [activeCarnetId, notes]);

  const activeNote = useMemo(() => 
    notes.find(n => n.id === activeNoteId),
  [activeNoteId, notes]);

  const activeCarnet = useMemo(() => 
    carnets.find(c => c.id === activeCarnetId),
  [activeCarnetId, carnets]);

  const handleAddCarnet = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newCarnetName.trim()) return;
    
    const newCarnet: Carnet = {
      id: Date.now().toString(),
      name: newCarnetName,
      initial: newCarnetName.charAt(0).toUpperCase(),
      type: 'Project'
    };
    
    setCarnets([...carnets, newCarnet]);
    setNewCarnetName('');
    setShowNewCarnetModal(false);
    setActiveCarnetId(newCarnet.id);
  };

  const handleAddNote = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newNoteTitle.trim() || !newNoteContent.trim()) return;

    const newNote: Note = {
      id: `n-${Date.now()}`,
      carnetId: activeCarnetId,
      title: newNoteTitle,
      date: new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date()),
      content: newNoteContent,
      imageUrl: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&q=80&w=800&h=600'
    };

    setNotes([newNote, ...notes]);
    setNewNoteTitle('');
    setNewNoteContent('');
    setShowNewNoteModal(false);
    setActiveNoteId(newNote.id);
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4 md:p-8 lg:p-12 overflow-hidden">
      <div className="absolute inset-0 z-0 bg-[#DEDEDE]" />
      
      <div className="relative w-full max-w-7xl h-[85vh] flex rounded-2xl overflow-hidden shadow-2xl sidebar-shadow bg-paper">
        <div className="absolute -right-4 -bottom-4 w-full h-full bg-white/40 rounded-2xl -z-10 translate-x-2 translate-y-2 opacity-50" />
        <div className="absolute -right-2 -bottom-2 w-full h-full bg-white/60 rounded-2xl -z-10 translate-x-1 translate-y-1 opacity-70" />

        <aside className="w-80 bg-white/30 backdrop-blur-md border-right border-border p-6 flex flex-col z-20 shrink-0">
          <div className="mb-10 flex items-center justify-between">
            <div className="w-10 h-10 rounded-full bg-slate-200 border border-border flex items-center justify-center text-ink font-serif text-lg shadow-sm">
              A
            </div>
            <div className="flex bg-white/50 p-1 rounded-full border border-border transition-all">
              <button 
                onClick={() => setActiveView('notebooks')}
                className={`p-1.5 rounded-full transition-all ${activeView === 'notebooks' ? 'bg-ink text-paper' : 'text-muted-ink hover:text-ink'}`}
                title="Carnets"
              >
                <BookOpen size={14} />
              </button>
              <button 
                onClick={() => setActiveView('agents')}
                className={`p-1.5 rounded-full transition-all ${activeView === 'agents' ? 'bg-ink text-paper' : 'text-muted-ink hover:text-ink'}`}
                title="Agents"
              >
                <Bot size={14} />
              </button>
            </div>
          </div>

          <div className="flex-1 overflow-y-auto space-y-6 -mx-2 px-2 custom-scrollbar">
            {activeView === 'notebooks' ? (
              <div>
                <p className="text-[10px] font-bold text-muted-ink tracking-widest uppercase mb-4 px-4">
                  Architecture Grid
                </p>
                <div className="space-y-1">
                  {carnets.map(carnet => (
                    <SidebarItem 
                      key={carnet.id} 
                      carnet={carnet} 
                      isActive={activeCarnetId === carnet.id}
                      notes={notes.filter(n => n.carnetId === carnet.id)}
                      activeNoteId={activeNoteId}
                      onCarnetClick={() => {
                        setActiveCarnetId(carnet.id);
                        setActiveNoteId(null);
                      }}
                      onNoteClick={(id) => {
                        setActiveCarnetId(carnet.id);
                        setActiveNoteId(id);
                      }}
                    />
                  ))}
                </div>
                
                <button 
                  onClick={() => setShowNewCarnetModal(true)}
                  className="w-full mt-4 flex items-center gap-3 px-4 py-2 text-[13px] text-muted-ink hover:text-ink transition-colors font-medium rounded-lg hover:bg-white/40"
                >
                  <Plus size={16} />
                  <span>New Carnet</span>
                </button>
              </div>
            ) : (
              <div>
                <p className="text-[10px] font-bold text-muted-ink tracking-widest uppercase mb-4 px-4">
                  Intelligence OS
                </p>
                <div className="space-y-1">
                  {[
                    { id: 'a1', name: 'Mes Agents', icon: <Bot size={16} /> },
                    { id: 'a2', name: 'Le Lab AI', icon: <Microscope size={16} /> },
                    { id: 'a3', name: 'Activités', icon: <Activity size={16} /> },
                  ].map(item => (
                    <button
                      key={item.id}
                      className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group
                        ${item.id === 'a1' ? 'active-nav-item' : 'text-muted-ink hover:bg-white/40 hover:text-ink'}`}
                    >
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center border transition-colors
                        ${item.id === 'a1' ? 'bg-ink text-paper border-ink' : 'bg-white/60 border-border group-hover:border-ink/20'}`}>
                        {item.icon}
                      </div>
                      <span className="text-[13px] font-medium">{item.name}</span>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>

          <div className="pt-6 border-t border-border space-y-4">
            <button className="flex items-center gap-3 px-4 text-[13px] text-muted-ink hover:text-ink transition-colors font-medium">
              <Archive size={16} />
              <span>Archive</span>
            </button>
            <button className="flex items-center gap-3 px-4 text-[13px] text-muted-ink hover:text-ink transition-colors font-medium">
              <Settings size={16} />
              <span>Settings</span>
            </button>
          </div>
        </aside>

        <main className="flex-1 paper-texture relative overflow-hidden z-10 flex flex-col h-full">
          <AnimatePresence mode="wait">
            {activeView === 'notebooks' ? (
              <motion.div
                key="notebooks"
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: 20 }}
                transition={{ duration: 0.3 }}
                className="h-full flex flex-col"
              >
                {!activeNoteId ? (
                  <div className="h-full flex flex-col overflow-y-auto">
                    <header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-paper/80 backdrop-blur-md z-30">
                      <div className="flex justify-between items-start">
                        <h1 className="text-4xl font-serif font-medium tracking-tight text-ink leading-tight pr-12">
                          {activeCarnet?.name} — {filteredNotes[0]?.date || 'Oct 26'}
                        </h1>
                      </div>
                      
                      <div className="flex items-center justify-between border-b border-ink/5 pb-4">
                        <div className="flex items-center gap-6">
                          <button 
                            onClick={() => setShowNewNoteModal(true)}
                            className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity"
                          >
                            <Plus size={16} />
                            <span>Add Note</span>
                          </button>
                          <button className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity">
                            <Search size={16} />
                            <span>Search</span>
                          </button>
                        </div>
                        <button className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity">
                          <Share2 size={16} />
                          <span>Share</span>
                        </button>
                      </div>
                    </header>

                    <div className="px-12 flex-1 pb-20">
                      <div className="max-w-3xl space-y-16">
                        {filteredNotes.map((note, index) => (
                          <motion.div 
                             initial={{ opacity: 0, y: 20 }}
                             animate={{ opacity: 1, y: 0 }}
                             transition={{ delay: 0.1 * index, duration: 0.8 }}
                             key={note.id} 
                             className="space-y-4 group cursor-pointer"
                             onClick={() => setActiveNoteId(note.id)}
                          >
                            <h2 className="text-2xl font-serif font-medium text-ink flex items-center justify-between">
                              {note.title}
                              <button className="opacity-0 group-hover:opacity-40 transition-opacity">
                                <ChevronRight size={20} />
                              </button>
                            </h2>
                            <div className="flex flex-col md:flex-row gap-8 items-start">
                              <div className="w-full md:w-56 aspect-[4/3] bg-white/50 border border-border overflow-hidden rounded shadow-sm flex-shrink-0">
                                <img 
                                  src={note.imageUrl} 
                                  alt={note.title} 
                                  className="w-full h-full object-cover mix-blend-multiply opacity-80 grayscale contrast-125 hover:grayscale-0 hover:opacity-100 transition-all duration-500"
                                  referrerPolicy="no-referrer"
                                />
                              </div>
                              <div className="space-y-3">
                                <p className="text-[14px] leading-relaxed text-ink/80 font-light max-w-lg line-clamp-4">
                                  {note.content}
                                </p>
                                <span className="text-[11px] text-muted-ink uppercase tracking-widest font-medium">Read more</span>
                              </div>
                            </div>
                          </motion.div>
                        ))}
                        {filteredNotes.length === 0 && (
                          <div className="h-64 flex flex-col items-center justify-center text-center space-y-4">
                            <p className="font-serif text-xl italic text-muted-ink">This notebook is waiting for its first vision.</p>
                            <button 
                              onClick={() => setShowNewNoteModal(true)}
                              className="px-6 py-2 border border-ink text-[13px] uppercase tracking-[0.2em] hover:bg-ink hover:text-paper transition-all"
                            >
                              Begin Drawing
                            </button>
                          </div>
                        )}
                      </div>
                    </div>

                    <footer className="px-12 py-6 border-t border-ink/5 text-center mt-auto">
                      <p className="text-[11px] text-muted-ink uppercase tracking-[0.2em] font-medium">
                        &copy; 2024 Architectural Grid. All rights reserved.
                      </p>
                    </footer>
                  </div>
                ) : (
                  <div className="h-full flex overflow-hidden transition-all duration-500">
                    <div className="flex-1 flex flex-col overflow-y-auto bg-white">
                      <div className="px-12 py-8 flex items-center justify-between sticky top-0 bg-white/90 backdrop-blur-sm z-40 border-b border-border">
                        <button 
                          onClick={() => setActiveNoteId(null)}
                          className="flex items-center gap-2 text-ink hover:opacity-60 transition-opacity"
                        >
                          <ArrowLeft size={18} />
                          <span className="text-sm font-medium">Back to collection</span>
                        </button>
                        <div className="flex items-center gap-4">
                          <button 
                            onClick={() => setIsAISidebarOpen(!isAISidebarOpen)}
                            className={`flex items-center gap-2 px-3 py-1.5 rounded-full border transition-all duration-300
                              ${isAISidebarOpen ? 'bg-ink text-paper border-ink' : 'border-border text-ink hover:bg-white/50'}`}
                          >
                            <Sparkles size={16} />
                            <span className="text-xs font-medium">AI Assistant</span>
                          </button>
                          <button className="p-2 text-muted-ink hover:text-ink transition-colors">
                            <Share2 size={18} />
                          </button>
                          <button className="p-2 text-muted-ink hover:text-ink transition-colors">
                            <MoreVertical size={18} />
                          </button>
                        </div>
                      </div>

                      <div className="max-w-4xl mx-auto w-full px-12 py-16 space-y-12">
                        <div className="space-y-4">
                          <div className="flex items-center gap-3 text-[12px] text-muted-ink uppercase tracking-[.25em] font-bold">
                            <span>{activeCarnet?.name}</span>
                            <ChevronRight size={10} />
                            <span>{activeNote?.date}</span>
                          </div>
                          <h1 className="text-5xl md:text-6xl font-serif font-bold text-ink leading-tight">
                            {activeNote?.title}
                          </h1>
                        </div>

                        <div className="aspect-[16/9] w-full bg-slate-100 rounded-xl overflow-hidden shadow-xl">
                          <img 
                            src={activeNote?.imageUrl} 
                            alt={activeNote?.title} 
                            className="w-full h-full object-cover grayscale contrast-110"
                            referrerPolicy="no-referrer"
                          />
                        </div>

                        <div className="max-w-2xl mx-auto space-y-8 pb-32">
                          <p className="text-xl md:text-2xl font-serif leading-relaxed text-ink italic">
                            {activeNote?.content.split('.')[0]}.
                          </p>
                          <div className="h-px bg-border w-32" />
                          <p className="text-lg leading-relaxed text-ink/80 font-light space-y-4 text-justify whitespace-pre-line">
                             {activeNote?.content}
                             {activeNote?.id.startsWith('n-') && (
                               <>
                               <br /><br />
                               Architectural grids serve as the invisible scaffolding upon which spatial experiences are constructed. Beyond mere structural repetition, they facilitate a rhythmic dialogue between materiality and void. In this exploration, we examine how light fractures these rigid boundaries, creating a dynamic interplay that evolves with the passage of time.
                               </>
                             )}
                          </p>
                        </div>
                      </div>
                    </div>

                    <AnimatePresence>
                        {isAISidebarOpen && (
                          <motion.aside
                            initial={{ x: 400, opacity: 0 }}
                            animate={{ x: 0, opacity: 1 }}
                            exit={{ x: 400, opacity: 0 }}
                            transition={{ type: 'spring', damping: 25, stiffness: 200 }}
                            className="w-[400px] border-l border-border bg-white shadow-2xl flex flex-col z-50 shrink-0 relative"
                          >
                            <div className="p-6 border-b border-border space-y-2">
                              <div className="flex items-center justify-between">
                                <h3 className="flex items-center gap-2 font-serif text-xl font-medium text-ink">
                                  <Sparkles size={18} className="text-amber-500" />
                                  IA Note
                                </h3>
                                <button 
                                  onClick={() => setIsAISidebarOpen(false)}
                                  className="p-1 hover:bg-slate-100 rounded-full transition-colors text-muted-ink"
                                >
                                  <ChevronRight size={20} />
                                </button>
                              </div>
                              <p className="text-[11px] text-muted-ink uppercase tracking-wider font-medium opacity-60 truncate">
                                "{activeNote?.title}"
                              </p>
                            </div>

                            <div className="flex border-b border-border px-2">
                              {(['discussion', 'actions', 'resources'] as AITab[]).map((tab) => (
                                <button
                                  key={tab}
                                  onClick={() => setAiTab(tab)}
                                  className={`flex-1 py-3 text-[11px] uppercase tracking-widest font-bold transition-all relative
                                    ${aiTab === tab ? 'text-ink' : 'text-muted-ink hover:text-ink/60'}`}
                                >
                                  {tab}
                                  {aiTab === tab && (
                                    <motion.div 
                                      layoutId="activeTab" 
                                      className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink" 
                                    />
                                  )}
                                </button>
                              ))}
                            </div>

                            <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
                              <AnimatePresence mode="wait">
                                {aiTab === 'discussion' && (
                                  <motion.div
                                    key="discussion"
                                    initial={{ opacity: 0, y: 10 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    exit={{ opacity: 0, y: -10 }}
                                    className="space-y-8"
                                  >
                                    <div className="h-64 flex flex-col items-center justify-center text-center space-y-4 text-muted-ink/40">
                                      <div className="w-16 h-16 rounded-full border border-dashed border-muted-ink/20 flex items-center justify-center">
                                        <MessageSquare size={24} />
                                      </div>
                                      <p className="text-xs font-serif italic leading-relaxed px-8">Posez une question à l'Assistant pour commencer.</p>
                                    </div>

                                    <div className="space-y-4">
                                      <div className="space-y-3">
                                        <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Contexte</label>
                                        <div className="w-full p-3 bg-slate-50 border border-border rounded-lg text-xs flex items-center justify-between cursor-pointer hover:bg-slate-100 transition-colors">
                                          <div className="flex items-center gap-2">
                                            <FileCode size={14} className="text-muted-ink" />
                                            <span>Cette note</span>
                                          </div>
                                          <ChevronRight size={14} className="rotate-90 text-muted-ink" />
                                        </div>
                                      </div>

                                      <div className="space-y-3">
                                        <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Ton d'écriture</label>
                                        <div className="grid grid-cols-2 gap-2">
                                          {(['Professional', 'Creative', 'Academic', 'Casual'] as AITone[]).map((tone) => (
                                            <button
                                              key={tone}
                                              onClick={() => setSelectedTone(tone)}
                                              className={`p-3 rounded-xl border text-[11px] font-medium transition-all
                                                ${selectedTone === tone ? 'bg-ink text-paper border-ink' : 'bg-white border-border text-muted-ink hover:border-ink/20'}`}
                                            >
                                              {tone.charAt(0).toUpperCase() + tone.slice(1, 3)}
                                            </button>
                                          ))}
                                        </div>
                                      </div>
                                    </div>
                                  </motion.div>
                                )}

                                {aiTab === 'actions' && (
                                  <motion.div
                                    key="actions"
                                    initial={{ opacity: 0, y: 10 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    exit={{ opacity: 0, y: -10 }}
                                    className="space-y-8"
                                  >
                                    <div className="space-y-8">
                                      <div>
                                        <div className="flex items-center gap-2 mb-4">
                                          <div className="h-px flex-1 bg-border/40" />
                                          <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Transformations</h4>
                                          <div className="h-px flex-1 bg-border/40" />
                                        </div>
                                        
                                        <div className="grid grid-cols-2 gap-2">
                                          {[
                                            { icon: <Sparkles size={14} />, label: 'Clarifier' },
                                            { icon: <Scissors size={14} />, label: 'Raccourcir' },
                                            { icon: <Zap size={14} />, label: 'Améliorer' },
                                            { icon: <Languages size={14} />, label: 'Traduire' },
                                          ].map((action, i) => (
                                            <button 
                                              key={i} 
                                              className="flex flex-col items-center gap-3 p-4 bg-white border border-border rounded-xl transition-all group hover:border-ink/20"
                                            >
                                              <div className="p-2 rounded-lg bg-slate-50 transition-colors group-hover:bg-ink group-hover:text-paper shadow-sm text-ink/60">
                                                {action.icon}
                                              </div>
                                              <span className="text-[11px] font-bold text-ink/80 uppercase tracking-wider">{action.label}</span>
                                            </button>
                                          ))}
                                          <button className="col-span-2 flex items-center justify-center gap-3 py-3 px-4 bg-white border border-border rounded-xl text-[11px] font-bold text-ink/80 hover:bg-slate-50 transition-colors hover:border-ink/20 uppercase tracking-widest">
                                            <FileCode size={14} className="text-muted-ink" />
                                            Convertir en Markdown
                                          </button>
                                        </div>
                                      </div>

                                      <div className="space-y-4">
                                        <div className="flex items-center gap-2 mb-2">
                                          <div className="h-px flex-1 bg-border/40" />
                                          <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Generation Tools</h4>
                                          <div className="h-px flex-1 bg-border/40" />
                                        </div>

                                        <div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-ink/20 transition-all duration-500 overflow-hidden">
                                          <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
                                            <Layout size={80} className="text-ink" />
                                          </div>
                                          
                                          <div className="relative space-y-5">
                                            <div className="flex items-center gap-3">
                                              <div className="p-2 bg-slate-50 rounded-lg text-ink/70">
                                                <Layout size={18} />
                                              </div>
                                              <div className="space-y-0.5">
                                                <h5 className="text-sm font-bold text-ink leading-none">Présentation</h5>
                                                <p className="text-[10px] text-muted-ink uppercase tracking-tight">Convertir en slides interactives</p>
                                              </div>
                                            </div>

                                            <div className="grid grid-cols-2 gap-3">
                                              <div className="space-y-1.5">
                                                <span className="text-[9px] uppercase tracking-widest font-bold text-muted-ink/60 px-1">Thème</span>
                                                <select className="w-full bg-slate-50 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-ink/10 transition-all cursor-pointer">
                                                  <option>Architectural Mono</option>
                                                  <option>Vibrant Tech</option>
                                                  <option>Minimal Silk</option>
                                                </select>
                                              </div>
                                              <div className="space-y-1.5">
                                                <span className="text-[9px] uppercase tracking-widest font-bold text-muted-ink/60 px-1">Style</span>
                                                <select className="w-full bg-slate-50 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-ink/10 transition-all cursor-pointer">
                                                  <option>Professional</option>
                                                  <option>Creative</option>
                                                  <option>Brutalist</option>
                                                </select>
                                              </div>
                                            </div>

                                            <button className="w-full py-3.5 bg-ink text-paper rounded-xl text-[12px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-ink/10 uppercase tracking-widest">
                                              Générer
                                              <ArrowRightLeft size={14} className="opacity-60" />
                                            </button>
                                          </div>
                                        </div>

                                        <div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-ink/20 transition-all duration-500 overflow-hidden">
                                          <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
                                            <BookOpen size={80} className="text-ink" />
                                          </div>
                                          
                                          <div className="relative space-y-5">
                                            <div className="flex items-center gap-3">
                                              <div className="p-2 bg-slate-50 rounded-lg text-ink/70">
                                                <BookOpen size={18} />
                                              </div>
                                              <div className="space-y-0.5">
                                                <h5 className="text-sm font-bold text-ink leading-none">Diagramme</h5>
                                                <p className="text-[10px] text-muted-ink uppercase tracking-tight">Visualisation de structure</p>
                                              </div>
                                            </div>

                                            <div className="grid grid-cols-2 gap-3">
                                              <div className="space-y-1.5">
                                                <span className="text-[9px] uppercase tracking-widest font-bold text-muted-ink/60 px-1">Type</span>
                                                <select className="w-full bg-slate-50 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-ink/10 transition-all cursor-pointer">
                                                  <option>Logic Flow</option>
                                                  <option>Mind Map</option>
                                                  <option>Hierarchy</option>
                                                </select>
                                              </div>
                                              <div className="space-y-1.5">
                                                <span className="text-[9px] uppercase tracking-widest font-bold text-muted-ink/60 px-1">Style</span>
                                                <select className="w-full bg-slate-50 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-ink/10 transition-all cursor-pointer">
                                                  <option>Draft</option>
                                                  <option>Polished</option>
                                                  <option>Handwritten</option>
                                                </select>
                                              </div>
                                            </div>

                                            <button className="w-full py-3.5 bg-ink text-paper rounded-xl text-[12px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-ink/10 uppercase tracking-widest">
                                              Tracer
                                              <ArrowRightLeft size={14} className="opacity-60" />
                                            </button>
                                          </div>
                                        </div>
                                      </div>

                                      <div className="flex flex-col items-center gap-2 opacity-20 py-4">
                                         <History size={16} />
                                         <span className="text-[10px] font-bold uppercase tracking-widest whitespace-nowrap">Auto-Save Enabled</span>
                                      </div>
                                    </div>
                                  </motion.div>
                                )}

                                {aiTab === 'resources' && (
                                  <motion.div
                                    key="resources"
                                    initial={{ opacity: 0, y: 10 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    exit={{ opacity: 0, y: -10 }}
                                    className="space-y-8"
                                  >
                                     <div className="space-y-6">
                                       <div className="space-y-2">
                                         <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">URL (Optionnel)</label>
                                         <div className="relative">
                                           <input type="text" placeholder="https://..." className="w-full bg-slate-50 border border-border rounded-lg pl-3 pr-10 py-3 text-xs outline-none focus:border-ink transition-colors" />
                                           <Globe size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-ink/40" />
                                         </div>
                                       </div>

                                       <div className="space-y-2">
                                         <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Texte de la ressource</label>
                                         <textarea 
                                           rows={8}
                                           placeholder="Collez votre texte ici (markdown, HTML, texte brut...)" 
                                           className="w-full bg-slate-50 border border-border rounded-lg p-4 text-xs outline-none focus:border-ink transition-colors resize-none leading-relaxed" 
                                         />
                                       </div>

                                       <div className="space-y-3">
                                         <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Mode d'intégration</label>
                                         <div className="grid grid-cols-3 gap-2">
                                            {[
                                              { id: 'replace', label: 'Remplacer', sub: 'Direct, sans IA' },
                                              { id: 'append', label: 'Compléter', sub: 'Ajoute sans réécrire' },
                                              { id: 'merge', label: 'Fusionner', sub: 'Réécrit et intègre' },
                                            ].map((mode) => (
                                              <button key={mode.id} className={`flex flex-col items-center justify-center p-3 rounded-lg border transition-all text-center ${mode.id === 'append' ? 'bg-emerald-50 border-emerald-500/30 ring-1 ring-emerald-500/10' : 'bg-white border-border hover:bg-slate-50'}`}>
                                                <span className={`text-[11px] font-bold ${mode.id === 'append' ? 'text-emerald-700' : 'text-ink'}`}>{mode.label}</span>
                                                <span className="text-[8px] text-muted-ink opacity-60 leading-tight mt-1 font-medium">{mode.sub}</span>
                                              </button>
                                            ))}
                                         </div>
                                       </div>

                                       <button className="w-full py-4 bg-[#75B2D6] text-white rounded-xl text-sm font-bold flex items-center justify-center gap-3 hover:opacity-90 transition-opacity shadow-lg shadow-blue-200">
                                         <Sparkles size={18} />
                                         Générer l'aperçu
                                       </button>
                                     </div>
                                  </motion.div>
                                )}
                              </AnimatePresence>
                            </div>

                            <AnimatePresence>
                              {aiTab === 'discussion' && (
                                <motion.div 
                                  initial={{ opacity: 0, y: 20 }}
                                  animate={{ opacity: 1, y: 0 }}
                                  exit={{ opacity: 0, y: 20 }}
                                  className="p-6 bg-white border-t border-border"
                                >
                                  <div className="relative">
                                    <textarea 
                                      rows={3} 
                                      placeholder="Posez une question sur cette note..." 
                                      className="w-full bg-slate-50 border border-border rounded-2xl p-4 pr-12 text-sm outline-none focus:border-ink transition-colors resize-none leading-relaxed font-light"
                                    />
                                    <div className="absolute right-3 bottom-3 flex gap-2">
                                      <button className="p-2 text-muted-ink hover:text-ink rounded-lg transition-colors">
                                        <Globe size={16} />
                                      </button>
                                      <button className="p-2 bg-[#75B2D6] text-white rounded-lg transition-transform hover:scale-105 active:scale-95 shadow-sm">
                                        <Send size={16} />
                                      </button>
                                    </div>
                                  </div>
                                  <p className="text-[9px] text-muted-ink text-center mt-3 uppercase tracking-widest font-bold opacity-30 italic">Maj+Entrée = nouvelle ligne</p>
                                </motion.div>
                              )}
                            </AnimatePresence>
                          </motion.aside>
                        )}
                      </AnimatePresence>
                  </div>
                )}
              </motion.div>
            ) : (
              <motion.div
                key="agents"
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -20 }}
                transition={{ duration: 0.3 }}
                className="h-full flex flex-col"
              >
                <div className="h-full flex flex-col overflow-y-auto custom-scrollbar">
                  {!selectedAgentId ? (
                    <>
                      <header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-paper/80 backdrop-blur-md z-30">
                        <div className="flex justify-between items-end">
                          <div className="space-y-1">
                            <h1 className="text-4xl font-serif font-medium tracking-tight text-ink">Mes Agents</h1>
                            <p className="text-sm text-muted-ink font-light">Automatisez vos tâches de veille et de recherche.</p>
                          </div>
                          <button className="px-6 py-2.5 bg-ink text-paper text-sm font-medium rounded-xl hover:opacity-90 transition-all flex items-center gap-3 shadow-lg shadow-ink/10">
                            <Plus size={18} />
                            Nouvel Agent
                          </button>
                        </div>

                        <div className="flex items-center gap-8 border-b border-ink/5 pt-4">
                          {['Tous', 'Veilleur', 'Chercheur', 'Surveillant', 'Personnalisé'].map((tag, i) => (
                            <button key={i} className={`pb-4 text-xs font-bold uppercase tracking-widest transition-all relative ${i === 0 ? 'text-ink' : 'text-muted-ink hover:text-ink/60'}`}>
                              {tag}
                              {i === 0 && <motion.div layoutId="activeAgentTag" className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink" />}
                            </button>
                          ))}
                        </div>
                      </header>

                      <div className="px-12 flex-1 pb-20 space-y-12">
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                          {[
                            { id: 'a1', icon: <Eye size={20} className="text-amber-600" />, title: 'Surveillant de Notes', status: 'Réussi', type: 'SURVEILLANT', meta: 'Hebdomadaire • 6 exéc.', desc: 'Analyse les notes récentes d’un carnet et suggère des compléments, références et liens.' },
                            { id: 'a2', icon: <Microscope size={20} className="text-indigo-600" />, title: 'Chercheur de Sujet', status: 'Réussi', type: 'CHERCHEUR', meta: 'Hebdomadaire • 14 exéc.', desc: 'Recherche des informations approfondies sur les derniers modèles de Deepseek et voir l’avis des utilisateurs.' },
                            { id: 'a3', icon: <Globe size={20} className="text-emerald-600" />, title: 'Veille IA', status: 'Réussi', type: 'VEILLEUR', meta: 'Quotidien • 20 exéc.', desc: 'Scrape les flux RSS de 6 sites IA (The Verge, TechCrunch...) et génère un résumé.' },
                          ].map((agent, i) => (
                            <div 
                              key={i} 
                              onClick={() => setSelectedAgentId(agent.id)}
                              className="bg-white border border-border rounded-2xl p-6 space-y-6 hover:border-ink/20 transition-all group cursor-pointer shadow-sm relative overflow-hidden"
                            >
                              <div className="flex items-start justify-between">
                                 <div className="flex items-center gap-4">
                                   <div className="p-3 bg-slate-50 rounded-xl group-hover:bg-ink group-hover:text-paper transition-all">
                                     {agent.icon}
                                   </div>
                                   <div className="space-y-1">
                                     <h4 className="text-[13px] font-bold text-ink">{agent.title}</h4>
                                     <p className="text-[10px] font-bold uppercase tracking-widest text-muted-ink opacity-60">{agent.type}</p>
                                   </div>
                                 </div>
                                 <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
                                   <label className="relative inline-flex items-center cursor-pointer">
                                      <input type="checkbox" className="sr-only peer" defaultChecked />
                                      <div className="w-8 h-4 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-emerald-500"></div>
                                   </label>
                                 </div>
                              </div>

                              <p className="text-xs text-muted-ink leading-relaxed line-clamp-3">
                                {agent.desc}
                              </p>

                              <div className="space-y-3">
                                <div className="flex items-center justify-between text-[10px] text-muted-ink font-medium">
                                   <div className="flex items-center gap-4">
                                     <span className="flex items-center gap-1"><Clock size={10} /> {agent.meta.split('•')[0]}</span>
                                     <span>{agent.meta.split('•')[1]}</span>
                                   </div>
                                </div>
                                <div className="flex items-center justify-between text-[10px] text-muted-ink font-medium">
                                   <div className="flex items-center gap-2">
                                     <span className="uppercase tracking-tight">Prochaine exécution</span>
                                     <span className="text-ink">Hebdomadaire</span>
                                   </div>
                                   <div className="flex items-center gap-2">
                                     <span className="uppercase tracking-tight">Dernier statut</span>
                                     <span className="text-emerald-600 flex items-center gap-1"><Activity size={8} /> {agent.status}</span>
                                   </div>
                                </div>
                              </div>

                              <div className="grid grid-cols-3 gap-2 border-t border-border pt-4">
                                 <button className="py-2 border border-border rounded-lg hover:bg-slate-50 flex items-center justify-center transition-colors text-muted-ink hover:text-ink"><Edit3 size={14} /> <span className="ml-2 text-[10px] font-bold uppercase">Modifier</span></button>
                                 <button 
                                  onClick={(e) => { e.stopPropagation(); }}
                                  className="py-2 border border-border rounded-lg hover:bg-slate-50 flex items-center justify-center transition-colors text-muted-ink hover:text-ink"
                                 >
                                  <Play size={14} className="fill-current" />
                                 </button>
                                 <button 
                                  onClick={(e) => { e.stopPropagation(); }}
                                  className="py-2 border border-border rounded-lg hover:bg-rose-50 hover:text-rose-600 hover:border-rose-100 flex items-center justify-center transition-colors text-muted-ink"
                                 >
                                  <Trash2 size={14} />
                                 </button>
                              </div>
                            </div>
                          ))}
                        </div>

                        <div className="space-y-8">
                           <div className="flex items-center gap-4">
                             <h5 className="text-[10px] font-bold uppercase tracking-[0.3em] text-muted-ink whitespace-nowrap">Modèles</h5>
                             <div className="h-px w-full bg-border/40" />
                           </div>
                           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            {[
                              { title: 'Veille IA', desc: 'Scrape les flux RSS de 6 sites IA et génère un résumé hebdomadaire.', icon: <Globe size={18} /> },
                              { title: 'Veille Tech', desc: 'Crée un résumé quotidien des news Hacker News et Product Hunt.', icon: <Zap size={18} /> },
                              { title: 'Veille Dev', desc: 'Surveille les repos GitHub pour détecter les nouvelles releases.', icon: <Layers size={18} /> },
                            ].map((model, i) => (
                              <div key={i} className="bg-white/40 border border-dashed border-border rounded-2xl p-6 group cursor-pointer hover:bg-white hover:border-ink/20 transition-all">
                                 <div className="w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center text-muted-ink group-hover:bg-ink group-hover:text-paper mb-4 transition-all">
                                   {model.icon}
                                 </div>
                                 <h4 className="text-[13px] font-bold text-ink mb-2">{model.title}</h4>
                                 <p className="text-xs text-muted-ink leading-relaxed mb-4">{model.desc}</p>
                                 <button className="text-[11px] font-bold uppercase tracking-widest text-ink hover:opacity-60 transition-opacity flex items-center gap-2">
                                   <Plus size={14} /> Installer
                                 </button>
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>
                    </>
                  ) : (
                    <motion.div 
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      className="flex-1 flex flex-col"
                    >
                      <header className="px-12 py-10 border-b border-border bg-white/50 backdrop-blur-md sticky top-0 z-30">
                        <div className="flex items-center justify-between max-w-5xl mx-auto">
                          <button 
                            onClick={() => setSelectedAgentId(null)}
                            className="flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-muted-ink hover:text-ink transition-colors"
                          >
                            <ArrowLeft size={16} />
                            Retour
                          </button>
                          <div className="flex items-center gap-4">
                            <button className="px-5 py-2 text-xs font-bold uppercase tracking-widest border border-border rounded-xl hover:bg-slate-50 transition-all">
                              Logs
                            </button>
                            <button className="px-6 py-2 bg-ink text-paper text-xs font-bold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all shadow-lg shadow-ink/10">
                              Enregistrer
                            </button>
                          </div>
                        </div>
                      </header>

                      <div className="flex-1 px-12 py-16 max-w-5xl mx-auto w-full space-y-16">
                        <section className="space-y-8">
                          <div className="flex items-end justify-between">
                            <div className="space-y-4">
                              <div className="flex items-center gap-3">
                                <div className="p-4 bg-ink text-paper rounded-2xl shadow-xl shadow-ink/10">
                                  {selectedAgentId === 'a1' ? <Eye size={32} /> : selectedAgentId === 'a2' ? <Microscope size={32} /> : <Globe size={32} />}
                                </div>
                                <div className="space-y-1">
                                  <h2 className="text-3xl font-serif font-medium text-ink">
                                    {selectedAgentId === 'a1' ? 'Surveillant de Notes' : selectedAgentId === 'a2' ? 'Chercheur de Sujet' : 'Veille IA'}
                                  </h2>
                                  <div className="flex items-center gap-3">
                                    <span className="text-[10px] font-bold uppercase tracking-widest px-2 py-1 bg-slate-100 text-muted-ink rounded-md">ID: {selectedAgentId}</span>
                                    <span className="text-[10px] font-bold uppercase tracking-widest px-2 py-1 bg-emerald-50 text-emerald-600 rounded-md">Actif</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center gap-8 text-[12px] uppercase tracking-[0.2em] font-bold text-muted-ink">
                              <div className="flex flex-col items-end gap-1">
                                <span className="opacity-40">Dernière exéc.</span>
                                <span className="text-ink">Il y a 2h</span>
                              </div>
                              <div className="flex flex-col items-end gap-1">
                                <span className="opacity-40">Succès</span>
                                <span className="text-emerald-600 tracking-normal">98.4%</span>
                              </div>
                            </div>
                          </div>
                        </section>

                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
                          <div className="lg:col-span-2 space-y-12">
                            <section className="space-y-6">
                              <h3 className="text-xs font-bold uppercase tracking-[0.3em] text-muted-ink">Configuration Logique</h3>
                              <div className="bg-white border border-border rounded-3xl overflow-hidden shadow-sm">
                                <div className="p-8 space-y-8">
                                  <div className="space-y-4">
                                    <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink">Source de données</label>
                                    <div className="grid grid-cols-2 gap-4">
                                      <div className="p-4 rounded-2xl border-2 border-ink bg-slate-50 flex items-center justify-between group cursor-pointer transition-all">
                                        <div className="flex items-center gap-3">
                                          <BookOpen size={18} className="text-ink" />
                                          <span className="text-sm font-medium text-ink">Carnets Externes</span>
                                        </div>
                                        <div className="w-5 h-5 rounded-full border-4 border-ink flex items-center justify-center">
                                          <div className="w-2 h-2 bg-ink rounded-full" />
                                        </div>
                                      </div>
                                      <div className="p-4 rounded-2xl border border-border hover:border-ink/20 flex items-center justify-between group cursor-pointer transition-all">
                                        <div className="flex items-center gap-3">
                                          <Globe size={18} className="text-muted-ink" />
                                          <span className="text-sm font-medium text-muted-ink">Web (Flux RSS/SEO)</span>
                                        </div>
                                        <div className="w-5 h-5 rounded-full border border-border" />
                                      </div>
                                    </div>
                                  </div>

                                  <div className="space-y-4">
                                    <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink">Modèle d'Intelligence</label>
                                    <select className="w-full bg-slate-50 border border-border rounded-xl px-4 py-4 text-sm outline-none focus:ring-2 ring-ink/5 transition-all cursor-pointer font-medium text-ink">
                                      <option>Gemini 2.0 Flash (Optimisé)</option>
                                      <option>Gemini 1.5 Pro (Analytique)</option>
                                      <option>Claude 3.5 Sonnet (Via API)</option>
                                    </select>
                                  </div>

                                  <div className="space-y-4">
                                    <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink">Instruction Système (Prompt)</label>
                                    <textarea 
                                      rows={6}
                                      className="w-full bg-slate-50 border border-border rounded-2xl p-6 text-sm outline-none focus:ring-2 ring-ink/5 transition-all font-light leading-relaxed resize-none"
                                      defaultValue="Tu es un assistant spécialisé dans l'analyse de notes architecturales. Ta mission est de scanner les nouveaux carnets, extraire les concepts de matérialité et suggérer des références historiques pertinentes."
                                    />
                                  </div>
                                </div>
                              </div>
                            </section>

                            <section className="space-y-6">
                              <h3 className="text-xs font-bold uppercase tracking-[0.3em] text-muted-ink">Actions de Sortie</h3>
                              <div className="grid grid-cols-2 gap-4">
                                <div className="p-6 bg-white border border-border rounded-2xl space-y-4 hover:border-ink/20 transition-all cursor-pointer group">
                                  <div className="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center text-muted-ink group-hover:bg-ink group-hover:text-paper transition-all">
                                    <Plus size={18} />
                                  </div>
                                  <div className="space-y-1">
                                    <h4 className="text-sm font-bold text-ink leading-tight">Nouvelle Note</h4>
                                    <p className="text-[10px] text-muted-ink font-medium uppercase tracking-tight">Créer un brouillon auto.</p>
                                  </div>
                                </div>
                                <div className="p-6 bg-white border border-border rounded-2xl space-y-4 hover:border-ink/20 transition-all cursor-pointer groupOpacity-40 border-dashed">
                                  <div className="w-10 h-10 rounded-xl border border-dashed border-border flex items-center justify-center text-muted-ink group-hover:bg-ink group-hover:text-paper transition-all">
                                    <Sparkles size={18} />
                                  </div>
                                  <div className="space-y-1">
                                    <h4 className="text-sm font-bold text-ink leading-tight">Webhook API</h4>
                                    <p className="text-[10px] text-muted-ink font-medium uppercase tracking-tight">Ajouter une destination</p>
                                  </div>
                                </div>
                              </div>
                            </section>
                          </div>

                          <div className="space-y-10">
                            <section className="space-y-6">
                              <h3 className="text-xs font-bold uppercase tracking-[0.3em] text-muted-ink">Planification</h3>
                              <div className="bg-ink rounded-3xl p-8 space-y-8 text-paper shadow-2xl shadow-ink/20 relative overflow-hidden">
                                <div className="absolute top-0 right-0 p-4 opacity-10">
                                  <Clock size={100} />
                                </div>
                                <div className="relative space-y-6">
                                  <div className="space-y-2">
                                    <span className="text-[10px] uppercase tracking-widest font-bold opacity-60">Fréquence</span>
                                    <div className="text-2xl font-serif italic">Hebdomadaire</div>
                                  </div>
                                  <div className="h-px bg-white/10" />
                                  <div className="space-y-4">
                                    <div className="flex items-center justify-between text-xs">
                                      <span className="opacity-60">Lundi</span>
                                      <span className="font-bold">09:00</span>
                                    </div>
                                    <div className="flex items-center justify-between text-xs">
                                      <span className="opacity-60">Jeudi</span>
                                      <span className="font-bold">14:30</span>
                                    </div>
                                  </div>
                                  <button className="w-full py-3 bg-white text-ink text-xs font-bold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all">
                                    Modifier le planning
                                  </button>
                                </div>
                              </div>
                            </section>

                            <section className="space-y-6">
                              <h3 className="text-xs font-bold uppercase tracking-[0.3em] text-muted-ink">Notifications</h3>
                              <div className="space-y-3">
                                {[
                                  { label: 'Rapport d\'exécution', enabled: true },
                                  { label: 'Erreurs critiques', enabled: true },
                                  { label: 'Modifications de notes', enabled: false },
                                ].map((item, i) => (
                                  <div key={i} className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-border/50">
                                    <span className="text-xs font-medium text-ink">{item.label}</span>
                                    <label className="relative inline-flex items-center cursor-pointer">
                                      <input type="checkbox" className="sr-only peer" defaultChecked={item.enabled} />
                                      <div className="w-8 h-4 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-[#75B2D6]"></div>
                                    </label>
                                  </div>
                                ))}
                              </div>
                            </section>

                            <section className="pt-6">
                              <button className="w-full py-4 border border-rose-200 text-rose-600 bg-rose-50/50 rounded-2xl text-xs font-bold uppercase tracking-widest hover:bg-rose-100 transition-colors flex items-center justify-center gap-3">
                                <Trash2 size={16} />
                                Supprimer l'agent
                              </button>
                            </section>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  )}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </main>
      </div>

      {/* Modals */}
      <AnimatePresence>
        {showNewCarnetModal && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <motion.div 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setShowNewCarnetModal(false)}
              className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.9, y: 20 }}
              className="relative w-full max-w-md bg-paper border border-border shadow-2xl rounded-2xl p-8"
            >
              <h3 className="text-2xl font-serif font-medium text-ink mb-6">Create New Carnet</h3>
              <form onSubmit={handleAddCarnet} className="space-y-6">
                <div>
                  <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Notebook Name</label>
                  <input 
                    autoFocus
                    type="text" 
                    value={newCarnetName}
                    onChange={(e) => setNewCarnetName(e.target.value)}
                    placeholder="E.g., Sustainable Patterns"
                    className="w-full bg-white border border-border rounded-lg px-4 py-3 outline-none focus:border-ink transition-colors font-serif italic text-lg"
                  />
                </div>
                <div className="flex gap-4 pt-4">
                  <button 
                    type="button"
                    onClick={() => setShowNewCarnetModal(false)}
                    className="flex-1 py-3 border border-border rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
                  >
                    Cancel
                  </button>
                  <button 
                    type="submit"
                    className="flex-1 py-3 bg-ink text-paper rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
                  >
                    Create Notebook
                  </button>
                </div>
              </form>
            </motion.div>
          </div>
        )}

        {showNewNoteModal && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <motion.div 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setShowNewNoteModal(false)}
              className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.9, y: 20 }}
              className="relative w-full max-w-2xl bg-paper border border-border shadow-2xl rounded-2xl p-10"
            >
              <h3 className="text-3xl font-serif font-medium text-ink mb-8">Add Architectural Note</h3>
              <form onSubmit={handleAddNote} className="space-y-8">
                <div>
                  <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Concept Title</label>
                  <input 
                    autoFocus
                    type="text" 
                    value={newNoteTitle}
                    onChange={(e) => setNewNoteTitle(e.target.value)}
                    placeholder="Enter the title of your study..."
                    className="w-full bg-white border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-serif text-2xl"
                  />
                </div>
                <div>
                  <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Observations & Analysis</label>
                  <textarea 
                    value={newNoteContent}
                    onChange={(e) => setNewNoteContent(e.target.value)}
                    placeholder="Describe the spatial logic, materiality, and light interactions..."
                    rows={6}
                    className="w-full bg-white border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-light leading-relaxed resize-none"
                  />
                </div>
                <div className="flex gap-4 pt-4">
                  <button 
                    type="button"
                    onClick={() => setShowNewNoteModal(false)}
                    className="flex-1 py-4 border border-border rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
                  >
                    Cancel
                  </button>
                  <button 
                    type="submit"
                    className="flex-1 py-4 bg-ink text-paper rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
                  >
                    Save Note
                  </button>
                </div>
              </form>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
}

