import React, { useState, useRef, useEffect } from 'react';
import { Ticket, KBArticle, Agent, TicketStatus, TicketPriority, SurveyResult, AppSettings, ClientUser, TicketQueue, EmailTemplate, EmailTrigger, EmailAudience, AgentAvatarConfig, AgentRole, AiProvider } from '../types';
import { generateNewKBArticle } from '../services/geminiService';
import { ToastType } from './Toast';
import { 
  LayoutDashboard, 
  BookOpen, 
  Users, 
  Sparkles, 
  CheckCircle, 
  Clock, 
  Edit3, 
  Plus, 
  ExternalLink,
  FileText,
  BarChart3,
  TrendingUp,
  MessageCircle,
  Star,
  Settings,
  Trash2,
  Mail,
  Palette,
  Shield,
  Save,
  LogOut,
  Paperclip,
  Layers,
  X,
  Camera,
  Move,
  Check,
  Zap,
  Copy,
  Activity,
  UserPlus,
  Loader2,
  Lock,
  Cpu,
  AlertTriangle,
  RotateCcw,
  Bot,
  Key,
  Archive,
  Inbox,
  Send
} from 'lucide-react';

interface AgentDashboardProps {
  currentUser: Agent;
  tickets: Ticket[];
  articles: KBArticle[];
  agents: Agent[];
  queues: TicketQueue[];
  surveys?: SurveyResult[];
  clientUsers: ClientUser[];
  settings: AppSettings;
  updateTicketStatus: (id: string, status: TicketStatus) => void;
  updateTicketAgent: (id: string, agentId: string) => void;
  onReplyTicket: (ticketId: string, message: string) => void;
  addArticle: (article: KBArticle) => void;
  updateArticle: (article: KBArticle) => void;
  addAgent: (agent: Agent) => void;
  updateAgent: (agent: Agent) => void;
  removeAgent: (id: string) => void;
  addClientUser: (user: ClientUser) => void;
  updateClientUser: (user: ClientUser) => void;
  removeClientUser: (id: string) => void;
  updateSettings: (settings: AppSettings) => void;
  addQueue: (queue: TicketQueue) => void;
  removeQueue: (id: string) => void;
  onLogout: () => void;
  showToast: (message: string, type: ToastType) => void;
}

// --- SUB-COMPONENT: Avatar Editor ---
interface AvatarEditorProps {
  initialImage: string;
  initialConfig?: AgentAvatarConfig;
  onSave: (image: string, config: AgentAvatarConfig) => void;
}

const AvatarEditor: React.FC<AvatarEditorProps> = ({ initialImage, initialConfig, onSave }) => {
  const [image, setImage] = useState(initialImage);
  const [config, setConfig] = useState<AgentAvatarConfig>(initialConfig || { x: 50, y: 50, scale: 1 });
  const [isDragging, setIsDragging] = useState(false);
  const dragStart = useRef<{x: number, y: number}>({ x: 0, y: 0 });
  
  // Update local state when props change (for editing)
  useEffect(() => {
    setImage(initialImage);
    if(initialConfig) setConfig(initialConfig);
  }, [initialImage, initialConfig]);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const url = URL.createObjectURL(e.target.files[0]);
      setImage(url);
      setConfig({ x: 50, y: 50, scale: 1 }); // Reset config for new image
    }
  };

  const handleMouseDown = (e: React.MouseEvent) => {
    setIsDragging(true);
    dragStart.current = { x: e.clientX, y: e.clientY };
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging) return;
    const deltaX = (e.clientX - dragStart.current.x) * 0.5; // Sensitivity
    const deltaY = (e.clientY - dragStart.current.y) * 0.5;
    
    setConfig(prev => ({
      ...prev,
      x: Math.min(100, Math.max(0, prev.x - deltaX * 0.2)), // Invert direction for natural feel or keep normal
      y: Math.min(100, Math.max(0, prev.y - deltaY * 0.2))
    }));
    
    dragStart.current = { x: e.clientX, y: e.clientY };
  };

  const handleMouseUp = () => setIsDragging(false);

  return (
    <div className="flex flex-col items-center p-4 bg-gray-50 rounded-lg border border-dashed border-gray-300">
       <div 
        className="w-32 h-32 rounded-full overflow-hidden border-4 border-white shadow-lg cursor-move relative bg-gray-200 mb-4"
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}
       >
         {image ? (
           <img 
            src={image} 
            alt="Avatar" 
            className="w-full h-full object-cover"
            style={{
              objectPosition: `${config.x}% ${config.y}%`,
              transform: `scale(${config.scale})`
            }}
            draggable={false}
           />
         ) : (
            <div className="flex items-center justify-center h-full text-gray-400"><Users className="w-8 h-8" /></div>
         )}
         <div className="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-10 transition pointer-events-none flex items-center justify-center">
            <Move className="text-white opacity-0 hover:opacity-100 drop-shadow-md" />
         </div>
       </div>

       <div className="w-full space-y-3">
         <div className="flex justify-center">
            <label className="cursor-pointer bg-white border border-gray-300 px-3 py-1.5 rounded-md text-sm font-medium hover:bg-gray-50 flex items-center">
              <Camera className="w-4 h-4 mr-2 text-gray-500" />
              Carica Foto
              <input type="file" className="hidden" accept="image/*" onChange={handleFileChange} />
            </label>
         </div>
         
         {image && (
           <div className="flex items-center space-x-2">
             <span className="text-xs text-gray-500">Zoom</span>
             <input 
              type="range" 
              min="1" 
              max="3" 
              step="0.1" 
              value={config.scale}
              onChange={(e) => setConfig({...config, scale: parseFloat(e.target.value)})}
              className="flex-1 h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer"
             />
           </div>
         )}
         
         <p className="text-[10px] text-gray-400 text-center">Trascina l'immagine per centrarla</p>

         <button 
           type="button" // Prevent form submission
           onClick={() => onSave(image, config)}
           className="w-full bg-blue-600 text-white py-1.5 rounded text-sm font-bold hover:bg-blue-700"
         >
           Conferma Avatar
         </button>
       </div>
    </div>
  );
};

