App.tsx

import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { Project, Task, TaskStatus, Priority, Reminder, SubTask } from './types';
import { createChat, connectLive } from './services/gemini';
import VoiceOrb from './components/VoiceOrb';
import ProjectCard from './components/ProjectCard';
import TaskDetailPanel from './components/TaskDetailPanel';
import ContextImportModal from './components/ContextImportModal';
import { createBlob, decode, decodeAudioData } from './utils/audio-utils';
import { LiveServerMessage, Modality } from '@google/genai';

const priorityWeight: Record<Priority, number> = {
  [Priority.CRITICAL]: 4,
  [Priority.HIGH]: 3,
  [Priority.MEDIUM]: 2,
  [Priority.LOW]: 1,
};

type SortMode = 'priority' | 'dueDate';

const App: React.FC = () => {
  // --- State ---
  const [projects, setProjects] = useState<Project[]>(() => {
    const saved = localStorage.getItem('aura_projects');
    return saved ? JSON.parse(saved) : [];
  });
  const [reminders, setReminders] = useState<Reminder[]>(() => {
    const saved = localStorage.getItem('aura_reminders');
    return saved ? JSON.parse(saved) : [];
  });
  const [isListening, setIsListening] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);
  const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
  const [chatHistory, setChatHistory] = useState<{ role: 'user' | 'assistant', content: string }[]>([]);
  const [inputText, setInputText] = useState('');
  const [priorityFilter, setPriorityFilter] = useState<Priority | 'all'>('all');
  const [sortMode, setSortMode] = useState<SortMode>('priority');

  // --- Refs for Audio & Live Session ---
  const audioContextRef = useRef<AudioContext | null>(null);
  const outAudioContextRef = useRef<AudioContext | null>(null);
  const sessionPromiseRef = useRef<any>(null);
  const sourcesRef = useRef<Set<AudioBufferSourceNode>>(new Set());
  const streamRef = useRef<MediaStream | null>(null);
  const nextStartTimeRef = useRef<number>(0);

  // --- Persistence ---
  useEffect(() => {
    localStorage.setItem('aura_projects', JSON.stringify(projects));
  }, [projects]);

  useEffect(() => {
    localStorage.setItem('aura_reminders', JSON.stringify(reminders));
  }, [reminders]);

  // --- Task Operations ---
  const updateTask = useCallback((taskId: string, updates: Partial<Task>) => {
    setProjects(prev => prev.map(project => ({
      ...project,
      tasks: project.tasks.map(task => 
        task.id === taskId ? { ...task, ...updates } : task
      )
    })));
  }, []);

  const handleImportTasks = (suggestedTasks: any[], targetProjectId: string) => {
    const newTasks: Task[] = suggestedTasks.map(st => ({
      id: Math.random().toString(36).substr(2, 9),
      projectId: targetProjectId,
      title: st.title,
      description: st.description,
      status: TaskStatus.TODO,
      priority: st.priority as Priority,
      subtasks: (st.subtasks || []).map((subT: string) => ({
        id: Math.random().toString(36).substr(2, 9),
        title: subT,
        completed: false
      })),
      dependencies: []
    }));

    setProjects(prev => prev.map(p => 
      p.id === targetProjectId ? { ...p, tasks: [...p.tasks, ...newTasks] } : p
    ));
    setActiveProjectId(targetProjectId);
    setIsImportModalOpen(false);
  };

  // --- Tool Handlers ---
  const handleToolCall = useCallback((fc: any) => {
    console.log('Executing tool call:', fc);
    const { name, args } = fc;

    if (name === 'createProject') {
      const newProject: Project = {
        id: Math.random().toString(36).substr(2, 9),
        name: args.name,
        description: args.description,
        tasks: [],
        technologies: args.technologies || [],
        tags: args.tags || [],
        repositoryUrl: args.repositoryUrl || '',
        createdAt: new Date().toISOString()
      };
      setProjects(prev => [...prev, newProject]);
      return { status: 'success', projectId: newProject.id };
    }

    if (name === 'createTask') {
      const newTask: Task = {
        id: Math.random().toString(36).substr(2, 9),
        projectId: args.projectId,
        title: args.title,
        description: args.description || '',
        status: TaskStatus.TODO,
        priority: (args.priority as Priority) || Priority.MEDIUM,
        dueDate: args.dueDate,
        subtasks: [],
        dependencies: []
      };
      setProjects(prev => prev.map(p => 
        p.id === args.projectId ? { ...p, tasks: [...p.tasks, newTask] } : p
      ));
      return { status: 'success', taskId: newTask.id };
    }

    if (name === 'setReminder') {
      const newReminder: Reminder = {
        id: Math.random().toString(36).substr(2, 9),
        text: args.text,
        time: args.time,
        completed: false
      };
      setReminders(prev => [...prev, newReminder]);
      return { status: 'success', reminderId: newReminder.id };
    }

    return { error: 'Unknown function' };
  }, []);

  // --- Voice Assistant Management ---
  const startLiveSession = async () => {
    try {
      if (!audioContextRef.current) {
        audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 16000 });
      }
      if (!outAudioContextRef.current) {
        outAudioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 24000 });
      }
      
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      streamRef.current = stream;

      const sessionPromise = connectLive(
        { projects, reminders },
        {
          onopen: () => {
            console.log('Live session opened');
            setIsListening(true);
            
            const source = audioContextRef.current!.createMediaStreamSource(stream);
            const scriptProcessor = audioContextRef.current!.createScriptProcessor(4096, 1, 1);
            
            scriptProcessor.onaudioprocess = (e) => {
              const inputData = e.inputBuffer.getChannelData(0);
              const pcmBlob = createBlob(inputData);
              sessionPromise.then(session => {
                session.sendRealtimeInput({ media: pcmBlob });
              });
            };
            
            source.connect(scriptProcessor);
            scriptProcessor.connect(audioContextRef.current!.destination);
            (window as any).scriptProcessor = scriptProcessor;
          },
          onmessage: async (message: LiveServerMessage) => {
            if (message.toolCall) {
              for (const fc of message.toolCall.functionCalls) {
                const result = handleToolCall(fc);
                sessionPromise.then(session => {
                  session.sendToolResponse({
                    functionResponses: {
                      id: fc.id,
                      name: fc.name,
                      response: result,
                    }
                  });
                });
              }
            }

            const base64Audio = message.serverContent?.modelTurn?.parts[0]?.inlineData?.data;
            if (base64Audio && outAudioContextRef.current) {
              nextStartTimeRef.current = Math.max(nextStartTimeRef.current, outAudioContextRef.current.currentTime);
              const audioBuffer = await decodeAudioData(
                decode(base64Audio),
                outAudioContextRef.current,
                24000,
                1
              );
              const source = outAudioContextRef.current.createBufferSource();
              source.buffer = audioBuffer;
              source.connect(outAudioContextRef.current.destination);
              source.start(nextStartTimeRef.current);
              nextStartTimeRef.current += audioBuffer.duration;
              sourcesRef.current.add(source);
              source.onended = () => sourcesRef.current.delete(source);
            }

            if (message.serverContent?.interrupted) {
              sourcesRef.current.forEach(s => s.stop());
              sourcesRef.current.clear();
              nextStartTimeRef.current = 0;
            }
          },
          onerror: (e: any) => {
            console.error('Live Error:', e);
            stopLiveSession();
          },
          onclose: () => {
            console.log('Live session closed');
            stopLiveSession();
          }
        }
      );

      sessionPromiseRef.current = sessionPromise;
    } catch (err) {
      console.error('Failed to start live session:', err);
    }
  };

  const stopLiveSession = () => {
    setIsListening(false);
    if (streamRef.current) {
      streamRef.current.getTracks().forEach(track => track.stop());
      streamRef.current = null;
    }
    if (sessionPromiseRef.current) {
      sessionPromiseRef.current.then((s: any) => s.close());
      sessionPromiseRef.current = null;
    }
  };

  const toggleListening = () => {
    if (isListening) {
      stopLiveSession();
    } else {
      startLiveSession();
    }
  };

  const handleSendText = async () => {
    if (!inputText.trim()) return;
    
    const userMsg = inputText;
    setInputText('');
    setChatHistory(prev => [...prev, { role: 'user', content: userMsg }]);
    setIsProcessing(true);

    try {
      const chat = createChat({ projects, reminders });
      const response = await chat.sendMessage({ message: userMsg });
      
      if (response.functionCalls) {
        for (const fc of response.functionCalls) {
          handleToolCall(fc);
        }
      }

      setChatHistory(prev => [...prev, { role: 'assistant', content: response.text || 'Action completed.' }]);
    } catch (err) {
      console.error('Chat error:', err);
      setChatHistory(prev => [...prev, { role: 'assistant', content: 'Sorry, I encountered an error processing that request.' }]);
    } finally {
      setIsProcessing(false);
    }
  };

  // --- Derived State & Filter Logic ---
  const selectedProject = useMemo(() => projects.find(p => p.id === activeProjectId), [projects, activeProjectId]);
  const selectedTask = useMemo(() => selectedProject?.tasks.find(t => t.id === selectedTaskId), [selectedProject, selectedTaskId]);

  const filteredAndSortedTasks = useMemo(() => {
    if (!selectedProject) return [];
    
    let tasks = [...selectedProject.tasks];
    
    // Filter by Priority
    if (priorityFilter !== 'all') {
      tasks = tasks.filter(t => t.priority === priorityFilter);
    }

    // Sort Logic
    return tasks.sort((a, b) => {
      if (sortMode === 'dueDate') {
        if (a.dueDate && b.dueDate) {
          return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
        }
        if (a.dueDate) return -1;
        if (b.dueDate) return 1;
      }
      
      const weightA = priorityWeight[a.priority];
      const weightB = priorityWeight[b.priority];
      if (weightA !== weightB) return weightB - weightA;
      return a.title.localeCompare(b.title);
    });
  }, [selectedProject, priorityFilter, sortMode]);

  const isOverdue = (dateStr?: string) => {
    if (!dateStr) return false;
    const d = new Date(dateStr);
    const today = new Date();
    today.setHours(0,0,0,0);
    return d < today;
  };

  return (
    <div className="min-h-screen flex flex-col lg:flex-row bg-[#0b0f1a] overflow-hidden relative text-slate-200">
      
      {/* Sidebar: Projects & Reminders */}
      <aside className="w-full lg:w-80 bg-slate-900/40 border-r border-slate-800 flex flex-col h-screen shrink-0 overflow-y-auto">
        <div className="p-6">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
              <i className="fas fa-brain text-white text-sm" />
            </div>
            <h1 className="text-xl font-bold tracking-tight text-white">Aura</h1>
          </div>

          <section className="mb-8">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xs font-bold text-slate-500 uppercase tracking-widest">Global Tools</h2>
            </div>
            <button 
              onClick={() => setIsImportModalOpen(true)}
              className="w-full flex items-center gap-3 bg-blue-600/10 hover:bg-blue-600/20 text-blue-400 border border-blue-500/30 p-3 rounded-xl transition-all mb-4 group"
            >
              <div className="w-8 h-8 rounded-lg bg-blue-600/20 flex items-center justify-center group-hover:scale-110 transition-transform">
                <i className="fas fa-wand-magic-sparkles text-sm" />
              </div>
              <div className="text-left">
                <p className="text-xs font-bold">Import from Context</p>
                <p className="text-[10px] text-blue-400/60">Analyze email, notes, or docs</p>
              </div>
            </button>
          </section>

          <section className="mb-8">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xs font-bold text-slate-500 uppercase tracking-widest">Active Projects</h2>
              <button 
                onClick={() => setInputText("Help me create a new project called...")}
                className="text-blue-500 hover:text-blue-400 text-xs transition-colors"
              >
                <i className="fas fa-plus" />
              </button>
            </div>
            <div className="space-y-3">
              {projects.length === 0 ? (
                <p className="text-slate-600 text-sm italic">No projects yet. Ask Aura to create one!</p>
              ) : (
                projects.map(project => (
                  <ProjectCard 
                    key={project.id} 
                    project={project} 
                    onClick={(id) => { setActiveProjectId(id); setSelectedTaskId(null); setPriorityFilter('all'); }} 
                  />
                ))
              )}
            </div>
          </section>

          <section>
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xs font-bold text-slate-500 uppercase tracking-widest">Quick Reminders</h2>
            </div>
            <div className="space-y-2">
              {reminders.length === 0 ? (
                <p className="text-slate-600 text-sm italic">Zero distractions.</p>
              ) : (
                reminders.map(rem => (
                  <div key={rem.id} className="group bg-slate-800/30 border border-slate-700/30 p-3 rounded-lg flex gap-3 hover:border-slate-600 transition-all">
                    <button className="text-slate-600 hover:text-green-500 transition-colors">
                      <i className="far fa-circle" />
                    </button>
                    <div>
                      <p className="text-xs text-slate-200">{rem.text}</p>
                      <p className="text-[10px] text-slate-500 mt-0.5">{rem.time}</p>
                    </div>
                  </div>
                ))
              )}
            </div>
          </section>
        </div>
      </aside>

      {/* Main Workspace */}
      <main className="flex-1 flex flex-col min-h-0 bg-[#0b0f1a] relative">
        
        {/* Header/Nav */}
        <header className="h-16 border-b border-slate-800/60 flex items-center justify-between px-8 shrink-0 bg-[#0b0f1a]/50 backdrop-blur-sm z-10">
          <div className="flex items-center gap-2">
             <button 
               onClick={() => { setActiveProjectId(null); setPriorityFilter('all'); }}
               className="text-slate-400 text-sm hover:text-white transition-colors"
             >
               Workspace
             </button>
             <span className="text-slate-600 text-xs">/</span>
             <span className="text-slate-100 font-medium text-sm">
                {selectedProject ? selectedProject.name : 'Dashboard'}
             </span>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex -space-x-2">
               {[1,2,3].map(i => (
                 <img key={i} src={`https://picsum.photos/32/32?random=${i}`} alt="user" className="w-8 h-8 rounded-full border-2 border-[#0b0f1a]" />
               ))}
            </div>
            <div className="h-4 w-[1px] bg-slate-800 mx-2" />
            <button className="text-slate-400 hover:text-white transition-colors">
              <i className="fas fa-search" />
            </button>
          </div>
        </header>

        {/* Dynamic Content Area */}
        <div className="flex-1 flex flex-col min-h-0 p-8">
          
          {selectedProject ? (
            <div className="flex-1 flex flex-col min-h-0">
               <div className="mb-6 flex flex-col xl:flex-row xl:items-end justify-between gap-4">
                 <div className="flex-1">
                   <div className="flex items-center gap-3 mb-2">
                      <h2 className="text-2xl font-bold text-white">{selectedProject.name}</h2>
                      {selectedProject.repositoryUrl && (
                        <a 
                          href={selectedProject.repositoryUrl} 
                          target="_blank" 
                          rel="noopener noreferrer"
                          className="text-slate-500 hover:text-blue-400 transition-colors bg-slate-800/50 p-2 rounded-lg border border-slate-700/50"
                        >
                          <i className="fas fa-link text-sm" />
                        </a>
                      )}
                      <button 
                        onClick={() => setIsImportModalOpen(true)}
                        className="ml-4 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold px-4 py-2 rounded-lg shadow-lg shadow-blue-900/20 transition-all flex items-center gap-2"
                      >
                        <i className="fas fa-wand-magic-sparkles" />
                        Import Content
                      </button>
                   </div>
                   <p className="text-slate-400 text-sm max-w-2xl">{selectedProject.description}</p>
                   <div className="flex gap-2 mt-3">
                      {selectedProject.tags?.map((tag, idx) => (
                        <span key={idx} className="bg-emerald-500/10 text-emerald-400 text-[10px] uppercase font-bold px-2 py-0.5 rounded border border-emerald-500/20">
                          #{tag}
                        </span>
                      ))}
                   </div>
                 </div>

                 {/* Filters and Sorting UI */}
                 <div className="flex flex-wrap items-center gap-4">
                   {/* Priority Filter */}
                   <div className="flex items-center bg-slate-900/50 border border-slate-800 p-1 rounded-xl h-fit">
                      {(['all', ...Object.values(Priority)] as const).map(p => (
                        <button
                          key={p}
                          onClick={() => setPriorityFilter(p)}
                          className={`px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all ${
                            priorityFilter === p 
                              ? 'bg-slate-700 text-white shadow-sm' 
                              : 'text-slate-500 hover:text-slate-300'
                          }`}
                        >
                          {p}
                        </button>
                      ))}
                   </div>

                   {/* Sort Mode */}
                   <div className="flex items-center bg-slate-900/50 border border-slate-800 p-1 rounded-xl h-fit">
                      {(['priority', 'dueDate'] as SortMode[]).map(m => (
                        <button
                          key={m}
                          onClick={() => setSortMode(m)}
                          className={`px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wider transition-all flex items-center gap-2 ${
                            sortMode === m 
                              ? 'bg-blue-600 text-white shadow-sm' 
                              : 'text-slate-500 hover:text-slate-300'
                          }`}
                        >
                          <i className={`fas ${m === 'priority' ? 'fa-sort-amount-up' : 'fa-clock'}`} />
                          {m === 'dueDate' ? 'Due Date' : 'Priority'}
                        </button>
                      ))}
                   </div>
                 </div>
               </div>

               <div className="grid grid-cols-1 md:grid-cols-3 gap-6 flex-1 overflow-y-auto pr-4">
                  {(['todo', 'in-progress', 'done'] as TaskStatus[]).map((status) => (
                    <div key={status} className="flex flex-col gap-4">
                      <div className="flex items-center justify-between px-2">
                        <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest flex items-center gap-2">
                          <span className={`w-2 h-2 rounded-full ${
                            status === 'todo' ? 'bg-slate-500' : 
                            status === 'in-progress' ? 'bg-blue-500 animate-pulse' : 'bg-green-500'
                          }`} />
                          {status.replace('-', ' ')}
                        </h3>
                        <span className="text-xs text-slate-600">
                          {filteredAndSortedTasks.filter(t => t.status === status).length}
                        </span>
                      </div>
                      
                      <div className="flex flex-col gap-3">
                        {filteredAndSortedTasks
                          .filter(t => t.status === status)
                          .map(task => (
                            <div 
                              key={task.id} 
                              onClick={() => setSelectedTaskId(task.id)}
                              className={`bg-slate-800/40 border-l-4 p-4 rounded-xl hover:bg-slate-800/60 transition-all cursor-pointer group relative ${
                                selectedTaskId === task.id ? 'bg-slate-800/80 ring-1 ring-blue-500/30' : ''
                              } ${
                                task.priority === Priority.CRITICAL ? 'border-l-red-500/80 border-slate-700/50' :
                                task.priority === Priority.HIGH ? 'border-l-orange-500/80 border-slate-700/50' :
                                task.priority === Priority.MEDIUM ? 'border-l-blue-500/80 border-slate-700/50' :
                                'border-l-slate-600/80 border-slate-700/50'
                              }`}
                            >
                              <div className="flex justify-between items-start mb-2">
                                <h4 className="text-sm font-semibold text-slate-100 group-hover:text-blue-400 transition-colors pr-4">{task.title}</h4>
                                <span className={`text-[9px] uppercase font-bold px-1.5 py-0.5 rounded shrink-0 ${
                                  task.priority === Priority.CRITICAL ? 'bg-red-500/20 text-red-400 border border-red-500/30' :
                                  task.priority === Priority.HIGH ? 'bg-orange-500/20 text-orange-400 border border-orange-500/30' :
                                  'bg-slate-700/50 text-slate-400'
                                }`}>
                                  {task.priority}
                                </span>
                              </div>
                              <p className="text-xs text-slate-500 line-clamp-2 mb-2 leading-relaxed">{task.description}</p>
                              
                              {task.dueDate && (
                                <div className={`flex items-center gap-1.5 text-[10px] mb-3 font-medium ${isOverdue(task.dueDate) ? 'text-red-400' : 'text-slate-500'}`}>
                                  <i className={`far ${isOverdue(task.dueDate) ? 'fa-calendar-exclamation animate-pulse' : 'fa-calendar'}`} />
                                  <span>{isOverdue(task.dueDate) ? 'Overdue: ' : ''}{new Date(task.dueDate).toLocaleDateString()}</span>
                                </div>
                              )}

                              {task.subtasks && task.subtasks.length > 0 && (
                                <div className="flex items-center gap-2">
                                   <div className="flex-1 bg-slate-950 h-1.5 rounded-full overflow-hidden">
                                      <div 
                                        className="bg-blue-500 h-full rounded-full transition-all duration-500" 
                                        style={{ width: `${(task.subtasks.filter(s => s.completed).length / task.subtasks.length) * 100}%` }}
                                      />
                                   </div>
                                   <span className="text-[10px] text-slate-600 font-mono">
                                      {task.subtasks.filter(s => s.completed).length}/{task.subtasks.length}
                                   </span>
                                </div>
                              )}
                            </div>
                          ))}
                          <button 
                            onClick={() => setInputText(`Add a new task to ${selectedProject.name} project: `)}
                            className="flex items-center justify-center gap-2 border-2 border-dashed border-slate-800 rounded-xl p-4 text-slate-600 hover:text-slate-400 hover:border-slate-700 transition-all text-xs font-medium"
                          >
                            <i className="fas fa-plus" /> Add Task
                          </button>
                      </div>
                    </div>
                  ))}
               </div>
            </div>
          ) : (
            <div className="flex-1 flex items-center justify-center flex-col text-center space-y-8 animate-in fade-in duration-500">
              <div className="w-24 h-24 rounded-3xl bg-blue-600/10 flex items-center justify-center border border-blue-500/20 rotate-3 hover:rotate-0 transition-transform duration-500">
                 <i className="fas fa-terminal text-blue-500 text-3xl" />
              </div>
              <div>
                <h2 className="text-3xl font-bold text-white mb-3">Your Developer Command Center</h2>
                <p className="text-slate-500 max-w-md mx-auto leading-relaxed">Aura is your elite technical partner. Speak or type to manage deployments, architecture plans, and sprint tasks.</p>
              </div>
              <div className="flex flex-wrap justify-center gap-4">
                <button 
                  onClick={() => setIsImportModalOpen(true)}
                  className="bg-blue-600/10 border border-blue-500/30 px-6 py-4 rounded-2xl text-blue-400 hover:bg-blue-600/20 transition-all text-sm flex items-center gap-3 group"
                >
                  <i className="fas fa-file-import text-blue-400 group-hover:scale-110 transition-transform" />
                  "Smart Import: Notes/Email"
                </button>
                <button 
                  onClick={() => setInputText("Aura, what are my critical tasks for today?")}
                  className="bg-slate-800/40 border border-slate-700/50 px-6 py-4 rounded-2xl text-slate-300 hover:bg-slate-800 hover:border-blue-500/30 transition-all text-sm flex items-center gap-3 group"
                >
                  <i className="fas fa-bolt text-yellow-500 group-hover:scale-110 transition-transform" />
                  "Daily brief: Critical tasks"
                </button>
                <button 
                  onClick={() => setInputText("Help me plan a new microservice for user authentication")}
                  className="bg-slate-800/40 border border-slate-700/50 px-6 py-4 rounded-2xl text-slate-300 hover:bg-slate-800 hover:border-blue-500/30 transition-all text-sm flex items-center gap-3 group"
                >
                  <i className="fas fa-project-diagram text-blue-500 group-hover:scale-110 transition-transform" />
                  "Architecture Plan..."
                </button>
              </div>
            </div>
          )}

        </div>

        {/* AI Interaction Footer */}
        <footer className="h-24 border-t border-slate-800/60 flex items-center px-8 gap-6 bg-[#0b0f1a]/80 backdrop-blur-md relative z-20">
          
          <div className="absolute -top-10 left-1/2 -translate-x-1/2 z-30">
             <VoiceOrb 
                isListening={isListening} 
                isProcessing={isProcessing} 
                onClick={toggleListening} 
             />
          </div>

          <div className="flex-1 flex items-center gap-4 bg-slate-900/60 border border-slate-800/60 rounded-2xl px-5 py-3 ml-2 focus-within:border-blue-500/50 transition-colors">
            <i className="fas fa-terminal text-slate-500 text-sm" />
            <input 
              type="text"
              value={inputText}
              onChange={(e) => setInputText(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSendText()}
              placeholder="Ask Aura anything..."
              className="bg-transparent border-none outline-none text-slate-200 flex-1 font-mono text-sm placeholder-slate-700"
            />
            <button 
              onClick={handleSendText}
              disabled={isProcessing || !inputText.trim()}
              className="w-10 h-10 rounded-xl bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:bg-slate-800 transition-all flex items-center justify-center shadow-lg shadow-blue-900/20"
            >
              <i className={`fas ${isProcessing ? 'fa-spinner fa-spin' : 'fa-paper-plane'} text-sm text-white`} />
            </button>
          </div>
          
          <div className="w-48 hidden md:block">
            <div className="flex items-center gap-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1">
              <span className={`w-2 h-2 rounded-full ${isListening ? 'bg-green-500 animate-pulse' : 'bg-slate-700'}`} />
              {isListening ? 'Aura Listening' : 'Aura Idle'}
            </div>
            <p className="text-[10px] text-slate-600 leading-tight font-mono">
               SYS: 2.5 Flash Native <br/> MODE: Voice Optimized
            </p>
          </div>
        </footer>

        {/* Floating Chat History */}
        {chatHistory.length > 0 && !selectedTask && (
          <div className="absolute bottom-32 right-8 w-80 max-h-[400px] overflow-y-auto bg-slate-900/90 border border-slate-800 rounded-2xl shadow-2xl backdrop-blur-lg z-40 p-4 space-y-4 animate-in slide-in-from-bottom-4 duration-300">
             {chatHistory.map((chat, idx) => (
               <div key={idx} className={`flex flex-col ${chat.role === 'user' ? 'items-end' : 'items-start'}`}>
                  <div className={`max-w-[90%] rounded-2xl px-4 py-2.5 text-sm ${
                    chat.role === 'user' 
                      ? 'bg-blue-600 text-white rounded-tr-none' 
                      : 'bg-slate-800 text-slate-200 rounded-tl-none border border-slate-700'
                  }`}>
                    {chat.content}
                  </div>
               </div>
             ))}
             <div className="h-2" />
          </div>
        )}

        {/* Modals & Overlays */}
        {isImportModalOpen && (
          <ContextImportModal 
            projects={projects}
            initialProjectId={activeProjectId}
            onClose={() => setIsImportModalOpen(false)} 
            onImport={handleImportTasks} 
          />
        )}

        {selectedTask && (
          <div className="fixed inset-0 z-50 flex justify-end">
             <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setSelectedTaskId(null)} />
             <TaskDetailPanel 
               task={selectedTask} 
               projectTasks={selectedProject?.tasks || []}
               onClose={() => setSelectedTaskId(null)} 
               onUpdateTask={updateTask}
               onSelectTask={setSelectedTaskId}
             />
          </div>
        )}
      </main>

    </div>
  );
};

export default App;