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

import React, { useState, useMemo } from 'react';
import { motion, AnimatePresence } from 'motion/react';

// Components
import { Sidebar } from './components/Sidebar';
import { NotebooksView } from './components/NotebooksView';
import { AgentsView } from './components/AgentsView';
import { SettingsView } from './components/SettingsView';
import { AISidebar } from './components/AISidebar';

// Data & Types
import { CARNETS, ALL_NOTES } from './constants';
import { NavigationView, SettingsTab, AITab, AITone, Carnet, Note } from './types';

export default function App() {
  const [activeView, setActiveView] = useState<NavigationView>('notebooks');
  const [activeSettingsTab, setActiveSettingsTab] = useState<SettingsTab>('general');
  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
  const [isDarkMode, setIsDarkMode] = useState(false);
  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 [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
  const [isAISidebarOpen, setIsAISidebarOpen] = useState(false);
  const [aiTab, setAiTab] = useState<AITab>('discussion');
  const [selectedTone, setSelectedTone] = useState<AITone>('Professional');
  
  // Modal States
  const [showNewCarnetModal, setShowNewCarnetModal] = useState<{ isOpen: boolean; parentId?: string }>({ isOpen: false });
  const [showNewNoteModal, setShowNewNoteModal] = useState(false);
  
  // Form States
  const [newCarnetName, setNewCarnetName] = useState('');
  const [newNoteTitle, setNewNoteTitle] = useState('');
  const [newNoteContent, setNewNoteContent] = useState('');

  const togglePin = (noteId: string) => {
    setNotes(notes.map(n => n.id === noteId ? { ...n, isPinned: !n.isPinned } : n));
  };

  const filteredNotes = useMemo(() => {
    let result = notes.filter(n => n.carnetId === activeCarnetId);
    
    if (selectedTagIds.length > 0) {
      result = result.filter(note => 
        selectedTagIds.every(tagId => note.tags?.some(tag => tag.id === tagId))
      );
    }

    return [...result].sort((a, b) => {
      if (a.isPinned && !b.isPinned) return -1;
      if (!a.isPinned && b.isPinned) return 1;
      return 0;
    });
  }, [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',
      parentId: showNewCarnetModal.parentId
    };
    
    setCarnets([...carnets, newCarnet]);
    setNewCarnetName('');
    setShowNewCarnetModal({ isOpen: 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',
      tags: []
    };

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

  return (
    <div className={`h-screen flex bg-paper transition-colors duration-500 overflow-hidden font-sans ${isDarkMode ? 'dark' : ''}`}>
      <Sidebar 
        activeView={activeView}
        isDarkMode={isDarkMode}
        setIsDarkMode={setIsDarkMode}
        setActiveView={setActiveView}
        carnets={carnets}
        notes={notes}
        activeCarnetId={activeCarnetId}
        activeNoteId={activeNoteId}
        setActiveCarnetId={setActiveCarnetId}
        setActiveNoteId={setActiveNoteId}
        setShowNewCarnetModal={(show, parentId) => setShowNewCarnetModal({ isOpen: show, parentId })}
      />

      <main className="flex-1 relative overflow-hidden flex bg-paper dark:bg-dark-paper transition-colors duration-500">
        <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 w-full"
            >
              <NotebooksView 
                activeNoteId={activeNoteId}
                activeCarnet={activeCarnet}
                filteredNotes={filteredNotes}
                activeNote={activeNote}
                setActiveNoteId={setActiveNoteId}
                togglePin={togglePin}
                setShowNewNoteModal={setShowNewNoteModal}
                isAISidebarOpen={isAISidebarOpen}
                setIsAISidebarOpen={setIsAISidebarOpen}
                selectedTagIds={selectedTagIds}
                setSelectedTagIds={setSelectedTagIds}
                allNotes={notes}
                activeCarnetId={activeCarnetId}
                setShowNewCarnetModal={(show, parentId) => setShowNewCarnetModal({ isOpen: show, parentId })}
              />
            </motion.div>
          )}

          {activeView === 'agents' && (
            <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 w-full"
            >
              <AgentsView 
                selectedAgentId={selectedAgentId}
                setSelectedAgentId={setSelectedAgentId}
              />
            </motion.div>
          )}

          {activeView === 'settings' && (
            <motion.div
              key="settings"
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -20 }}
              transition={{ duration: 0.3 }}
              className="h-full w-full"
            >
              <SettingsView 
                activeSettingsTab={activeSettingsTab}
                setActiveSettingsTab={setActiveSettingsTab}
              />
            </motion.div>
          )}
        </AnimatePresence>

        <AISidebar 
          isOpen={isAISidebarOpen}
          setIsOpen={setIsAISidebarOpen}
          activeNote={activeNote}
          aiTab={aiTab}
          setAiTab={setAiTab}
          selectedTone={selectedTone}
          setSelectedTone={setSelectedTone}
        />
      </main>

      {/* Modals */}
      <AnimatePresence>
        {showNewCarnetModal.isOpen && (
          <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({ isOpen: 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 dark:bg-dark-paper border border-border shadow-2xl rounded-2xl p-8"
            >
              <h3 className="text-2xl font-serif font-medium text-ink dark:text-dark-ink mb-2">
                {showNewCarnetModal.parentId ? 'Create Sub-Carnet' : 'Create New Carnet'}
              </h3>
              {showNewCarnetModal.parentId && (
                <p className="text-[10px] text-concrete uppercase tracking-widest font-bold mb-6">
                  Inside: {carnets.find(c => c.id === showNewCarnetModal.parentId)?.name}
                </p>
              )}
              <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 dark:bg-[#2A2A2A] border border-border rounded-lg px-4 py-3 outline-none focus:border-ink transition-colors font-serif italic text-lg text-ink dark:text-dark-ink"
                  />
                </div>
                <div className="flex gap-4 pt-4">
                  <button 
                    type="button"
                    onClick={() => setShowNewCarnetModal({ isOpen: false })}
                    className="flex-1 py-3 border border-border rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-white/5 transition-colors text-ink dark:text-dark-ink"
                  >
                    Cancel
                  </button>
                  <button 
                    type="submit"
                    className="flex-1 py-3 bg-ink dark:bg-ochre 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 dark:bg-dark-paper border border-border shadow-2xl rounded-2xl p-10"
            >
              <h3 className="text-3xl font-serif font-medium text-ink dark:text-dark-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 dark:bg-[#2A2A2A] border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-serif text-2xl text-ink dark:text-dark-ink"
                  />
                </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 dark:bg-[#2A2A2A] border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-light leading-relaxed resize-none text-ink dark:text-dark-ink"
                  />
                </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 dark:hover:bg-white/5 transition-colors text-ink dark:text-dark-ink"
                  >
                    Cancel
                  </button>
                  <button 
                    type="submit"
                    className="flex-1 py-4 bg-ink dark:bg-ochre text-paper rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
                  >
                    Save Note
                  </button>
                </div>
              </form>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
}