// --- MAIN COMPONENT ---
export const AgentDashboard: React.FC<AgentDashboardProps> = ({
  currentUser,
  tickets,
  articles,
  agents,
  queues,
  surveys = [],
  clientUsers,
  settings,
  updateTicketStatus,
  updateTicketAgent,
  onReplyTicket,
  addArticle,
  updateArticle,
  addAgent,
  updateAgent,
  removeAgent,
  addClientUser,
  updateClientUser,
  removeClientUser,
  updateSettings,
  addQueue,
  removeQueue,
  onLogout,
  showToast
}) => {
  const [view, setView] = useState<'tickets' | 'kb' | 'ai' | 'analytics' | 'settings'>('tickets');
  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
  const [selectedQueue, setSelectedQueue] = useState<string | null>(null); // Name of the queue
  const [isViewingArchive, setIsViewingArchive] = useState(false);
  const [replyText, setReplyText] = useState('');

  // ROLE BASED PERMISSIONS
  const canManageGlobalSettings = currentUser.role === 'superadmin';
  const canManageTeam = currentUser.role === 'superadmin' || currentUser.role === 'supervisor';
  const canAccessSettings = canManageTeam || canManageGlobalSettings;

  // Initialize correct tab based on permissions
  const [settingsTab, setSettingsTab] = useState<'general' | 'system' | 'ai' | 'users' | 'agents' | 'queues' | 'email'>('users');
  const [isSaving, setIsSaving] = useState(false);
  
  useEffect(() => {
    if (view === 'settings') {
        if (canManageGlobalSettings) setSettingsTab('system'); // Default to system for superadmin
        else if (canManageTeam) setSettingsTab('users');
    }
  }, [view, canManageGlobalSettings, canManageTeam]);

  // Set default queue when entering tickets view
  useEffect(() => {
    if (view === 'tickets' && !selectedQueue && !isViewingArchive && queues.length > 0) {
      // Find the first queue assigned to the agent, or just the first queue
      const firstAssignedQueue = queues.find(q => currentUser.queues.includes(q.name));
      if (firstAssignedQueue) {
        setSelectedQueue(firstAssignedQueue.name);
      } else if (queues.length > 0) {
        setSelectedQueue(queues[0].name);
      }
    }
  }, [view, queues, currentUser]);


  // KB Editor State
  const [isEditingKB, setIsEditingKB] = useState(false);
  const [newArticle, setNewArticle] = useState<Partial<KBArticle>>({ type: 'article', category: 'General' });
  const [isFetchingUrl, setIsFetchingUrl] = useState(false);

  // AI State
  const [isAiAnalyzing, setIsAiAnalyzing] = useState(false);
  const [aiSuggestions, setAiSuggestions] = useState<Array<{ title: string; content: string; category: string }>>([]);

  // Forms State for Settings
  const [newAgentForm, setNewAgentForm] = useState<Partial<Agent>>({ name: '', email: '', password: '', skills: [], queues: [], role: 'agent', avatar: '', avatarConfig: {x: 50, y: 50, scale: 1} });
  const [editingAgent, setEditingAgent] = useState<Agent | null>(null); 
  
  const [newUserForm, setNewUserForm] = useState<Partial<ClientUser>>({ name: '', email: '', status: 'active', company: '' });
  const [editingUser, setEditingUser] = useState<ClientUser | null>(null);

  const [newQueueForm, setNewQueueForm] = useState<Partial<TicketQueue>>({ name: '', description: '' });
  const [tempSettings, setTempSettings] = useState<AppSettings>(settings);

  // Email Template Editor State
  const [editingTemplate, setEditingTemplate] = useState<EmailTemplate | null>(null);
  const [isTestingSmtp, setIsTestingSmtp] = useState(false);

  const selectedTicket = tickets.find(t => t.id === selectedTicketId);

  // Stats for Quotas
  const currentAgents = agents.filter(a => a.role === 'agent').length;
  const currentSupervisors = agents.filter(a => a.role === 'supervisor').length;
  const currentArticles = articles.length;
  const currentAiArticles = articles.filter(a => a.source === 'ai').length;

  const isKbFull = currentArticles >= settings.features.maxKbArticles;
  const isAgentQuotaFull = currentAgents >= settings.features.maxAgents;
  const isSupervisorQuotaFull = currentSupervisors >= settings.features.maxSupervisors;

  // Filter Agents for Assignment based on Role
  const getAssignableAgents = (ticketQueue: string) => {
    // Superadmin and Supervisor can assign to anyone
    if (canManageTeam) return agents;
    // Agents can only assign to agents in the same queue
    return agents.filter(a => a.queues.includes(ticketQueue));
  };


  // Helper function to fetch URL content via proxy
  const fetchUrlContent = async (url: string): Promise<string> => {
    const parseContent = (html: string) => {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      
      const scripts = doc.querySelectorAll('script, style, nav, footer, header, svg, noscript, iframe');
      scripts.forEach(node => node.remove());
      
      let text = doc.body?.textContent || "";
      text = text.replace(/\s+/g, ' ').trim();
      
      return text.substring(0, 5000); 
    };

    try {
      const res1 = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(url)}`);
      if (res1.ok) {
        const data = await res1.json();
        if (data.contents) return parseContent(data.contents);
      }
    } catch (e) {
      console.warn("Primary scraping failed, trying fallback...");
    }

    try {
      const res2 = await fetch(`https://corsproxy.io/?${encodeURIComponent(url)}`);
      if (res2.ok) {
        const html = await res2.text();
        return parseContent(html);
      }
    } catch (e) {
      console.error("Scraping error:", e);
    }

    return "";
  };

  // Handlers
  const handleReplySubmit = () => {
    if (selectedTicketId && replyText.trim()) {
      onReplyTicket(selectedTicketId, replyText);
      setReplyText('');
      showToast('Risposta inviata', 'success');
    }
  };

  const handleAiAnalysis = async () => {
    if (!settings.features.aiKnowledgeAgentEnabled) {
      showToast("L'Agente Knowledge AI è disabilitato dall'amministratore.", 'error');
      return;
    }
    if (currentAiArticles >= settings.features.maxAiGeneratedArticles) {
      showToast("Quota creazione articoli AI raggiunta. Impossibile generare nuovi suggerimenti.", 'error');
      return;
    }
    
    if (!settings.aiConfig.apiKey) {
      showToast("Chiave API mancante. Configura l'AI nelle impostazioni.", 'error');
      return;
    }

    setIsAiAnalyzing(true);
    setAiSuggestions([]);
    const suggestions = await generateNewKBArticle(
      settings.aiConfig.apiKey, 
      tickets, 
      articles,
      settings.aiConfig.provider,
      settings.aiConfig.model
    );
    if (suggestions) {
       setAiSuggestions(suggestions);
    } else {
        showToast("Nessuna lacuna identificata dall'AI.", 'info');
    }
    setIsAiAnalyzing(false);
  };

  const saveAiArticle = (suggestion: { title: string; content: string; category: string }, index: number) => {
      addArticle({
        id: `kb-${Date.now()}-${index}`,
        title: suggestion.title,
        content: suggestion.content,
        category: suggestion.category,
        type: 'article',
        source: 'ai',
        lastUpdated: new Date().toISOString().split('T')[0]
      });
      setAiSuggestions(prev => prev.filter((_, i) => i !== index));
      showToast("Articolo aggiunto alla KB", 'success');
  };

  const discardAiArticle = (index: number) => {
      setAiSuggestions(prev => prev.filter((_, i) => i !== index));
  };

  const handleSaveArticle = async () => {
    if (newArticle.title && (newArticle.content || newArticle.url)) {
      let finalContent = newArticle.content || '';

      if (newArticle.type === 'url' && newArticle.url) {
        setIsFetchingUrl(true);
        const scrapedText = await fetchUrlContent(newArticle.url);
        setIsFetchingUrl(false);
        if (scrapedText) {
          finalContent = `[CONTENUTO PAGINA WEB SCARICATO]\n\n${scrapedText}\n\n[NOTE MANUALI]\n${newArticle.content || ''}`;
        } else {
          finalContent = newArticle.content || 'Contenuto non recuperabile automaticamente. Fare riferimento al link.';
        }
      }

      const articleToSave: KBArticle = {
        id: newArticle.id || `kb-${Date.now()}`,
        title: newArticle.title,
        content: finalContent,
        category: newArticle.category || 'General',
        type: newArticle.type || 'article',
        url: newArticle.url,
        source: newArticle.source || 'manual',
        lastUpdated: new Date().toISOString().split('T')[0]
      };

      if (newArticle.id) {
        updateArticle(articleToSave);
      } else {
        addArticle(articleToSave);
      }
      
      setIsEditingKB(false);
      setNewArticle({ type: 'article', category: 'General' });
    }
  };

  const handleAvatarSaved = (image: string, config: AgentAvatarConfig, isEditing: boolean) => {
    if (isEditing && editingAgent) {
      setEditingAgent({ ...editingAgent, avatar: image, avatarConfig: config });
    } else {
      setNewAgentForm({ ...newAgentForm, avatar: image, avatarConfig: config });
    }
  };

  const handleAddAgent = () => {
    if(newAgentForm.name && newAgentForm.email && newAgentForm.queues && newAgentForm.queues.length > 0) {
       addAgent({
         id: `a${Date.now()}`,
         name: newAgentForm.name,
         email: newAgentForm.email,
         password: newAgentForm.password || 'password', 
         role: newAgentForm.role || 'agent',
         avatar: newAgentForm.avatar || 'https://via.placeholder.com/200',
         avatarConfig: newAgentForm.avatarConfig,
         skills: newAgentForm.skills || ['General'],
         queues: newAgentForm.queues
       } as Agent);
       setNewAgentForm({ name: '', email: '', password: '', role: 'agent', skills: [], queues: [], avatar: '', avatarConfig: {x: 50, y: 50, scale: 1} });
    } else {
      showToast("Compila nome, email e seleziona almeno una coda.", 'error');
    }
  };

  const handleUpdateAgent = () => {
    if (editingAgent && newAgentForm.name && newAgentForm.email) {
      const updatedAgent: Agent = {
        ...editingAgent,
        name: newAgentForm.name!,
        email: newAgentForm.email!,
        password: newAgentForm.password || editingAgent.password,
        role: newAgentForm.role as AgentRole,
        avatar: newAgentForm.avatar || editingAgent.avatar,
        avatarConfig: newAgentForm.avatarConfig,
        queues: newAgentForm.queues || [],
        skills: newAgentForm.skills || []
      };
      
      updateAgent(updatedAgent);
      setEditingAgent(null);
      setNewAgentForm({ name: '', email: '', password: '', role: 'agent', skills: [], queues: [], avatar: '', avatarConfig: {x: 50, y: 50, scale: 1} });
    }
  };

  const handleEditAgentClick = (agent: Agent) => {
    setEditingAgent(agent);
    setNewAgentForm({
      name: agent.name,
      email: agent.email,
      password: agent.password,
      role: agent.role,
      avatar: agent.avatar,
      avatarConfig: agent.avatarConfig,
      skills: agent.skills,
      queues: agent.queues
    });
  };

  const cancelEditAgent = () => {
    setEditingAgent(null);
    setNewAgentForm({ name: '', email: '', password: '', role: 'agent', skills: [], queues: [], avatar: '', avatarConfig: {x: 50, y: 50, scale: 1} });
  };

  const toggleQueueInForm = (queueName: string, isEditing: boolean) => {
    const currentQueues = newAgentForm.queues || [];
    const newQueues = currentQueues.includes(queueName)
      ? currentQueues.filter(q => q !== queueName)
      : [...currentQueues, queueName];
    setNewAgentForm({ ...newAgentForm, queues: newQueues });
  };

  // --- USER MANAGEMENT HANDLERS ---
  const handleAddUser = () => {
    if(newUserForm.name && newUserForm.email) {
      addClientUser({
        id: `u${Date.now()}`,
        name: newUserForm.name,
        email: newUserForm.email,
        company: newUserForm.company,
        status: newUserForm.status || 'active',
        password: 'user' // Default password
      } as ClientUser);
      setNewUserForm({ name: '', email: '', status: 'active', company: '' });
    }
  };

  const handleUpdateUser = () => {
    if (editingUser && newUserForm.name && newUserForm.email) {
        updateClientUser({
            ...editingUser,
            name: newUserForm.name,
            email: newUserForm.email,
            company: newUserForm.company,
            status: newUserForm.status as 'active' | 'inactive'
        });
        setEditingUser(null);
        setNewUserForm({ name: '', email: '', status: 'active', company: '' });
    }
  };

  const handleEditUserClick = (user: ClientUser) => {
      setEditingUser(user);
      setNewUserForm({
          name: user.name,
          email: user.email,
          company: user.company,
          status: user.status
      });
  };

  const cancelEditUser = () => {
      setEditingUser(null);
      setNewUserForm({ name: '', email: '', status: 'active', company: '' });
  };

  const handleSendPasswordReset = (email: string) => {
      // Simulate sending email
      showToast(`Link di reset password inviato a ${email}`, 'success');
  };

  const handleAddQueue = () => {
    if (newQueueForm.name) {
      addQueue({
        id: `q-${Date.now()}`,
        name: newQueueForm.name,
        description: newQueueForm.description
      } as TicketQueue);
      setNewQueueForm({ name: '', description: '' });
    }
  };

  // Email & SMTP Handlers
  const handleTestSmtp = () => {
    setIsTestingSmtp(true);
    setTimeout(() => {
      setIsTestingSmtp(false);
      showToast(`Test Connessione SMTP Riuscito! Host: ${tempSettings.smtp.host}`, 'success');
    }, 1500);
  };

  const handleSaveTemplate = () => {
    if (editingTemplate) {
      let updatedTemplates = [...tempSettings.emailTemplates];
      if (editingTemplate.id === 'new') {
        updatedTemplates.push({ ...editingTemplate, id: `t${Date.now()}` });
      } else {
        updatedTemplates = updatedTemplates.map(t => t.id === editingTemplate.id ? editingTemplate : t);
      }
      setTempSettings({ ...tempSettings, emailTemplates: updatedTemplates });
      setEditingTemplate(null);
    }
  };

  const handleDeleteTemplate = (id: string) => {
    setTempSettings({ 
      ...tempSettings, 
      emailTemplates: tempSettings.emailTemplates.filter(t => t.id !== id) 
    });
  };

  const handleSaveSettings = () => {
    setIsSaving(true);
    // Simulate API call using prop
    updateSettings(tempSettings);
    setTimeout(() => {
      setIsSaving(false);
    }, 800);
  };

  // Filter Logic for Ticket View
  const getFilteredTickets = () => {
    if (isViewingArchive) {
      return tickets.filter(t => t.status === TicketStatus.RESOLVED || t.status === TicketStatus.CLOSED);
    }
    // Viewing a specific queue (Open tickets only)
    if (selectedQueue) {
      return tickets.filter(t => 
        t.queue === selectedQueue && 
        (t.status === TicketStatus.OPEN || t.status === TicketStatus.IN_PROGRESS)
      );
    }
    return [];
  };

  const filteredTickets = getFilteredTickets();
  const queueCounts: Record<string, number> = {};
  
  // Calculate open tickets per queue for the sidebar
  queues.forEach(q => {
    queueCounts[q.name] = tickets.filter(t => 
      t.queue === q.name && 
      (t.status === TicketStatus.OPEN || t.status === TicketStatus.IN_PROGRESS)
    ).length;
  });

  // ANALYTICS & STATS CALCULATION
  const totalTickets = tickets.length;
  const resolvedCount = tickets.filter(t => t.status === TicketStatus.RESOLVED || t.status === TicketStatus.CLOSED).length;
  const resolutionRate = totalTickets > 0 ? Math.round((resolvedCount / totalTickets) * 100) : 0;
  
  const validSurveys = surveys || [];
  const ratedSurveys = validSurveys.filter(s => s.rating > 0);
  const avgRating = ratedSurveys.length > 0 
    ? (ratedSurveys.reduce((acc, curr) => acc + curr.rating, 0) / ratedSurveys.length).toFixed(1) 
    : '0.0';

  let maxQueue = 0;
  queues.forEach(q => {
      const count = tickets.filter(t => t.queue === q.name).length;
      if (count > maxQueue) maxQueue = count;
  });

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Sidebar */}
      <div className="w-64 bg-slate-900 text-white flex flex-col flex-shrink-0">
        <div className="p-6">
          <h2 className="text-2xl font-bold tracking-tight">{settings.branding.appName}</h2>
          <p className="text-slate-400 text-sm">{currentUser.role === 'superadmin' ? 'Super Admin' : currentUser.role === 'supervisor' ? 'Supervisor Workspace' : 'Agent Workspace'}</p>
        </div>
        <nav className="flex-1 px-4 space-y-2">
          <button 
            onClick={() => setView('tickets')} 
            className={`flex items-center w-full px-4 py-3 rounded-lg transition ${view === 'tickets' ? 'bg-brand-600 text-white' : 'text-slate-300 hover:bg-slate-800'}`}
            style={view === 'tickets' ? { backgroundColor: settings.branding.primaryColor } : {}}
          >
            <LayoutDashboard className="w-5 h-5 mr-3" />
            Ticket
          </button>
          <button 
            onClick={() => setView('kb')} 
            className={`flex items-center w-full px-4 py-3 rounded-lg transition ${view === 'kb' ? 'bg-brand-600 text-white' : 'text-slate-300 hover:bg-slate-800'}`}
            style={view === 'kb' ? { backgroundColor: settings.branding.primaryColor } : {}}
          >
            <BookOpen className="w-5 h-5 mr-3" />
            Knowledge Base
          </button>
          <button 
            onClick={() => setView('ai')} 
            className={`flex items-center w-full px-4 py-3 rounded-lg transition ${view === 'ai' ? 'bg-purple-600 text-white' : 'text-slate-300 hover:bg-slate-800'}`}
          >
            <Sparkles className="w-5 h-5 mr-3" />
            AI Knowledge Agent
          </button>
          <button 
            onClick={() => setView('analytics')} 
            className={`flex items-center w-full px-4 py-3 rounded-lg transition ${view === 'analytics' ? 'bg-indigo-600 text-white' : 'text-slate-300 hover:bg-slate-800'}`}
          >
            <BarChart3 className="w-5 h-5 mr-3" />
            Analytics
          </button>
          {canAccessSettings && (
            <button 
              onClick={() => setView('settings')} 
              className={`flex items-center w-full px-4 py-3 rounded-lg transition ${view === 'settings' ? 'bg-brand-600 text-white' : 'text-slate-300 hover:bg-slate-800'}`}
              style={view === 'settings' ? { backgroundColor: settings.branding.primaryColor } : {}}
            >
              <Settings className="w-5 h-5 mr-3" />
              Impostazioni
            </button>
          )}
        </nav>
        <div className="p-4 border-t border-slate-800">
          <div className="flex items-center justify-between">
            <div className="flex items-center">
               <div className="w-8 h-8 rounded-full overflow-hidden mr-3 bg-gray-600 border border-slate-600">
                 <img 
                  src={currentUser.avatar || 'https://via.placeholder.com/200'} 
                  alt={currentUser.name} 
                  className="w-full h-full object-cover" 
                  style={currentUser.avatarConfig ? {
                    objectPosition: `${currentUser.avatarConfig.x}% ${currentUser.avatarConfig.y}%`,
                    transform: `scale(${currentUser.avatarConfig.scale})`
                  } : {}}
                />
               </div>
              <div className="min-w-0">
                <p className="text-sm font-medium truncate">{currentUser.name}</p>
                <p className="text-xs text-slate-400 truncate w-24" title={currentUser.queues.join(', ')}>{currentUser.queues.join(', ')}</p>
              </div>
            </div>
            <button onClick={onLogout} className="text-slate-400 hover:text-white"><LogOut className="w-4 h-4" /></button>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 overflow-hidden flex flex-col h-screen">
        
        {/* SETTINGS VIEW - PERMISSION GATED */}
        {view === 'settings' && canAccessSettings && (
          <div className="flex-1 overflow-auto p-8">
            <div className="max-w-6xl mx-auto flex bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden min-h-[600px]">
              {/* Sidebar Settings Tabs */}
              <div className="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0">
                 <div className="p-4 border-b border-gray-200">
                   <h3 className="font-bold text-gray-700">Impostazioni</h3>
                 </div>
                 <nav className="flex-1 p-2 space-y-1">
                   {canManageGlobalSettings && (
                     <>
                       <button onClick={() => setSettingsTab('system')} className={`w-full px-4 py-3 text-sm font-medium flex items-center rounded-lg transition-colors ${settingsTab === 'system' ? 'bg-white text-brand-600 shadow-sm' : 'text-gray-600 hover:bg-gray-100'}`}>
                         <Cpu className="w-4 h-4 mr-3" /> Sistema & Quote
                       </button>
                       <button onClick={() => setSettingsTab('general')} className={`w-full px-4 py-3 text-sm font-medium flex items-center rounded-lg transition-colors ${settingsTab === 'general' ? 'bg-white text-brand-600 shadow-sm' : 'text-gray-600 hover:bg-gray-100'}`}>
                         <Palette className="w-4 h-4 mr-3" /> Branding
                       </button>
                     </>
                   )}
                   {(canManageTeam) && (
                     <>
                       <button onClick={() => setSettingsTab('ai')} className={`w-full px-4 py-3 text-sm font-medium flex items-center rounded-lg transition-colors ${settingsTab === 'ai' ? 'bg-white text-brand-600 shadow-sm' : 'text-gray-600 hover:bg-gray-100'}`}>
                         <Bot className="w-4 h-4 mr-3" /> Configurazione AI
                       </button>
                       <button onClick={() => setSettingsTab('users')} className={`w-full px-4 py-3 text-sm font-medium flex items-center rounded-lg transition-colors ${settingsTab === 'users' ? 'bg-white text-brand-600 shadow-sm' : 'text-gray-600 hover:bg-gray-100'}`}>
                         <Users className="w-4 h-4 mr-3" /> Utenti Frontend
                       </button>
                       <button onClick={() => setSettingsTab('agents')} className={`w-full px-4 py-3 text-sm font-medium flex items-center rounded-lg transition-colors ${settingsTab === 'agents' ? 'bg-white text-brand-600 shadow-sm' : 'text-gray-600 hover:bg-gray-100'}`}>
                         <Shield className="w-4 h-4 mr-3" /> Agenti Reali
                       </button>
                       <button onClick={() => setSettingsTab('queues')} className={`w-full px-4 py-3 text-sm font-medium flex items-center rounded-lg transition-colors ${settingsTab === 'queues' ? 'bg-white text-brand-600 shadow-sm' : 'text-gray-600 hover:bg-gray-100'}`}>
                         <Layers className="w-4 h-4 mr-3" /> Gestione Code
                       </button>
                     </>
                   )}
                   {canManageGlobalSettings && (
                     <button onClick={() => setSettingsTab('email')} className={`w-full px-4 py-3 text-sm font-medium flex items-center rounded-lg transition-colors ${settingsTab === 'email' ? 'bg-white text-brand-600 shadow-sm' : 'text-gray-600 hover:bg-gray-100'}`}>
                       <Mail className="w-4 h-4 mr-3" /> Email & SMTP
                     </button>
                   )}
                 </nav>
              </div>

              <div className="flex-1 p-8 overflow-y-auto">
                {/* SYSTEM SETTINGS TAB */}
                {settingsTab === 'system' && canManageGlobalSettings && (
                  <div className="space-y-6 animate-fade-in">
                    <h2 className="text-xl font-bold text-gray-800 mb-6">Limiti e Quote di Sistema</h2>
                    <div className="grid grid-cols-2 gap-6">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Max Articoli KB</label>
                        <input type="number" className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900" 
                          value={tempSettings.features.maxKbArticles} 
                          onChange={e => setTempSettings({...tempSettings, features: {...tempSettings.features, maxKbArticles: parseInt(e.target.value)}})} />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Max Agenti</label>
                        <input type="number" className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900" 
                          value={tempSettings.features.maxAgents} 
                          onChange={e => setTempSettings({...tempSettings, features: {...tempSettings.features, maxAgents: parseInt(e.target.value)}})} />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Max Supervisor</label>
                        <input type="number" className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900" 
                          value={tempSettings.features.maxSupervisors} 
                          onChange={e => setTempSettings({...tempSettings, features: {...tempSettings.features, maxSupervisors: parseInt(e.target.value)}})} />
                      </div>
                      <div>
                         <label className="block text-sm font-medium text-gray-700 mb-1">Quota Giornaliera AI Articoli</label>
                         <input type="number" className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900" 
                          value={tempSettings.features.maxAiGeneratedArticles} 
                          onChange={e => setTempSettings({...tempSettings, features: {...tempSettings.features, maxAiGeneratedArticles: parseInt(e.target.value)}})} />
                      </div>
                    </div>
                    <div className="mt-4 flex items-center">
                        <input type="checkbox" id="kbEnabled" className="mr-2" 
                          checked={tempSettings.features.kbEnabled} 
                          onChange={e => setTempSettings({...tempSettings, features: {...tempSettings.features, kbEnabled: e.target.checked}})} />
                        <label htmlFor="kbEnabled" className="text-sm text-gray-700">Abilita Knowledge Base Pubblica</label>
                    </div>
                    <div className="mt-2 flex items-center">
                        <input type="checkbox" id="aiAgent" className="mr-2" 
                          checked={tempSettings.features.aiKnowledgeAgentEnabled} 
                          onChange={e => setTempSettings({...tempSettings, features: {...tempSettings.features, aiKnowledgeAgentEnabled: e.target.checked}})} />
                        <label htmlFor="aiAgent" className="text-sm text-gray-700">Abilita Agente AI Knowledge Extraction</label>
                    </div>
                  </div>
                )}

                {/* GENERAL (BRANDING) TAB */}
                {settingsTab === 'general' && canManageGlobalSettings && (
                  <div className="space-y-6 max-w-lg">
                    <h2 className="text-xl font-bold text-gray-800 mb-6">Personalizzazione Branding</h2>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Nome Applicazione</label>
                      <input type="text" className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900" 
                        value={tempSettings.branding.appName} 
                        onChange={e => setTempSettings({...tempSettings, branding: {...tempSettings.branding, appName: e.target.value}})} />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Colore Primario (Hex)</label>
                      <div className="flex items-center">
                        <input type="color" className="h-10 w-10 border border-gray-300 rounded-md mr-3 cursor-pointer p-0.5 bg-white" 
                          value={tempSettings.branding.primaryColor} 
                          onChange={e => setTempSettings({...tempSettings, branding: {...tempSettings.branding, primaryColor: e.target.value}})} />
                        <input type="text" className="flex-1 border border-gray-300 rounded-md px-3 py-2 uppercase bg-white text-gray-900" 
                          value={tempSettings.branding.primaryColor} 
                          onChange={e => setTempSettings({...tempSettings, branding: {...tempSettings.branding, primaryColor: e.target.value}})} />
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">URL Logo</label>
                      <input type="text" className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900" 
                        value={tempSettings.branding.logoUrl} 
                        onChange={e => setTempSettings({...tempSettings, branding: {...tempSettings.branding, logoUrl: e.target.value}})} />
                    </div>
                  </div>
                )}

                {/* AI CONFIG TAB */}
                {settingsTab === 'ai' && canManageTeam && (
                  <div className="space-y-6 max-w-2xl animate-fade-in">
                     <h2 className="text-xl font-bold text-gray-800 mb-6">Integrazione AI</h2>
                     <div className="bg-purple-50 p-4 rounded-lg border border-purple-100 mb-6 flex items-start">
                       <Bot className="w-6 h-6 text-purple-600 mr-3 mt-1" />
                       <div>
                         <h3 className="font-bold text-purple-900">Configurazione Provider AI</h3>
                         <p className="text-sm text-purple-700">Scegli il motore di intelligenza artificiale per l'assistente chat e l'analisi della KB.</p>
                       </div>
                     </div>

                     <div className="space-y-4">
                       <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">Provider AI</label>
                          <select 
                            className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900"
                            value={tempSettings.aiConfig.provider}
                            onChange={(e) => setTempSettings({...tempSettings, aiConfig: {...tempSettings.aiConfig, provider: e.target.value as AiProvider}})}
                          >
                            <option value="gemini">Google Gemini</option>
                            <option value="openrouter">OpenRouter (Vari Modelli)</option>
                            <option value="openai">OpenAI (GPT-4/3.5)</option>
                            <option value="anthropic">Anthropic Claude</option>
                            <option value="deepseek">DeepSeek</option>
                            <option value="ollama">Ollama (Self-Hosted/Local)</option>
                            <option value="huggingface">HuggingFace (Free Tier)</option>
                          </select>
                       </div>

                       <div className="grid grid-cols-2 gap-4">
                         <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Modello</label>
                            <input 
                              type="text" 
                              placeholder={tempSettings.aiConfig.provider === 'gemini' ? "gemini-1.5-pro" : tempSettings.aiConfig.provider === 'openrouter' ? "openai/gpt-3.5-turbo" : "gpt-4o"}
                              className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900"
                              value={tempSettings.aiConfig.model}
                              onChange={(e) => setTempSettings({...tempSettings, aiConfig: {...tempSettings.aiConfig, model: e.target.value}})}
                            />
                         </div>
                         <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                               Base URL 
                               <span className="text-gray-400 font-normal ml-1 text-xs">
                                 {(tempSettings.aiConfig.provider === 'ollama' || tempSettings.aiConfig.provider === 'openai') ? '(Richiesto per Custom/Ollama)' : '(Opzionale)'}
                               </span>
                            </label>
                            <input 
                              type="text" 
                              placeholder={tempSettings.aiConfig.provider === 'ollama' ? "http://localhost:11434" : "https://api.openai.com/v1"}
                              className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900"
                              value={tempSettings.aiConfig.baseUrl || ''}
                              onChange={(e) => setTempSettings({...tempSettings, aiConfig: {...tempSettings.aiConfig, baseUrl: e.target.value}})}
                            />
                         </div>
                       </div>
                       
                       {/* API KEY FIELD */}
                       <div>
                          <label className="block text-sm font-medium text-gray-700 mb-1">API Key</label>
                          <input 
                            type="password" 
                            placeholder="Inserisci la tua API Key..."
                            className="w-full border border-gray-300 rounded-md px-3 py-2 bg-white text-gray-900 font-mono"
                            value={tempSettings.aiConfig.apiKey}
                            onChange={(e) => setTempSettings({...tempSettings, aiConfig: {...tempSettings.aiConfig, apiKey: e.target.value}})}
                          />
                          <p className="text-xs text-gray-500 mt-1">La chiave non verrà mostrata in chiaro dopo il salvataggio.</p>
                       </div>
                     </div>
                  </div>
                )}

                {/* USERS TAB */}
                {settingsTab === 'users' && canManageTeam && (
                  <div className="animate-fade-in">
                    <div className="flex justify-between items-center mb-6">
                      <h2 className="text-xl font-bold text-gray-800">Gestione Utenti Frontend</h2>
                      <button 
                        onClick={() => { setEditingUser(null); setNewUserForm({ name: '', email: '', status: 'active', company: '' }); }}
                        className="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-md transition"
                      >
                         Reset Form
                      </button>
                    </div>

                    <div className="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-6">
                      <h3 className="font-bold text-sm text-gray-700 mb-3">{editingUser ? 'Modifica Utente' : 'Aggiungi Nuovo Utente'}</h3>
                      <div className="grid grid-cols-2 gap-4 mb-4">
                        <input type="text" placeholder="Nome Completo" className="border p-2 rounded text-sm bg-white text-gray-900" value={newUserForm.name} onChange={e => setNewUserForm({...newUserForm, name: e.target.value})} />
                        <input type="email" placeholder="Email" className="border p-2 rounded text-sm bg-white text-gray-900" value={newUserForm.email} onChange={e => setNewUserForm({...newUserForm, email: e.target.value})} />
                        <input type="text" placeholder="Azienda (Opzionale)" className="border p-2 rounded text-sm bg-white text-gray-900" value={newUserForm.company} onChange={e => setNewUserForm({...newUserForm, company: e.target.value})} />
                        <select className="border p-2 rounded text-sm bg-white text-gray-900" value={newUserForm.status} onChange={e => setNewUserForm({...newUserForm, status: e.target.value as any})}>
                          <option value="active">Attivo</option>
                          <option value="inactive">Inattivo</option>
                        </select>
                      </div>
                      <div className="flex justify-end space-x-2">
                        {editingUser && <button onClick={cancelEditUser} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-200 rounded">Annulla</button>}
                        <button onClick={editingUser ? handleUpdateUser : handleAddUser} className="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700">{editingUser ? 'Aggiorna' : 'Aggiungi'}</button>
                      </div>
                    </div>

                    <div className="overflow-x-auto border border-gray-200 rounded-lg">
                      <table className="min-w-full text-left bg-white">
                        <thead className="bg-gray-50 text-gray-500 text-xs uppercase font-medium"><tr><th className="px-4 py-3">Nome</th><th className="px-4 py-3">Email</th><th className="px-4 py-3">Azienda</th><th className="px-4 py-3">Stato</th><th className="px-4 py-3 text-right">Azioni</th></tr></thead>
                        <tbody className="divide-y divide-gray-100">
                          {clientUsers.map(user => (
                            <tr key={user.id} className="hover:bg-gray-50 text-sm">
                              <td className="px-4 py-3 font-medium text-gray-900">{user.name}</td>
                              <td className="px-4 py-3 text-gray-500">{user.email}</td>
                              <td className="px-4 py-3 text-gray-500">{user.company || '-'}</td>
                              <td className="px-4 py-3"><span className={`px-2 py-0.5 rounded text-xs ${user.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>{user.status}</span></td>
                              <td className="px-4 py-3 text-right space-x-2">
                                <button onClick={() => handleSendPasswordReset(user.email)} className="text-gray-400 hover:text-brand-600" title="Reset Password"><Key className="w-4 h-4" /></button>
                                <button onClick={() => handleEditUserClick(user)} className="text-gray-400 hover:text-blue-600"><Edit3 className="w-4 h-4" /></button>
                                <button onClick={() => removeClientUser(user.id)} className="text-gray-400 hover:text-red-600"><Trash2 className="w-4 h-4" /></button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </div>
                )}

                {/* AGENTS TAB */}
                {settingsTab === 'agents' && canManageTeam && (
                  <div className="animate-fade-in">
                    <div className="flex justify-between items-center mb-6">
                      <h2 className="text-xl font-bold text-gray-800">Team di Supporto</h2>
                      {isAgentQuotaFull ? <span className="text-red-500 text-sm font-bold">Quota Agenti Raggiunta</span> : (
                        <button onClick={() => { setEditingAgent(null); setNewAgentForm({ name: '', email: '', password: '', role: 'agent', skills: [], queues: [], avatar: '', avatarConfig: {x: 50, y: 50, scale: 1} }); }} className="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-md transition">Nuovo Agente</button>
                      )}
                    </div>

                    <div className="bg-gray-50 p-6 rounded-lg border border-gray-200 mb-8">
                      <h3 className="font-bold text-gray-700 mb-4">{editingAgent ? 'Modifica Profilo Agente' : 'Nuovo Membro del Team'}</h3>
                      <div className="flex gap-6">
                         <div className="w-1/3">
                            <AvatarEditor 
                              initialImage={newAgentForm.avatar || 'https://via.placeholder.com/200'} 
                              initialConfig={newAgentForm.avatarConfig}
                              onSave={(img, cfg) => handleAvatarSaved(img, cfg, !!editingAgent)} 
                            />
                         </div>
                         <div className="w-2/3 space-y-4">
                            <div className="grid grid-cols-2 gap-4">
                              <input type="text" placeholder="Nome Completo" className="border p-2 rounded text-sm bg-white text-gray-900" value={newAgentForm.name} onChange={e => setNewAgentForm({...newAgentForm, name: e.target.value})} />
                              <input type="email" placeholder="Email Aziendale" className="border p-2 rounded text-sm bg-white text-gray-900" value={newAgentForm.email} onChange={e => setNewAgentForm({...newAgentForm, email: e.target.value})} />
                            </div>
                            <div className="grid grid-cols-2 gap-4">
                              <select className="border p-2 rounded text-sm bg-white text-gray-900" value={newAgentForm.role} onChange={e => setNewAgentForm({...newAgentForm, role: e.target.value as any})}>
                                <option value="agent">Agente Semplice</option>
                                <option value="supervisor">Supervisore</option>
                                <option value="superadmin">Super Admin</option>
                              </select>
                              <input type="password" placeholder={editingAgent ? "Lascia vuoto per non cambiare" : "Password provvisoria"} className="border p-2 rounded text-sm bg-white text-gray-900" value={newAgentForm.password} onChange={e => setNewAgentForm({...newAgentForm, password: e.target.value})} />
                            </div>
                            
                            <div>
                               <label className="block text-xs font-bold text-gray-500 uppercase mb-2">Assegnazione Code</label>
                               <div className="flex flex-wrap gap-2">
                                 {queues.map(q => (
                                   <button 
                                     key={q.id}
                                     onClick={() => toggleQueueInForm(q.name, !!editingAgent)}
                                     className={`px-3 py-1 rounded-full text-xs border transition ${newAgentForm.queues?.includes(q.name) ? 'bg-blue-100 border-blue-300 text-blue-800 font-bold' : 'bg-white border-gray-200 text-gray-600 hover:border-gray-300'}`}
                                   >
                                     {q.name}
                                   </button>
                                 ))}
                               </div>
                            </div>

                            <div className="flex justify-end space-x-3 pt-2">
                               {editingAgent && <button onClick={cancelEditAgent} className="px-4 py-2 text-gray-600 hover:bg-gray-200 rounded text-sm">Annulla</button>}
                               <button onClick={editingAgent ? handleUpdateAgent : handleAddAgent} className="bg-brand-600 text-white px-6 py-2 rounded text-sm hover:bg-brand-700 font-medium">{editingAgent ? 'Salva Modifiche' : 'Crea Agente'}</button>
                            </div>
                         </div>
                      </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       {agents.map(agent => (
                         <div key={agent.id} className="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex items-start">
                            <div className="w-12 h-12 rounded-full overflow-hidden mr-4 bg-gray-100 flex-shrink-0">
                               <img src={agent.avatar || 'https://via.placeholder.com/200'} alt={agent.name} className="w-full h-full object-cover" 
                                style={agent.avatarConfig ? { objectPosition: `${agent.avatarConfig.x}% ${agent.avatarConfig.y}%`, transform: `scale(${agent.avatarConfig.scale})` } : {}}
                               />
                            </div>
                            <div className="flex-1 min-w-0">
                               <div className="flex justify-between items-start">
                                 <h4 className="font-bold text-gray-900 truncate">{agent.name}</h4>
                                 <span className={`text-[10px] uppercase font-bold px-1.5 py-0.5 rounded ${agent.role === 'superadmin' ? 'bg-purple-100 text-purple-700' : agent.role === 'supervisor' ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700'}`}>{agent.role}</span>
                               </div>
                               <p className="text-xs text-gray-500 mb-2 truncate">{agent.email}</p>
                               <div className="flex flex-wrap gap-1 mb-2">
                                 {agent.queues.map(q => <span key={q} className="text-[10px] bg-gray-100 text-gray-600 px-1 rounded">{q}</span>)}
                               </div>
                               <div className="flex space-x-3 text-xs text-gray-400">
                                 <button onClick={() => handleEditAgentClick(agent)} className="hover:text-blue-600 flex items-center"><Edit3 className="w-3 h-3 mr-1" /> Modifica</button>
                                 {agent.role !== 'superadmin' && <button onClick={() => removeAgent(agent.id)} className="hover:text-red-600 flex items-center"><Trash2 className="w-3 h-3 mr-1" /> Rimuovi</button>}
                               </div>
                            </div>
                         </div>
                       ))}
                    </div>
                  </div>
                )}
                
                {/* QUEUES TAB */}
                {settingsTab === 'queues' && canManageTeam && (
                  <div className="animate-fade-in max-w-2xl">
                    <h2 className="text-xl font-bold text-gray-800 mb-6">Code di Smistamento</h2>
                    <div className="bg-gray-50 p-4 rounded-lg border border-gray-200 mb-6 flex space-x-3 items-end">
                       <div className="flex-1">
                          <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Nome Coda</label>
                          <input type="text" className="w-full border p-2 rounded text-sm bg-white text-gray-900" placeholder="Es. Supporto Tecnico" value={newQueueForm.name} onChange={e => setNewQueueForm({...newQueueForm, name: e.target.value})} />
                       </div>
                       <div className="flex-[2]">
                          <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Descrizione</label>
                          <input type="text" className="w-full border p-2 rounded text-sm bg-white text-gray-900" placeholder="Descrizione interna..." value={newQueueForm.description} onChange={e => setNewQueueForm({...newQueueForm, description: e.target.value})} />
                       </div>
                       <button onClick={handleAddQueue} className="bg-brand-600 text-white px-4 py-2 rounded text-sm font-bold hover:bg-brand-700 h-10">Aggiungi</button>
                    </div>

                    <div className="space-y-3">
                       {queues.map(q => (
                         <div key={q.id} className="bg-white p-4 rounded-lg border border-gray-200 shadow-sm flex justify-between items-center group">
                            <div>
                               <h4 className="font-bold text-gray-900 flex items-center">
                                 <Layers className="w-4 h-4 mr-2 text-gray-400" />
                                 {q.name}
                               </h4>
                               <p className="text-sm text-gray-500 ml-6">{q.description}</p>
                            </div>
                            <button onClick={() => removeQueue(q.id)} className="text-gray-300 hover:text-red-500 p-2"><X className="w-5 h-5" /></button>
                         </div>
                       ))}
                    </div>
                  </div>
                )}
                
                {settingsTab === 'email' && canManageGlobalSettings && (
                    <div className="animate-fade-in">
                        <h2 className="text-xl font-bold text-gray-800 mb-6">Configurazione SMTP</h2>
                        <div className="grid grid-cols-2 gap-4 max-w-2xl">
                             <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Host SMTP</label>
                                <input type="text" className="w-full border p-2 rounded text-sm bg-white text-gray-900" value={tempSettings.smtp.host} onChange={e => setTempSettings({...tempSettings, smtp: {...tempSettings.smtp, host: e.target.value}})} />
                             </div>
                             <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Porta</label>
                                <input type="number" className="w-full border p-2 rounded text-sm bg-white text-gray-900" value={tempSettings.smtp.port} onChange={e => setTempSettings({...tempSettings, smtp: {...tempSettings.smtp, port: parseInt(e.target.value)}})} />
                             </div>
                             <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Utente</label>
                                <input type="text" className="w-full border p-2 rounded text-sm bg-white text-gray-900" value={tempSettings.smtp.user} onChange={e => setTempSettings({...tempSettings, smtp: {...tempSettings.smtp, user: e.target.value}})} />
                             </div>
                             <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
                                <input type="password" className="w-full border p-2 rounded text-sm bg-white text-gray-900" value={tempSettings.smtp.pass} onChange={e => setTempSettings({...tempSettings, smtp: {...tempSettings.smtp, pass: e.target.value}})} />
                             </div>
                        </div>
                        <div className="mt-4">
                           <button onClick={handleTestSmtp} className="text-brand-600 text-sm font-medium hover:underline">{isTestingSmtp ? 'Test in corso...' : 'Test Connessione'}</button>
                        </div>
                    </div>
                )}

                {settingsTab !== 'users' && settingsTab !== 'agents' && settingsTab !== 'queues' && (
                    <div className="mt-8 flex justify-end border-t border-gray-200 pt-6">
                      <button 
                        onClick={handleSaveSettings} 
                        disabled={isSaving}
                        className="bg-brand-600 text-white px-6 py-3 rounded-lg font-bold flex items-center hover:bg-brand-700 shadow-lg disabled:opacity-70 disabled:cursor-wait transition-all"
                      >
                        {isSaving ? <Loader2 className="w-5 h-5 mr-2 animate-spin" /> : <Save className="w-5 h-5 mr-2" />}
                        {isSaving ? 'Salvataggio...' : 'Salva Impostazioni'}
                      </button>
                    </div>
                )}
              </div>
            </div>
          </div>
        )}
        
        {view === 'tickets' && (
          <div className="flex h-full border-t border-gray-200">
            {/* COLUMN 1: QUEUES & ARCHIVE */}
            <div className="w-64 bg-white border-r border-gray-200 flex flex-col">
              <div className="p-4 border-b border-gray-100 bg-gray-50">
                <h3 className="font-bold text-gray-700 text-sm uppercase tracking-wide">Code Attive</h3>
              </div>
              <div className="flex-1 overflow-y-auto">
                <ul className="py-2">
                  {queues.map(q => {
                    const count = queueCounts[q.name] || 0;
                    const isActive = selectedQueue === q.name && !isViewingArchive;
                    return (
                      <li key={q.id}>
                        <button
                          onClick={() => { setSelectedQueue(q.name); setIsViewingArchive(false); setSelectedTicketId(null); }}
                          className={`w-full text-left px-4 py-3 flex justify-between items-center text-sm font-medium transition ${isActive ? 'bg-blue-50 text-blue-700 border-r-4 border-blue-600' : 'text-gray-600 hover:bg-gray-50'}`}
                        >
                          <div className="flex items-center">
                            <Inbox className={`w-4 h-4 mr-3 ${isActive ? 'text-blue-500' : 'text-gray-400'}`} />
                            {q.name}
                          </div>
                          {count > 0 && (
                            <span className={`text-xs px-2 py-0.5 rounded-full ${isActive ? 'bg-blue-200 text-blue-800' : 'bg-gray-200 text-gray-600'}`}>
                              {count}
                            </span>
                          )}
                        </button>
                      </li>
                    );
                  })}
                </ul>

                <div className="mt-4 pt-4 border-t border-gray-100">
                  <div className="px-4 pb-2 text-xs font-bold text-gray-400 uppercase">Storico</div>
                  <button
                    onClick={() => { setIsViewingArchive(true); setSelectedQueue(null); setSelectedTicketId(null); }}
                    className={`w-full text-left px-4 py-3 flex items-center text-sm font-medium transition ${isViewingArchive ? 'bg-purple-50 text-purple-700 border-r-4 border-purple-600' : 'text-gray-600 hover:bg-gray-50'}`}
                  >
                    <Archive className={`w-4 h-4 mr-3 ${isViewingArchive ? 'text-purple-500' : 'text-gray-400'}`} />
                    Archivio Risolti
                  </button>
                </div>
              </div>
            </div>

            {/* COLUMN 2: TICKET LIST */}
            <div className="w-80 bg-white border-r border-gray-200 flex flex-col">
               <div className="p-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
                 <h3 className="font-bold text-gray-700 text-sm">
                   {isViewingArchive ? 'Archivio Ticket' : selectedQueue ? selectedQueue : 'Seleziona Coda'}
                 </h3>
                 <span className="text-xs text-gray-500">{filteredTickets.length} ticket</span>
               </div>
               <div className="flex-1 overflow-y-auto">
                 {filteredTickets.length === 0 ? (
                    <div className="p-8 text-center text-gray-400">
                      <div className="bg-gray-50 rounded-full p-4 w-16 h-16 flex items-center justify-center mx-auto mb-3">
                        {isViewingArchive ? <Archive className="w-8 h-8 opacity-20" /> : <Inbox className="w-8 h-8 opacity-20" />}
                      </div>
                      <p className="text-sm">Nessun ticket {isViewingArchive ? 'in archivio' : 'in questa coda'}.</p>
                    </div>
                 ) : (
                   filteredTickets.map(ticket => (
                    <div 
                      key={ticket.id}
                      onClick={() => setSelectedTicketId(ticket.id)}
                      className={`p-4 border-b border-gray-100 cursor-pointer hover:bg-blue-50 transition relative group ${selectedTicketId === ticket.id ? 'bg-blue-50 border-l-4 border-brand-500' : ''}`}
                    >
                      <div className="absolute right-2 top-2 hidden group-hover:flex flex-col gap-1 z-10">
                          {/* Agent Quick Assign - Only for Active Tickets */}
                          {!isViewingArchive && (
                            <div className="relative" onClick={e => e.stopPropagation()}>
                              <select 
                                className="appearance-none w-full bg-white border border-gray-200 text-xs rounded shadow-sm py-1 pl-6 pr-2 cursor-pointer hover:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-500"
                                value={ticket.assignedAgentId || ''}
                                onChange={(e) => updateTicketAgent(ticket.id, e.target.value)}
                              >
                                <option value="">Non assegnato</option>
                                {getAssignableAgents(ticket.queue).map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                              </select>
                              <UserPlus className="w-3 h-3 absolute left-1.5 top-1.5 text-gray-400 pointer-events-none" />
                            </div>
                          )}

                          {/* Status Quick Change */}
                          <div className="relative" onClick={e => e.stopPropagation()}>
                            <select 
                              className={`appearance-none w-full border text-xs rounded shadow-sm py-1 pl-6 pr-2 cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-500 ${
                                  ticket.status === TicketStatus.RESOLVED ? 'bg-green-50 border-green-200 text-green-700' : 
                                  ticket.status === TicketStatus.OPEN ? 'bg-blue-50 border-blue-200 text-blue-700' : 
                                  'bg-white border-gray-200 text-gray-700'
                              }`}
                              value={ticket.status}
                              onChange={(e) => updateTicketStatus(ticket.id, e.target.value as TicketStatus)}
                            >
                              {Object.values(TicketStatus).map(s => <option key={s} value={s}>{s}</option>)}
                            </select>
                            <div className="absolute left-1.5 top-1.5 pointer-events-none text-current opacity-70">
                              <Activity className="w-3 h-3" />
                            </div>
                          </div>
                      </div>

                      <div className="flex justify-between items-start mb-1">
                        <span className="font-bold text-gray-800 text-sm">{ticket.id}</span>
                        <span className={`text-[10px] px-2 py-0.5 rounded-full font-bold uppercase ${
                          ticket.priority === TicketPriority.HIGH || ticket.priority === TicketPriority.CRITICAL ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'
                        }`}>{ticket.priority}</span>
                      </div>
                      <h4 className="text-sm font-medium text-gray-900 truncate mb-1 pr-6">{ticket.subject}</h4>
                      <p className="text-xs text-gray-500">{ticket.customerName} • {ticket.status}</p>
                      <div className="flex items-center justify-between mt-1">
                        {ticket.attachments && ticket.attachments.length > 0 && (
                          <div className="flex items-center text-xs text-gray-400">
                            <Paperclip className="w-3 h-3 mr-1" />
                            {ticket.attachments.length}
                          </div>
                        )}
                        <span className="text-[10px] bg-gray-100 text-gray-500 px-1 rounded">{ticket.createdAt.split('T')[0]}</span>
                      </div>
                    </div>
                   ))
                 )}
               </div>
            </div>

            {/* COLUMN 3: DETAIL */}
            <div className="flex-1 bg-white rounded-xl shadow-sm p-6 overflow-y-auto m-4 ml-0">
              {selectedTicket ? (
                <div>
                  <div className="flex justify-between items-start mb-6">
                    <div>
                      <h2 className="text-2xl font-bold text-gray-900">{selectedTicket.subject}</h2>
                      <div className="flex items-center space-x-3 mt-2 text-sm text-gray-500">
                        <span>{selectedTicket.customerName}</span>
                        <span>•</span>
                        <span>{selectedTicket.createdAt.split('T')[0]}</span>
                        <span>•</span>
                        <span className="bg-gray-100 px-2 py-0.5 rounded text-gray-700">{selectedTicket.queue}</span>
                      </div>
                    </div>
                    <div className="flex space-x-2">
                       <select 
                        value={selectedTicket.assignedAgentId || ''}
                        onChange={(e) => updateTicketAgent(selectedTicket.id, e.target.value)}
                        className="border border-gray-300 rounded-md text-sm px-2 py-1 bg-white text-gray-900"
                        disabled={isViewingArchive}
                       >
                         <option value="">Non assegnato</option>
                         {getAssignableAgents(selectedTicket.queue).map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
                       </select>
                       <select 
                        value={selectedTicket.status}
                        onChange={(e) => updateTicketStatus(selectedTicket.id, e.target.value as TicketStatus)}
                        className="border border-gray-300 rounded-md text-sm px-2 py-1 bg-white text-gray-900"
                       >
                         {Object.values(TicketStatus).map(s => <option key={s} value={s}>{s}</option>)}
                       </select>
                    </div>
                  </div>

                  <div className="bg-gray-50 p-4 rounded-lg mb-6 border border-gray-100">
                    <p className="text-gray-800">{selectedTicket.description}</p>
                  </div>

                  {/* Attachments Section */}
                  {selectedTicket.attachments && selectedTicket.attachments.length > 0 && (
                    <div className="mb-6">
                      <h3 className="font-semibold text-gray-700 text-sm mb-2 flex items-center">
                        <Paperclip className="w-4 h-4 mr-1" /> Allegati
                      </h3>
                      <div className="grid grid-cols-2 gap-2">
                        {selectedTicket.attachments.map(att => (
                          <div key={att.id} className="flex items-center p-2 bg-gray-50 border border-gray-200 rounded text-sm text-blue-600 hover:underline cursor-pointer">
                            <FileText className="w-4 h-4 mr-2 text-gray-500" />
                            {att.name}
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  <div className="space-y-4 mb-6">
                    <h3 className="font-semibold text-gray-700">Cronologia Messaggi</h3>
                    {selectedTicket.messages.length === 0 ? (
                      <p className="text-sm text-gray-400 italic">Nessun messaggio.</p>
                    ) : (
                      selectedTicket.messages.map(m => (
                        <div key={m.id} className={`p-3 rounded-lg max-w-[80%] ${m.role === 'assistant' ? 'ml-auto bg-brand-50 border border-brand-100' : 'bg-white border border-gray-200'}`}>
                          <p className="text-xs text-gray-500 mb-1 font-semibold">{m.role === 'assistant' ? 'Agente' : 'Cliente'} <span className="font-normal opacity-70 ml-2">{m.timestamp.split('T')[1].substring(0,5)}</span></p>
                          <p className="text-sm text-gray-800">{m.content}</p>
                        </div>
                      ))
                    )}
                  </div>
                  
                  <div className="mt-auto pt-4 border-t border-gray-100">
                     <textarea 
                        className="w-full border border-gray-300 rounded-lg p-3 text-sm focus:ring-2 focus:ring-brand-500 focus:outline-none bg-white text-gray-900" 
                        placeholder="Scrivi una risposta interna o pubblica..." 
                        rows={3}
                        value={replyText}
                        onChange={(e) => setReplyText(e.target.value)}
                     />
                     <div className="flex justify-end mt-2">
                       <button 
                         onClick={handleReplySubmit}
                         className="bg-brand-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-brand-700 flex items-center"
                       >
                         <Send className="w-4 h-4 mr-2" />
                         Rispondi
                       </button>
                     </div>
                  </div>
                </div>
              ) : (
                <div className="flex items-center justify-center h-full text-gray-400">
                  <div className="text-center">
                    <LayoutDashboard className="w-12 h-12 mx-auto mb-2 opacity-20" />
                    <p>Seleziona un ticket dalla lista</p>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}
        
        {view === 'kb' && (
           <div className="bg-white rounded-xl shadow-sm p-6 min-h-full overflow-y-auto m-8">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold text-gray-800">Gestione Knowledge Base</h2>
              {settings.features.kbEnabled ? (
                <button 
                  onClick={() => {
                    setNewArticle({ type: 'article', category: 'General' });
                    setIsEditingKB(true);
                  }}
                  disabled={isKbFull}
                  className="bg-brand-600 text-white px-4 py-2 rounded-lg flex items-center hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <Plus className="w-4 h-4 mr-2" />
                  {isKbFull ? 'Limite Raggiunto' : 'Nuovo Articolo'}
                </button>
              ) : (
                <span className="text-red-500 font-bold flex items-center bg-red-50 px-3 py-1 rounded">
                  <AlertTriangle className="w-4 h-4 mr-2" /> KB Disabilitata
                </span>
              )}
            </div>

            {isEditingKB && (
              <div className="bg-gray-50 p-6 rounded-xl border border-gray-200 mb-8 animate-fade-in">
                <h3 className="font-bold text-gray-700 mb-4">{newArticle.id ? 'Modifica Elemento' : 'Nuovo Elemento'}</h3>
                {/* KB Form Inputs */}
                <div className="grid grid-cols-2 gap-4 mb-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Titolo</label>
                    <input type="text" className="w-full border border-gray-300 rounded px-3 py-2 bg-white text-gray-900" value={newArticle.title || ''} onChange={e => setNewArticle({...newArticle, title: e.target.value})} />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">Categoria</label>
                    <input type="text" className="w-full border border-gray-300 rounded px-3 py-2 bg-white text-gray-900" value={newArticle.category || ''} onChange={e => setNewArticle({...newArticle, category: e.target.value})} />
                  </div>
                </div>
                <div className="mb-4">
                  <label className="block text-sm font-medium text-gray-700 mb-1">Tipo</label>
                  <div className="flex space-x-4">
                    <label className="flex items-center"><input type="radio" name="type" checked={newArticle.type === 'article'} onChange={() => setNewArticle({...newArticle, type: 'article'})} className="mr-2" />Articolo</label>
                    <label className="flex items-center"><input type="radio" name="type" checked={newArticle.type === 'url'} onChange={() => setNewArticle({...newArticle, type: 'url'})} className="mr-2" />Link Esterno</label>
                  </div>
                </div>
                {newArticle.type === 'article' ? (
                  <div className="mb-4"><label className="block text-sm font-medium text-gray-700 mb-1">Contenuto</label><textarea rows={6} className="w-full border border-gray-300 rounded px-3 py-2 bg-white text-gray-900" value={newArticle.content || ''} onChange={e => setNewArticle({...newArticle, content: e.target.value})} /></div>
                ) : (
                  <div className="mb-4"><label className="block text-sm font-medium text-gray-700 mb-1">URL</label><input type="url" className="w-full border border-gray-300 rounded px-3 py-2 bg-white text-gray-900" value={newArticle.url || ''} onChange={e => setNewArticle({...newArticle, url: e.target.value})} /></div>
                )}
                <div className="flex justify-end space-x-3">
                  <button onClick={() => { setIsEditingKB(false); setNewArticle({ type: 'article', category: 'General' }); }} className="px-4 py-2 text-gray-600 hover:text-gray-800">Annulla</button>
                  <button onClick={handleSaveArticle} disabled={isFetchingUrl} className="px-4 py-2 bg-brand-600 text-white rounded hover:bg-brand-700 flex items-center disabled:opacity-70">{isFetchingUrl && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}{isFetchingUrl ? 'Scaricamento...' : 'Salva'}</button>
                </div>
              </div>
            )}

            <div className="overflow-x-auto">
              <table className="min-w-full text-left">
                <thead><tr className="border-b border-gray-200 text-gray-500 text-sm"><th className="py-3 px-4">Titolo</th><th className="py-3 px-4">Categoria</th><th className="py-3 px-4">Tipo</th><th className="py-3 px-4">Ultimo Agg.</th><th className="py-3 px-4">Azioni</th></tr></thead>
                <tbody>
                  {articles.map(article => (
                    <tr key={article.id} className="border-b border-gray-100 hover:bg-gray-50">
                      <td className="py-3 px-4 font-medium text-gray-800">{article.title}</td>
                      <td className="py-3 px-4"><span className="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">{article.category}</span></td>
                      <td className="py-3 px-4 text-sm text-gray-500 flex items-center">{article.type === 'url' ? <ExternalLink className="w-4 h-4 mr-1 text-blue-500" /> : <FileText className="w-4 h-4 mr-1 text-gray-400" />}{article.type === 'url' ? 'Link' : 'Articolo'}</td>
                      <td className="py-3 px-4 text-sm text-gray-500">{article.lastUpdated}</td>
                      <td className="py-3 px-4"><button onClick={() => { setNewArticle(article); setIsEditingKB(true); }} className="text-brand-600 hover:text-brand-800"><Edit3 className="w-4 h-4" /></button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
        
        {view === 'ai' && (
          <div className="max-w-4xl mx-auto p-8 overflow-y-auto">
             <div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-8 text-white shadow-lg mb-8">
               <div className="flex items-start justify-between">
                 <div>
                   <h2 className="text-3xl font-bold mb-2">Knowledge Agent AI</h2>
                   <p className="text-purple-100 max-w-xl">
                     Questo agente analizza automaticamente TUTTI i ticket "Risolti" per trovare lacune nella Knowledge Base. 
                   </p>
                 </div>
                 <Sparkles className="w-16 h-16 text-purple-300 opacity-50" />
               </div>
               
               <div className="mt-8">
                 {settings.features.aiKnowledgeAgentEnabled ? (
                   <button 
                    onClick={handleAiAnalysis}
                    disabled={isAiAnalyzing}
                    className="bg-white text-purple-700 px-6 py-3 rounded-xl font-bold hover:bg-purple-50 transition shadow-lg flex items-center disabled:opacity-70"
                   >
                     {isAiAnalyzing ? (
                       <>
                          <div className="animate-spin h-5 w-5 border-2 border-purple-700 border-t-transparent rounded-full mr-3"></div>
                          Analisi Completa in corso...
                       </>
                     ) : (
                       <>
                         <CheckCircle className="w-5 h-5 mr-2" />
                         Scansiona Tutti i Ticket Risolti
                       </>
                     )}
                   </button>
                 ) : (
                   <div className="bg-white/20 p-4 rounded-lg flex items-center text-sm font-medium">
                     <AlertTriangle className="w-5 h-5 mr-3 text-yellow-300" />
                     Funzionalità disabilitata dall'amministratore.
                   </div>
                 )}
               </div>
             </div>

             {/* LIST OF SUGGESTIONS */}
             {aiSuggestions.length > 0 ? (
               <div className="space-y-6">
                 <h3 className="text-xl font-bold text-gray-800 flex items-center">
                   <Sparkles className="w-5 h-5 mr-2 text-purple-600" />
                   {aiSuggestions.length} Nuovi Articoli Suggeriti
                 </h3>
                 {aiSuggestions.map((suggestion, index) => (
                   <div key={index} className="bg-white rounded-2xl shadow-md border border-purple-100 overflow-hidden animate-fade-in-up">
                     <div className="bg-purple-50 p-4 border-b border-purple-100 flex justify-between items-center">
                       <h3 className="text-purple-800 font-bold">{suggestion.title}</h3>
                       <span className="text-xs bg-purple-200 text-purple-800 px-2 py-1 rounded-full">{suggestion.category}</span>
                     </div>
                     <div className="p-6">
                        <div className="mb-4">
                          <label className="text-xs font-bold text-gray-500 uppercase tracking-wide">Contenuto Bozza</label>
                          <div className="mt-2 p-4 bg-gray-50 rounded-lg border border-gray-100 text-sm text-gray-700 font-mono whitespace-pre-wrap max-h-60 overflow-y-auto">
                            {suggestion.content}
                          </div>
                        </div>
                        <div className="flex justify-end space-x-4">
                          <button onClick={() => discardAiArticle(index)} className="px-4 py-2 text-gray-500 hover:text-gray-700 font-medium">Scarta</button>
                          <button onClick={() => saveAiArticle(suggestion, index)} className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-bold shadow-md">Approva</button>
                        </div>
                     </div>
                   </div>
                 ))}
               </div>
             ) : (
               !isAiAnalyzing && (
                 <div className="text-center text-gray-400 mt-12">
                   <Clock className="w-12 h-12 mx-auto mb-3 opacity-30" />
                   <p>Nessun suggerimento attivo. Avvia una scansione per trovare nuove lacune.</p>
                 </div>
               )
             )}
          </div>
        )}
        
        {view === 'analytics' && (
           <div className="max-w-6xl mx-auto space-y-6 p-8 overflow-y-auto">
             <h2 className="text-2xl font-bold text-gray-800 mb-6">Dashboard Analitica</h2>
             {/* Key Metrics Cards */}
             <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                  <div className="flex justify-between items-start mb-4"><div className="p-2 bg-blue-50 rounded-lg text-blue-600"><Inbox className="w-5 h-5"/></div><span className="text-xs font-semibold text-green-500 flex items-center"><TrendingUp className="w-3 h-3 mr-1" /> +12%</span></div>
                  <h3 className="text-slate-500 text-sm font-medium">Volume Ticket</h3><p className="text-3xl font-bold text-gray-900">{totalTickets}</p>
                </div>
                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                  <div className="flex justify-between items-start mb-4"><div className="p-2 bg-amber-50 rounded-lg text-amber-600"><Star className="w-5 h-5" /></div></div>
                  <h3 className="text-slate-500 text-sm font-medium">CSAT (Soddisfazione)</h3><p className="text-3xl font-bold text-gray-900">{avgRating}/5</p>
                </div>
                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                   <div className="flex justify-between items-start mb-4"><div className="p-2 bg-green-50 rounded-lg text-green-600"><CheckCircle className="w-5 h-5" /></div></div>
                   <h3 className="text-slate-500 text-sm font-medium">Tasso Risoluzione</h3><p className="text-3xl font-bold text-gray-900">{resolutionRate}%</p>
                </div>
                <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                   <div className="flex justify-between items-start mb-4"><div className="p-2 bg-purple-50 rounded-lg text-purple-600"><MessageCircle className="w-5 h-5" /></div></div>
                   <h3 className="text-slate-500 text-sm font-medium">Chat AI</h3><p className="text-3xl font-bold text-gray-900">{surveys ? surveys.filter(s => s.source === 'chat').length : 0} <span className="text-sm text-gray-400 font-normal">sessioni</span></p>
                </div>
             </div>
             {/* Charts */}
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
               <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100"><h3 className="font-bold text-gray-800 mb-6">Distribuzione Code</h3>
                 <div className="space-y-4">
                    {queues.map(q => {
                        const count = tickets.filter(t => t.queue === q.name).length;
                        return (
                            <div key={q.id} className="group">
                              <div className="flex justify-between text-sm mb-1"><span>{q.name}</span><span className="font-bold">{count}</span></div>
                              <div className="h-3 bg-gray-100 rounded-full overflow-hidden"><div className="h-full bg-blue-500 rounded-full" style={{ width: `${maxQueue > 0 ? (count/maxQueue)*100 : 0}%` }}></div></div>
                            </div>
                        )
                    })}
                 </div>
               </div>
               <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col"><h3 className="font-bold text-gray-800 mb-4">Feedback Recenti</h3>
                 <div className="flex-1 overflow-y-auto pr-2 space-y-3 max-h-[250px]">
                   {validSurveys.slice().reverse().map(survey => (
                     <div key={survey.id} className="p-3 bg-gray-50 rounded-lg border border-gray-100">
                       <div className="flex justify-between mb-1">
                          <div className="flex text-amber-400">{[...Array(5)].map((_, i) => (<Star key={i} className={`w-3 h-3 ${i < survey.rating ? 'fill-current' : 'text-gray-200'}`} />))}</div>
                          <span className="text-[10px] uppercase font-bold text-gray-400 bg-white px-2 rounded border border-gray-200">{survey.source}</span>
                       </div>
                       <p className="text-sm text-gray-700 italic">"{survey.comment || 'Nessun commento'}"</p>
                     </div>
                   ))}
                 </div>
               </div>
             </div>
           </div>
        )}

      </div>
    </div>
  );
};