import React, { useState, useEffect } from 'react';
import {
  Shield,
  Mail,
  Phone,
  Database,
  Truck,
  FileText,
  Settings,
  LogOut,
  UserCheck,
  Send,
  UserPlus,
  Play,
  Volume2,
  PhoneIncoming,
  PhoneOutgoing,
  MapPin,
  Clock,
  Sparkles,
  Search,
  CheckCircle,
  AlertTriangle,
  RotateCcw,
  RefreshCw,
  Plus,
  Compass,
  CheckCircle2,
  Trash2,
  ExternalLink,
  ChevronRight,
  Eye,
  Calendar,
  Lock,
  DollarSign,
  Wrench,
  Wifi,
  BatteryCharging,
  Printer,
  HeartHandshake,
  Bath,
  ShoppingBag,
  Tv,
  Users
} from 'lucide-react';
import LoginScreen from './components/LoginScreen';
import { User, Email, Voicemail, CallRecord, CaseRecord, DonationRecord, ScheduledStop, SharedForm } from './types';

export default function App() {
  const [currentUser, setCurrentUser] = useState<User | null>(null);
  const [activeTab, setActiveTab] = useState<string>('email');

  // Unified State
  const [emails, setEmails] = useState<Email[]>([]);
  const [helpdeskEmails, setHelpdeskEmails] = useState<any[]>([]);
  const [voicemails, setVoicemails] = useState<Voicemail[]>([]);
  const [calls, setCalls] = useState<CallRecord[]>([]);
  const [cases, setCases] = useState<CaseRecord[]>([]);
  const [donations, setDonations] = useState<DonationRecord[]>([]);
  const [scheduledStops, setScheduledStops] = useState<ScheduledStop[]>([]);
  const [sharedForms, setSharedForms] = useState<SharedForm[]>([]);
  const [roverState, setRoverState] = useState<any>({
    isTrackingLive: false,
    currentLatitude: 38.5816,
    currentLongitude: -121.4944,
    activeRoute: []
  });

  // Admin User lists & System Settings
  const [allUsers, setAllUsers] = useState<User[]>([]);
  const [resetRequests, setResetRequests] = useState<any[]>([]);
  const [systemSettings, setSystemSettings] = useState<any>({});

  // CiviCRM Clients and Phone Extensions State
  const [clients, setClients] = useState<any[]>([]);
  const [clientSearchQuery, setClientSearchQuery] = useState('');
  const [selectedClient, setSelectedClient] = useState<any | null>(null);
  const [showAddClientModal, setShowAddClientModal] = useState(false);
  const [newClientForm, setNewClientForm] = useState({ name: '', phone: '', email: '', dob: '', gender: '', notes: '' });
  const [showIntakeForm, setShowIntakeForm] = useState(false);
  const [intakeForm, setIntakeForm] = useState<any>({ housingStatus: 'Unsheltered', hasIncome: false, veteranStatus: false, needsAssessment: '', primaryNeeds: [], intakeDate: '' });

  const [phoneExtensions, setPhoneExtensions] = useState<any[]>([]);
  const [showAddExtensionModal, setShowAddExtensionModal] = useState(false);
  const [newExtensionForm, setNewExtensionForm] = useState({ extensionNumber: '', assignedUserEmail: '', status: 'active', vapiBotConfig: '' });
  const [editingExtension, setEditingExtension] = useState<any | null>(null);

  // Form Submissions/Inputs
  const [newEmail, setNewEmail] = useState({ recipient: '', subject: '', body: '' });
  const [newHelpReply, setNewHelpReply] = useState<{[key: string]: string}>({});
  const [phoneDial, setPhoneDial] = useState('');
  const [activeCallSim, setActiveCallSim] = useState<{ active: boolean; number: string; direction: 'in' | 'out'; name: string; duration: number } | null>(null);
  const [caseForm, setCaseForm] = useState({ clientName: '', caseType: 'Housing', description: '', status: 'Open', assignedTo: '' });
  const [donationForm, setDonationForm] = useState({ donorName: '', amount: '', paymentMethod: 'Credit Card', campaign: 'Relief Rover', notes: '' });
  const [stopForm, setStopForm] = useState({ crossStreets: '', scheduledTime: '10:00 AM' as any, scheduledDate: '' });
  const [formResponses, setFormResponses] = useState<{[key: string]: any}>({});

  // Loading/Success Indicators
  const [isLoading, setIsLoading] = useState<{[key: string]: boolean}>({});
  const [notif, setNotif] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  // Admin User Creation Form
  const [createUserForm, setCreateUserForm] = useState({
    name: '',
    emailPrefix: '', // user names
    role: 'employee',
    allowedTools: ['email', 'phone', 'rover', 'helpdesk', 'forms']
  });

  // Fetch Data on Login
  useEffect(() => {
    if (currentUser) {
      fetchDashboardData();
      // Auto set default active tab based on allowed tools
      const allowed = currentUser.allowedTools;
      if (allowed.length > 0 && !allowed.includes(activeTab)) {
        setActiveTab(allowed[0]);
      }
    }
  }, [currentUser]);

  // Periodic Call simulation (Simulate live operations feedback)
  useEffect(() => {
    if (!currentUser) return;
    
    const interval = setInterval(() => {
      // 10% chance to simulate incoming helpdesk email or call
      const rng = Math.random();
      if (rng < 0.05) {
        // Mock incoming public help inquiry
        fetch('/api/helpdesk', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            sender: `resident_${Math.floor(Math.random() * 1000)}@sacramentooutreach.net`,
            subject: 'Support near W Street corridor',
            body: 'Hello, there is an immediate need for blankts and water kits under the freeway overpass at W St & 16th St. Thank you for your amazing rover!'
          })
        }).then(() => {
          fetchHelpdesk();
          showNotification('New public help desk inquiry received: help@myusako.org', 'success');
        });
      }
    }, 45000);

    return () => clearInterval(interval);
  }, [currentUser]);

  // Handle call duration tracking
  useEffect(() => {
    let callTimer: any;
    if (activeCallSim && activeCallSim.active) {
      callTimer = setInterval(() => {
        setActiveCallSim(prev => {
          if (prev) {
            return { ...prev, duration: prev.duration + 1 };
          }
          return null;
        });
      }, 1000);
    }
    return () => clearInterval(callTimer);
  }, [activeCallSim]);

  const showNotification = (message: string, type: 'success' | 'error' = 'success') => {
    setNotif({ message, type });
    setTimeout(() => setNotif(null), 5000);
  };

  const fetchDashboardData = async () => {
    setIsLoading(prev => ({ ...prev, global: true }));
    try {
      await Promise.all([
        fetchEmails(),
        fetchHelpdesk(),
        fetchVoicemails(),
        fetchCalls(),
        fetchCases(),
        fetchDonations(),
        fetchSchedules(),
        fetchRoverState(),
        fetchForms(),
        fetchSystemSettings(),
        fetchAllUsers(),
        fetchClients(),
        fetchPhoneExtensions(),
        ...(currentUser?.role === 'admin' ? [fetchResetRequests()] : [])
      ]);
    } catch (err) {
      console.error(err);
    } finally {
      setIsLoading(prev => ({ ...prev, global: false }));
    }
  };

  // Dedicated fetch actions
  const fetchEmails = async () => {
    if (!currentUser) return;
    const res = await fetch(`/api/emails?email=${encodeURIComponent(currentUser.email)}`);
    const data = await res.json();
    setEmails(data);
  };

  const fetchHelpdesk = async () => {
    const res = await fetch('/api/helpdesk');
    const data = await res.json();
    setHelpdeskEmails(data);
  };

  const fetchVoicemails = async () => {
    const res = await fetch('/api/phone/voicemails');
    const data = await res.json();
    setVoicemails(data);
  };

  const fetchCalls = async () => {
    const res = await fetch('/api/phone/calls');
    const data = await res.json();
    setCalls(data);
  };

  const fetchCases = async () => {
    const res = await fetch('/api/civicrm/cases');
    const data = await res.json();
    setCases(data);
  };

  const fetchDonations = async () => {
    const res = await fetch('/api/civicrm/donations');
    const data = await res.json();
    setDonations(data);
  };

  const fetchSchedules = async () => {
    const res = await fetch('/api/rover/schedules');
    const data = await res.json();
    setScheduledStops(data);
  };

  const fetchRoverState = async () => {
    const res = await fetch('/api/rover/state');
    const data = await res.json();
    setRoverState(data);
  };

  const fetchForms = async () => {
    const res = await fetch('/api/forms');
    const data = await res.json();
    setSharedForms(data);
  };

  const fetchSystemSettings = async () => {
    const res = await fetch('/api/admin/settings');
    const data = await res.json();
    setSystemSettings(data);
  };

  const fetchAllUsers = async () => {
    const res = await fetch('/api/users');
    const data = await res.json();
    setAllUsers(data);
  };

  const fetchClients = async () => {
    const res = await fetch('/api/civicrm/clients');
    const data = await res.json();
    setClients(data);
  };

  const fetchPhoneExtensions = async () => {
    const res = await fetch('/api/phone/extensions');
    const data = await res.json();
    setPhoneExtensions(data);
  };

  const fetchResetRequests = async () => {
    // We check emails & requests
    const res = await fetch('/api/emails?email=admin@myusako.org');
    const emailsData = await res.json();
    // Filter out reset requests or fetch them
    const resReq = await fetch('/api/users'); // We can simulate the list from users or database json directly
    // Let's get them from direct admin inbox or mock requests
    const requestsRes = await fetch('/api/emails?email=admin@myusako.org');
    const systemResetAlerts = (await requestsRes.json()).filter((e: any) => e.sender === 'system@myusako.org');
    setResetRequests(systemResetAlerts);
  };

  // Functional Event Handlers
  const handleSendEmail = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!currentUser) return;
    setIsLoading(prev => ({ ...prev, emailSend: true }));

    try {
      const res = await fetch('/api/emails', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sender: currentUser.email,
          recipient: newEmail.recipient,
          subject: newEmail.subject,
          body: newEmail.body
        })
      });
      const data = await res.json();
      if (res.ok && data.success) {
        showNotification('Secure internal email sent successfully!', 'success');
        setNewEmail({ recipient: '', subject: '', body: '' });
        fetchEmails();
      } else {
        showNotification(data.message || 'Error sending email.', 'error');
      }
    } catch (err) {
      showNotification('Failed to connect to the mail server.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, emailSend: false }));
    }
  };

  const handleHelpdeskReply = async (id: string, sender: string) => {
    const replyBody = newHelpReply[id];
    if (!replyBody) return;

    setIsLoading(prev => ({ ...prev, [id]: true }));
    try {
      // 1. Mark as in-progress/resolved on helpdesk
      await fetch(`/api/helpdesk/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: 'Resolved', assignedTo: currentUser?.email })
      });

      // 2. Simulate outgoing email to the resident from help@myusako.org
      await fetch('/api/emails', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sender: 'help@myusako.org',
          recipient: sender,
          subject: `Re: Inquiries & Outreach Support`,
          body: replyBody
        })
      });

      showNotification('Help Desk inquiry resolved and reply dispatched!', 'success');
      setNewHelpReply(prev => ({ ...prev, [id]: '' }));
      fetchHelpdesk();
    } catch (err) {
      showNotification('Error processing helpdesk action.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, [id]: false }));
    }
  };

  // Web Phone Handlers (Twilio & Vapi Interactive Actions)
  const handleMakeCall = async (numberToCall: string) => {
    if (!numberToCall) return;
    setIsLoading(prev => ({ ...prev, call: true }));

    // Let's lookup a potential contact name
    let contactName = 'Sacramento Outreach Line';
    if (numberToCall.includes('916') || numberToCall.includes('888')) {
      contactName = 'Sacramento Emergency Coordinator';
    }

    // Trigger Outbound Vapi Call simulation
    setActiveCallSim({
      active: true,
      number: numberToCall,
      direction: 'out',
      name: contactName,
      duration: 0
    });
    setIsLoading(prev => ({ ...prev, call: false }));
  };

  const handleEndCall = async () => {
    if (!activeCallSim) return;

    const finalDuration = `${Math.floor(activeCallSim.duration / 60)}m ${activeCallSim.duration % 60}s`;
    
    try {
      // Post call log to the database
      await fetch('/api/phone/calls', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          direction: activeCallSim.direction === 'out' ? 'outbound' : 'inbound',
          phoneNumber: activeCallSim.number,
          name: activeCallSim.name,
          duration: finalDuration,
          status: 'completed'
        })
      });

      showNotification(`Call with ${activeCallSim.name} completed and logged.`, 'success');
      setActiveCallSim(null);
      fetchCalls();
    } catch (err) {
      console.error(err);
      setActiveCallSim(null);
    }
  };

  const handleMarkVoicemailRead = async (id: string) => {
    await fetch(`/api/phone/voicemails/${id}/read`, { method: 'PUT' });
    fetchVoicemails();
  };

  // --- CRM Client Handlers ---
  const handleAddClient = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newClientForm.name) {
      showNotification('Client name is required.', 'error');
      return;
    }
    setIsLoading(prev => ({ ...prev, addClient: true }));
    try {
      const res = await fetch('/api/civicrm/clients', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newClientForm)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        showNotification(`Client ${newClientForm.name} added successfully!`, 'success');
        setNewClientForm({ name: '', phone: '', email: '', dob: '', gender: '', notes: '' });
        setShowAddClientModal(false);
        fetchClients();
        setSelectedClient(data.client);
      } else {
        showNotification(data.message || 'Error adding client.', 'error');
      }
    } catch (err) {
      showNotification('Failed to connect to the CRM server.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, addClient: false }));
    }
  };

  const handleSaveIntake = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedClient) return;
    setIsLoading(prev => ({ ...prev, saveIntake: true }));
    try {
      const res = await fetch(`/api/civicrm/clients/${selectedClient.id}/intake`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(intakeForm)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        showNotification('Client intake and needs assessment updated!', 'success');
        setShowIntakeForm(false);
        fetchClients();
        setSelectedClient(data.client);
      } else {
        showNotification(data.message || 'Error saving intake.', 'error');
      }
    } catch (err) {
      showNotification('Failed to save intake data.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, saveIntake: false }));
    }
  };

  const handleLogClientActivity = async (serviceType: string, notes: string = '') => {
    if (!selectedClient) return;
    try {
      const res = await fetch(`/api/civicrm/clients/${selectedClient.id}/activities`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          serviceType,
          loggedBy: currentUser?.email,
          notes
        })
      });
      const data = await res.json();
      if (res.ok && data.success) {
        showNotification(`Service "${serviceType}" documented successfully!`, 'success');
        fetchClients();
        setSelectedClient(data.client);
      } else {
        showNotification(data.message || 'Error logging service activity.', 'error');
      }
    } catch (err) {
      showNotification('Failed to log service activity.', 'error');
    }
  };

  // --- Phone Extension & Queue Handlers ---
  const handleToggleQueue = async () => {
    if (!currentUser) return;
    const isJoining = !currentUser.inCallQueue;
    const url = isJoining ? '/api/phone/queue/join' : '/api/phone/queue/leave';
    try {
      const res = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userEmail: currentUser.email })
      });
      const data = await res.json();
      if (res.ok && data.success) {
        setCurrentUser(prev => prev ? { ...prev, inCallQueue: isJoining } : null);
        showNotification(isJoining ? 'You are now checked-in to the Call Queue!' : 'You have left the Call Queue.', 'success');
        fetchAllUsers(); // refresh list for directory/admin
      } else {
        showNotification('Error updating call queue status.', 'error');
      }
    } catch (err) {
      showNotification('Failed to connect to the telephony queue.', 'error');
    }
  };

  const handleSignIntoExtension = async (extNum: string) => {
    if (!currentUser) return;
    try {
      const res = await fetch('/api/phone/signin', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userEmail: currentUser.email, extensionNumber: extNum })
      });
      const data = await res.json();
      if (res.ok && data.success) {
        setCurrentUser(prev => prev ? { ...prev, extension: extNum } : null);
        showNotification(`Connected to Extension ${extNum}!`, 'success');
        fetchAllUsers(); // refresh directory
        fetchPhoneExtensions(); // refresh extension assignments
      } else {
        showNotification('Error signing into extension.', 'error');
      }
    } catch (err) {
      showNotification('Failed to connect to phone line.', 'error');
    }
  };

  const handleCreateOrUpdateExtension = async (e: React.FormEvent) => {
    e.preventDefault();
    const isEditing = !!editingExtension;
    const url = isEditing ? `/api/phone/extensions/${editingExtension.id}` : '/api/phone/extensions';
    const method = isEditing ? 'PUT' : 'POST';

    try {
      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newExtensionForm)
      });
      const data = await res.json();
      if (res.ok && data.success) {
        showNotification(isEditing ? 'Phone extension updated!' : 'Phone extension created successfully!', 'success');
        setNewExtensionForm({ extensionNumber: '', assignedUserEmail: '', status: 'active', vapiBotConfig: '' });
        setEditingExtension(null);
        setShowAddExtensionModal(false);
        fetchPhoneExtensions();
        fetchAllUsers(); // refresh user assignments
      } else {
        showNotification(data.message || 'Error processing extension setup.', 'error');
      }
    } catch (err) {
      showNotification('Failed to configure extension on server.', 'error');
    }
  };

  const handleDeleteExtension = async (id: string) => {
    if (!confirm('Are you sure you want to delete this phone extension?')) return;
    try {
      const res = await fetch(`/api/phone/extensions/${id}`, { method: 'DELETE' });
      if (res.ok) {
        showNotification('Phone extension deleted successfully.', 'success');
        fetchPhoneExtensions();
        fetchAllUsers();
      }
    } catch (err) {
      showNotification('Error deleting extension.', 'error');
    }
  };

  // CiviCRM Case and Donations Handlers
  const handleCreateCase = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(prev => ({ ...prev, case: true }));

    try {
      const res = await fetch('/api/civicrm/cases', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...caseForm,
          assignedTo: caseForm.assignedTo || currentUser?.email
        })
      });
      if (res.ok) {
        showNotification('CiviCRM client case successfully registered!', 'success');
        setCaseForm({ clientName: '', caseType: 'Housing', description: '', status: 'Open', assignedTo: '' });
        fetchCases();
      }
    } catch (err) {
      showNotification('Error registering case.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, case: false }));
    }
  };

  const handleCreateDonation = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(prev => ({ ...prev, donation: true }));

    try {
      const res = await fetch('/api/civicrm/donations', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(donationForm)
      });
      if (res.ok) {
        showNotification('Contribution record securely stored in CiviCRM ledger!', 'success');
        setDonationForm({ donorName: '', amount: '', paymentMethod: 'Credit Card', campaign: 'Relief Rover', notes: '' });
        fetchDonations();
      }
    } catch (err) {
      showNotification('Error logging contribution.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, donation: false }));
    }
  };

  // Relief Rover GPS and Route Scheduling Handlers
  const handleToggleRoverLive = async () => {
    const nextState = !roverState.isTrackingLive;
    setIsLoading(prev => ({ ...prev, roverLive: true }));

    try {
      const res = await fetch('/api/rover/track', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ isTrackingLive: nextState })
      });
      if (res.ok) {
        const data = await res.json();
        setRoverState(data.roverState);
        showNotification(
          nextState 
            ? 'Relief Rover live tracking active! Transmitting GPS to myusako.org/rover.html' 
            : 'Live GPS transmitting deactivated.', 
          'success'
        );
      }
    } catch (err) {
      showNotification('Failed to toggle tracking.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, roverLive: false }));
    }
  };

  const handleScheduleStop = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(prev => ({ ...prev, stop: true }));

    try {
      const res = await fetch('/api/rover/schedules', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...stopForm,
          requesterName: currentUser?.name || 'Intranet User',
          requesterEmail: currentUser?.email || 'user@myusako.org'
        })
      });

      const data = await res.json();
      if (res.ok && data.success) {
        showNotification('Outreach stop scheduled successfully (Subject to 24hr priority rule)!', 'success');
        setStopForm({ crossStreets: '', scheduledTime: '10:00 AM', scheduledDate: '' });
        fetchSchedules();
      } else {
        showNotification(data.message || 'Error scheduling stop.', 'error');
      }
    } catch (err) {
      showNotification('Connection failed.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, stop: false }));
    }
  };

  // Process tomorrow's routes using AI Scans (Sacramento reports/News + Scheduled stops)
  const handleProcessAIRouting = async () => {
    setIsLoading(prev => ({ ...prev, aiRoute: true }));
    showNotification('Outreach AI is scanning Sacramento news, Nextdoor, police reports, and homeless databases...', 'success');

    try {
      const res = await fetch('/api/rover/process-route', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
      });
      const data = await res.json();
      if (res.ok && data.success) {
        setRoverState(prev => ({
          ...prev,
          activeRoute: data.activeRoute,
          lastRouteProcessedAt: data.lastRouteProcessedAt
        }));
        showNotification('AI auto-scheduling finalized! Routed requests first, then priority hotspots.', 'success');
      } else {
        showNotification(data.message || 'Route generation failed.', 'error');
      }
    } catch (err) {
      showNotification('Failed to reach the outreach AI engine.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, aiRoute: false }));
    }
  };

  // Operational Form Submissions
  const handleFormSubmit = async (form: SharedForm, e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(prev => ({ ...prev, [form.id]: true }));

    const submittedData = formResponses[form.id] || {};
    try {
      const res = await fetch('/api/forms/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          formId: form.id,
          title: form.title,
          submittedBy: currentUser?.name || currentUser?.email,
          formData: submittedData
        })
      });

      if (res.ok) {
        showNotification(`Form "${form.title}" successfully archived and admin notified!`, 'success');
        setFormResponses(prev => ({ ...prev, [form.id]: {} }));
      }
    } catch (err) {
      showNotification('Error processing secure form submission.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, [form.id]: false }));
    }
  };

  // Admin Section Handlers
  const handleCreateUser = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(prev => ({ ...prev, userCreate: true }));

    const fullEmail = `${createUserForm.emailPrefix}@myusako.org`;
    try {
      const res = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: createUserForm.name,
          email: fullEmail,
          role: createUserForm.role,
          allowedTools: createUserForm.allowedTools
        })
      });

      const data = await res.json();
      if (res.ok && data.success) {
        showNotification(`New user ${data.user.email} registered! Password is set same as email.`, 'success');
        setCreateUserForm({
          name: '',
          emailPrefix: '',
          role: 'employee',
          allowedTools: ['email', 'phone', 'rover', 'helpdesk', 'forms']
        });
        fetchAllUsers();
      } else {
        showNotification(data.message || 'Failed to register user.', 'error');
      }
    } catch (err) {
      showNotification('Failed to connect with directories.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, userCreate: false }));
    }
  };

  const handleUpdateUserTools = async (userId: string, tools: string[]) => {
    try {
      const res = await fetch(`/api/users/${userId}/tools`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ allowedTools: tools })
      });
      if (res.ok) {
        showNotification('User tool access permissions updated.', 'success');
        fetchAllUsers();
        // If current user, update local session permissions immediately!
        if (userId === currentUser?.id) {
          setCurrentUser(prev => prev ? { ...prev, allowedTools: tools } : null);
        }
      }
    } catch (err) {
      showNotification('Could not update permissions.', 'error');
    }
  };

  const handleDeleteUser = async (userId: string) => {
    if (!window.confirm('Are you sure you want to revoke this user account completely? This action cannot be undone.')) return;
    
    try {
      const res = await fetch(`/api/users/${userId}`, { method: 'DELETE' });
      const data = await res.json();
      if (res.ok && data.success) {
        showNotification(data.message, 'success');
        fetchAllUsers();
      } else {
        showNotification(data.message || 'Error deleting account.', 'error');
      }
    } catch (err) {
      showNotification('Action failed.', 'error');
    }
  };

  const handleApproveReset = async (requestId: string, userEmail: string) => {
    try {
      const res = await fetch('/api/auth/reset-password', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ requestId, email: userEmail })
      });
      if (res.ok) {
        showNotification(`Successfully approved! ${userEmail} password is reset to default (their email).`, 'success');
        fetchResetRequests();
      }
    } catch (err) {
      showNotification('Error processing approval.', 'error');
    }
  };

  const handleSaveSettings = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(prev => ({ ...prev, settingsSave: true }));

    try {
      const res = await fetch('/api/admin/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(systemSettings)
      });
      if (res.ok) {
        showNotification('Twilio, Vapi, and OpenAI backend parameters updated securely!', 'success');
        fetchSystemSettings();
      }
    } catch (err) {
      showNotification('Error saving system settings.', 'error');
    } finally {
      setIsLoading(prev => ({ ...prev, settingsSave: false }));
    }
  };

  // Render Login screen if not authenticated
  if (!currentUser) {
    return <LoginScreen onLoginSuccess={(user) => setCurrentUser(user)} />;
  }

  // Define tools and categories for permissions
  const toolsMenu = [
    { key: 'email', label: 'Company Email', icon: Mail, desc: 'Firstname.Lastname@myusako.org' },
    { key: 'phone', label: 'Unified Phone', icon: Phone, desc: 'Web Phone, Twilio & Vapi' },
    { key: 'civicrm', label: 'CiviCRM Core', icon: Database, desc: 'Cases & Donation Ledgers' },
    { key: 'rover', label: 'Rover Logistics', icon: Truck, desc: 'AI Routing & Live GPS' },
    { key: 'helpdesk', label: 'Inquiries Box', icon: Compass, desc: 'help@myusako.org inbox' },
    { key: 'forms', label: 'Shared Forms', icon: FileText, desc: 'Outreach & safety logs' }
  ];

  const allowedToolsFiltered = toolsMenu.filter(t => currentUser.allowedTools.includes(t.key) || currentUser.role === 'admin');

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col" id="dashboard-root">
      {/* Intranet Upper Bar */}
      <header className="bg-slate-900 text-white border-b border-slate-800 shadow-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
          <div className="flex items-center gap-4">
            <div className="bg-amber-500 text-slate-950 p-2 rounded-lg font-extrabold tracking-widest text-xs">
              MYUSAKO
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="font-sans font-bold text-base text-white leading-none">Intranet Console</h1>
                <span className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 text-[9px] px-1.5 py-0.5 rounded font-mono font-bold">
                  ● ACTIVE
                </span>
              </div>
              <p className="font-mono text-[10px] text-slate-400 mt-1">Domain: myusako.org | IP: 136.0.111.105</p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            {/* User Badging */}
            <div className="text-right hidden md:block">
              <div className="text-sm font-semibold text-white">{currentUser.name}</div>
              <div className="text-[10px] font-mono text-slate-400 flex items-center gap-1 justify-end">
                {currentUser.role === 'admin' ? (
                  <span className="text-amber-500 font-bold uppercase tracking-wider flex items-center gap-0.5">
                    <Shield className="w-3 h-3" /> System Admin
                  </span>
                ) : (
                  <span className="text-blue-400 font-bold uppercase tracking-wider">Employee Portal</span>
                )}
                <span>•</span>
                <span>{currentUser.email}</span>
              </div>
            </div>

            {/* Logout Action */}
            <button
              onClick={() => setCurrentUser(null)}
              className="bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white p-2.5 rounded-xl border border-slate-700 hover:border-slate-600 transition-all cursor-pointer flex items-center gap-1.5 text-xs font-semibold"
              title="Sign out of Intranet"
            >
              <LogOut className="w-4 h-4" />
              <span className="hidden sm:inline">Logout</span>
            </button>
          </div>
        </div>
      </header>

      {/* Main Container */}
      <main className="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 flex flex-col md:flex-row gap-6">
        {/* Navigation / Control Panel */}
        <div className="w-full md:w-64 shrink-0 space-y-6">
          <div className="bg-white border border-slate-200 rounded-2xl p-4 shadow-sm space-y-4">
            <h3 className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider">
              Outreach Tools & Portals
            </h3>
            <nav className="space-y-1">
              {allowedToolsFiltered.map(tool => {
                const Icon = tool.icon;
                const isActive = activeTab === tool.key;
                return (
                  <button
                    key={tool.key}
                    onClick={() => setActiveTab(tool.key)}
                    className={`w-full flex items-center gap-3 px-3.5 py-3 rounded-xl text-left text-xs font-medium transition-all cursor-pointer ${
                      isActive
                        ? 'bg-amber-500 text-slate-950 font-semibold shadow-sm'
                        : 'text-slate-600 hover:bg-slate-100 hover:text-slate-950'
                    }`}
                  >
                    <Icon className={`w-4.5 h-4.5 ${isActive ? 'text-slate-950' : 'text-slate-400'}`} />
                    <div className="flex-1 min-w-0">
                      <div className="truncate leading-tight">{tool.label}</div>
                      <div className={`text-[9px] truncate mt-0.5 ${isActive ? 'text-slate-900/70 font-medium' : 'text-slate-450'}`}>
                        {tool.desc}
                      </div>
                    </div>
                    {isActive && <ChevronRight className="w-3.5 h-3.5" />}
                  </button>
                );
              })}

              {currentUser.role === 'admin' && (
                <div className="pt-4 mt-4 border-t border-slate-100 space-y-1">
                  <h3 className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider px-3.5 mb-2">
                    System Administration
                  </h3>
                  <button
                    onClick={() => setActiveTab('admin_users')}
                    className={`w-full flex items-center gap-3 px-3.5 py-3 rounded-xl text-left text-xs font-medium transition-all cursor-pointer ${
                      activeTab === 'admin_users'
                        ? 'bg-slate-900 text-white font-semibold'
                        : 'text-slate-600 hover:bg-slate-100'
                    }`}
                  >
                    <UserCheck className="w-4.5 h-4.5" />
                    <div className="flex-1">
                      <div className="leading-tight">Manage Employees</div>
                      <div className="text-[9px] text-slate-400 mt-0.5">Control tools & logins</div>
                    </div>
                  </button>

                  <button
                    onClick={() => setActiveTab('admin_phone_vapi')}
                    className={`w-full flex items-center gap-3 px-3.5 py-3 rounded-xl text-left text-xs font-medium transition-all cursor-pointer ${
                      activeTab === 'admin_phone_vapi'
                        ? 'bg-slate-900 text-white font-semibold'
                        : 'text-slate-600 hover:bg-slate-100'
                    }`}
                  >
                    <Settings className="w-4.5 h-4.5" />
                    <div className="flex-1">
                      <div className="leading-tight">Phone & AI Keys</div>
                      <div className="text-[9px] text-slate-400 mt-0.5">Twilio / Vapi configurations</div>
                    </div>
                  </button>
                </div>
              )}
            </nav>
          </div>

          {/* Quick Informational / Status Card */}
          <div className="bg-slate-900 text-white rounded-2xl p-5 shadow-lg border border-slate-800 space-y-4">
            <h4 className="text-[11px] font-bold text-amber-500 uppercase tracking-wider flex items-center gap-1.5">
              <Truck className="w-4 h-4 text-amber-500" />
              Sacramento Rover State
            </h4>
            
            <div className="space-y-3 text-xs">
              <div className="flex items-center justify-between pb-2 border-b border-slate-800">
                <span className="text-slate-400">Live GPS Status:</span>
                <span className={`font-mono text-[10px] font-semibold px-2 py-0.5 rounded ${
                  roverState.isTrackingLive 
                    ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30' 
                    : 'bg-slate-800 text-slate-400 border border-slate-700'
                }`}>
                  {roverState.isTrackingLive ? 'TRANSMITTING' : 'OFFLINE'}
                </span>
              </div>

              <div className="space-y-1 font-mono text-[11px]">
                <div className="flex justify-between text-slate-400">
                  <span>Current Latitude:</span>
                  <span className="text-white">{roverState.currentLatitude.toFixed(5)}</span>
                </div>
                <div className="flex justify-between text-slate-400">
                  <span>Current Longitude:</span>
                  <span className="text-white">{roverState.currentLongitude.toFixed(5)}</span>
                </div>
              </div>

              {/* Public link info */}
              <div className="bg-slate-850 p-2.5 rounded-lg border border-slate-800 text-[11px] text-slate-400 leading-normal">
                Live dashboard coordinate updates are displayed on public portal:{' '}
                <a 
                  href="https://myusako.org/rover.html" 
                  target="_blank" 
                  rel="noreferrer" 
                  className="text-amber-400 hover:underline font-semibold inline-flex items-center gap-0.5"
                >
                  myusako.org/rover.html <ExternalLink className="w-2.5 h-2.5" />
                </a>
              </div>
            </div>
          </div>
        </div>

        {/* Action Stage / Display Pane */}
        <div className="flex-1 bg-white border border-slate-200 rounded-2xl p-5 sm:p-6 shadow-sm min-h-[500px]">
          {/* Notification Alert System */}
          {notif && (
            <div className={`mb-6 p-4 rounded-xl text-xs flex items-center gap-3 border ${
              notif.type === 'success' 
                ? 'bg-emerald-50 text-emerald-800 border-emerald-200' 
                : 'bg-red-50 text-red-800 border-red-200'
            }`}>
              {notif.type === 'success' ? <CheckCircle className="w-5 h-5 text-emerald-600 shrink-0" /> : <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />}
              <div className="font-medium flex-1">{notif.message}</div>
            </div>
          )}

          {/* TAB 1: Company Email checking */}
          {activeTab === 'email' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between border-b border-slate-100 pb-4">
                <div>
                  <h2 className="font-sans text-lg font-bold text-slate-900 flex items-center gap-2">
                    <Mail className="w-5 h-5 text-amber-500" />
                    Secure Company Email Inbox
                  </h2>
                  <p className="text-xs text-slate-500">Checking mail server for {currentUser.email}</p>
                </div>
                <button 
                  onClick={fetchEmails}
                  className="p-2 hover:bg-slate-100 rounded-lg transition-all"
                  title="Check mail"
                >
                  <RefreshCw className="w-4 h-4 text-slate-500" />
                </button>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Inbox Left Sidebar */}
                <div className="lg:col-span-1 space-y-3">
                  <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">My Mailbox folders</h3>
                  <div className="space-y-1">
                    <button className="w-full text-left text-xs bg-slate-950 text-white font-semibold px-3 py-2.5 rounded-xl flex justify-between items-center">
                      <span>Inbox Messages</span>
                      <span className="bg-amber-500 text-slate-950 text-[10px] px-2 py-0.5 rounded-full font-bold">
                        {emails.filter(e => !e.read && e.recipient.toLowerCase() === currentUser.email.toLowerCase()).length}
                      </span>
                    </button>
                    <button className="w-full text-left text-xs text-slate-600 hover:bg-slate-100 px-3 py-2.5 rounded-xl">
                      Sent Messages
                    </button>
                    <button className="w-full text-left text-xs text-slate-600 hover:bg-slate-100 px-3 py-2.5 rounded-xl">
                      Drafts Archive
                    </button>
                  </div>

                  {/* Mail Compose Box Form */}
                  <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 mt-4">
                    <h4 className="text-[11px] font-bold text-slate-700 uppercase tracking-wider mb-3 flex items-center gap-1">
                      <Send className="w-3 h-3 text-slate-500" /> Secure Quick Compose
                    </h4>
                    <form onSubmit={handleSendEmail} className="space-y-3">
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">To (Recipient Email)</label>
                        <input
                          type="email"
                          required
                          placeholder="Firstname.Lastname@myusako.org"
                          className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none focus:border-amber-500"
                          value={newEmail.recipient}
                          onChange={(e) => setNewEmail(prev => ({ ...prev, recipient: e.target.value }))}
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Subject</label>
                        <input
                          type="text"
                          required
                          placeholder="Outreach coordination log..."
                          className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none focus:border-amber-500"
                          value={newEmail.subject}
                          onChange={(e) => setNewEmail(prev => ({ ...prev, subject: e.target.value }))}
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1">Message Body</label>
                        <textarea
                          required
                          rows={4}
                          placeholder="Type secure operational message here..."
                          className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none focus:border-amber-500"
                          value={newEmail.body}
                          onChange={(e) => setNewEmail(prev => ({ ...prev, body: e.target.value }))}
                        />
                      </div>
                      <button
                        type="submit"
                        disabled={isLoading.emailSend}
                        className="w-full bg-slate-950 hover:bg-slate-800 text-white font-medium text-xs py-2 rounded-lg flex items-center justify-center gap-1 cursor-pointer transition-all disabled:opacity-50"
                      >
                        {isLoading.emailSend ? 'Sending...' : 'Transmit Encrypted Email'}
                      </button>
                    </form>
                  </div>
                </div>

                {/* Inbox Messages Grid */}
                <div className="lg:col-span-2 space-y-3">
                  {emails.length === 0 ? (
                    <div className="border border-dashed border-slate-200 rounded-xl p-8 text-center text-slate-400">
                      <Mail className="w-10 h-10 text-slate-300 mx-auto mb-2" />
                      <p className="text-xs font-semibold">Your inbox folder is empty.</p>
                      <p className="text-[10px] text-slate-400">All secure employee correspondence will show here.</p>
                    </div>
                  ) : (
                    emails.map(email => (
                      <div
                        key={email.id}
                        onClick={async () => {
                          if (!email.read) {
                            await fetch(`/api/emails/${email.id}/read`, { method: 'PUT' });
                            fetchEmails();
                          }
                        }}
                        className={`border rounded-xl p-4 transition-all cursor-pointer ${
                          email.read 
                            ? 'bg-white border-slate-200 hover:bg-slate-50/50' 
                            : 'bg-amber-50/40 border-amber-200 shadow-sm hover:bg-amber-50/60'
                        }`}
                      >
                        <div className="flex items-center justify-between mb-1">
                          <span className="text-xs font-bold text-slate-800 truncate">{email.sender}</span>
                          <span className="text-[10px] font-mono text-slate-400">{new Date(email.timestamp).toLocaleString()}</span>
                        </div>
                        <div className="flex items-center gap-2 mb-2">
                          {!email.read && (
                            <span className="bg-amber-500 text-slate-950 text-[8px] px-1.5 py-0.5 rounded font-extrabold tracking-wider uppercase shrink-0">
                              UNREAD
                            </span>
                          )}
                          <h4 className="text-xs font-semibold text-slate-900 truncate">{email.subject}</h4>
                        </div>
                        <p className="text-xs text-slate-600 whitespace-pre-line leading-relaxed pl-1 border-l-2 border-slate-200">
                          {email.body}
                        </p>
                      </div>
                    ))
                  )}
                </div>
              </div>
            </div>
          )}

          {/* TAB 2: Web Phone & Extensions (Voicemail & Dialer) */}
          {activeTab === 'phone' && (
            <div className="space-y-6">
              <div className="flex flex-col md:flex-row md:items-center justify-between border-b border-slate-200 pb-4 gap-4">
                <div>
                  <h2 className="font-sans text-lg font-bold text-slate-900 flex items-center gap-2">
                    <Phone className="w-5 h-5 text-dark-green" />
                    Unified Corporate VoIP & Outreach Console
                  </h2>
                  <p className="text-xs text-slate-500">Twilio SIP Trunking, Vapi AI automated outreach, and local voicemail transcripts</p>
                </div>
                <div className="flex items-center gap-3">
                  <div className="bg-dark-green-light border border-slate-200 text-xs font-semibold px-3 py-1.5 rounded-lg text-dark-green flex items-center gap-1.5">
                    <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
                    Hotline: 1-888-618-7256
                  </div>
                </div>
              </div>

              {/* Top Extension Assignment and Call Queue Registration Bar */}
              <div className="bg-cream border border-slate-200 rounded-2xl p-5 shadow-sm grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* 1. Extension Status / Login */}
                <div className="space-y-2">
                  <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1.5">
                    <UserCheck className="w-4 h-4 text-slate-400" />
                    Your Extension Identity
                  </h3>
                  <div className="bg-white border border-slate-200 p-3.5 rounded-xl flex items-center justify-between">
                    <div>
                      <div className="text-[10px] text-slate-400 font-bold uppercase">Active extension</div>
                      <div className="font-mono text-base font-bold text-dark-green mt-0.5">
                        {currentUser.extension ? `Ext. ${currentUser.extension}` : 'Not Connected'}
                      </div>
                    </div>
                    <div className="text-right">
                      <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${
                        currentUser.extension ? 'bg-emerald-100 text-emerald-800 border border-emerald-200' : 'bg-red-100 text-red-800 border border-red-200'
                      }`}>
                        {currentUser.extension ? 'Registered' : 'Offline'}
                      </span>
                    </div>
                  </div>
                </div>

                {/* 2. One-Click Sign-in Action */}
                <div className="space-y-2">
                  <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1.5">
                    <Lock className="w-4 h-4 text-slate-400" />
                    One-Click Extension Sign-In
                  </h3>
                  <div className="space-y-1.5">
                    <div className="flex gap-2">
                      <select 
                        className="flex-1 bg-white border border-slate-200 text-xs px-2.5 py-2.5 rounded-xl focus:outline-none"
                        value={currentUser.extension || ''}
                        onChange={(e) => handleSignIntoExtension(e.target.value)}
                      >
                        <option value="">-- Disconnect / Select Ext --</option>
                        {phoneExtensions.map(ext => (
                          <option key={ext.id} value={ext.extensionNumber}>
                            Extension {ext.extensionNumber} {ext.assignedUserEmail ? `(${ext.assignedUserEmail.split('@')[0]})` : '(Vacant)'}
                          </option>
                        ))}
                      </select>
                    </div>
                    <p className="text-[10px] text-slate-400">Instantly route public Twilio calls directly to your web interface.</p>
                  </div>
                </div>

                {/* 3. Call Queue Check-in */}
                <div className="space-y-2">
                  <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1.5">
                    <Users className="w-4 h-4 text-slate-400" />
                    Sacramento Call Queue Routing
                  </h3>
                  <div>
                    <button
                      onClick={handleToggleQueue}
                      className={`w-full py-2.5 px-4 rounded-xl text-xs font-bold tracking-wide transition-all duration-250 cursor-pointer flex items-center justify-center gap-2 border shadow-sm ${
                        currentUser.inCallQueue
                          ? 'bg-red-50 border-red-200 hover:bg-red-100 text-red-700'
                          : 'bg-dark-green border-dark-green text-cream hover:bg-dark-green-hover'
                      }`}
                    >
                      {currentUser.inCallQueue ? (
                        <>
                          <span className="w-2 h-2 rounded-full bg-red-500 animate-ping"></span>
                          Leave Queue (Currently Checked-In)
                        </>
                      ) : (
                        <>
                          <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                          Assign Yourself to Call Queue
                        </>
                      )}
                    </button>
                    <p className="text-[10px] text-slate-400 mt-1.5 text-center">
                      Queue members handle live overflow incoming reports and nextdoor routing requests.
                    </p>
                  </div>
                </div>
              </div>

              {/* Dialer & Active Simulation Panel */}
              <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
                {/* Dialpad Panel */}
                <div className="lg:col-span-5 bg-slate-50 border border-slate-200 rounded-2xl p-5 shadow-sm space-y-4">
                  <div className="bg-white border border-slate-200 p-3 rounded-xl text-center">
                    <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider mb-1">Enter Phone Extension / Number</div>
                    <input
                      type="text"
                      className="w-full text-center font-mono text-lg font-bold text-slate-900 tracking-wider bg-transparent focus:outline-none"
                      value={phoneDial}
                      placeholder="(916) 000-0000"
                      onChange={(e) => setPhoneDial(e.target.value)}
                    />
                  </div>

                  {/* Standard Dialpad buttons */}
                  <div className="grid grid-cols-3 gap-2">
                    {['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map(key => (
                      <button
                        key={key}
                        onClick={() => setPhoneDial(prev => prev + key)}
                        className="bg-white hover:bg-slate-100 border border-slate-200 active:bg-slate-200 text-slate-800 font-bold py-3.5 rounded-xl text-center text-sm font-mono cursor-pointer transition-all"
                      >
                        {key}
                      </button>
                    ))}
                  </div>

                  <div className="flex gap-2">
                    <button
                      onClick={() => setPhoneDial('')}
                      className="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold py-2.5 rounded-xl text-xs transition-all cursor-pointer"
                    >
                      Clear Dial
                    </button>
                    <button
                      onClick={() => handleMakeCall(phoneDial)}
                      disabled={!phoneDial}
                      className="flex-1 bg-emerald-700 hover:bg-emerald-600 text-white font-bold py-2.5 rounded-xl text-xs flex items-center justify-center gap-2 transition-all cursor-pointer disabled:opacity-50"
                    >
                      <Phone className="w-3.5 h-3.5" />
                      Make Call
                    </button>
                  </div>

                  {/* Vapi Automated Tester Quick-dial */}
                  <div className="bg-amber-50 border border-amber-200/50 rounded-xl p-3 text-[11px] space-y-1.5 text-amber-900 leading-normal">
                    <p className="font-semibold flex items-center gap-1 text-amber-850">
                      <Sparkles className="w-3.5 h-3.5" /> Launch Vapi Outreach Bot Simulation
                    </p>
                    <p className="text-slate-650 text-[10px]">
                      Trigger a real-time smart phone check-in sequence using the designated Sac (916) 938-5511 outreach profile.
                    </p>
                    <button
                      onClick={() => {
                        setPhoneDial('(916) 938-5511');
                        handleMakeCall('(916) 938-5511');
                      }}
                      className="bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold px-3 py-1 rounded-lg text-[10px] w-full transition-all text-center"
                    >
                      Simulate Outbound Vapi Core Connection
                    </button>
                  </div>
                </div>

                {/* Call Status & Logs Area */}
                <div className="lg:col-span-7 space-y-6">
                  {/* Call Simulation Widget */}
                  {activeCallSim && (
                    <div className="bg-emerald-800 text-white rounded-2xl p-5 shadow-lg border border-emerald-700 space-y-4 animate-pulse">
                      <div className="flex justify-between items-start">
                        <div className="flex items-center gap-3">
                          <div className="bg-white/20 p-2.5 rounded-full">
                            <Volume2 className="w-5 h-5 text-white" />
                          </div>
                          <div>
                            <div className="text-[10px] font-bold text-emerald-100 uppercase tracking-wider flex items-center gap-1">
                              {activeCallSim.direction === 'out' ? <PhoneOutgoing className="w-3 h-3" /> : <PhoneIncoming className="w-3 h-3 text-white" />}
                              Active Extension Call...
                            </div>
                            <h3 className="font-sans font-bold text-base mt-0.5">{activeCallSim.name}</h3>
                            <p className="font-mono text-xs text-emerald-100 mt-0.5">{activeCallSim.number}</p>
                          </div>
                        </div>
                        <div className="bg-emerald-950/60 font-mono text-xs px-3 py-1 rounded-full text-emerald-100">
                          {Math.floor(activeCallSim.duration / 60)}:{(activeCallSim.duration % 60).toString().padStart(2, '0')}
                        </div>
                      </div>

                      <div className="bg-emerald-900/50 p-3 rounded-xl text-[11px] leading-relaxed text-emerald-50">
                        <span className="font-bold uppercase tracking-wider block text-[10px] text-emerald-200 mb-1">Live Vapi Transcription:</span>
                        "Hello, this is the MyUsako Sacramento Rover assistant scheduling desk. We are coordinating stops and would love to confirm if you require hygiene kit deliveries or case counselor assistance tomorrow..."
                      </div>

                      <button
                        onClick={handleEndCall}
                        className="bg-red-600 hover:bg-red-500 text-white font-bold py-2 rounded-xl text-xs w-full transition-all cursor-pointer text-center flex items-center justify-center gap-1"
                      >
                        Disconnect Call / Save Log
                      </button>
                    </div>
                  )}

                  {/* Voicemails Section with simulator */}
                  <div className="space-y-3 bg-white p-5 border border-slate-200 rounded-2xl shadow-sm">
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between pb-3 border-b border-slate-100 gap-2">
                      <div>
                        <h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider">Unresolved Voicemail Messages</h3>
                        <p className="text-[10px] text-slate-400">Voicemails are auto-transcribed and emailed to the assigned user.</p>
                      </div>
                      {/* Voicemail simulator trigger */}
                      <button
                        onClick={async () => {
                          const mockVoicemails = [
                            { callerName: 'Theresa Jenkins', callerNumber: '(916) 401-2299', duration: '0m 45s', transcript: 'Hi, I would like to schedule the Relief Rover to stop by W Street and 12th on Tuesday afternoon at 2 PM. We have a small encampment with pets that could use medical supplies. Thank you!' },
                            { callerName: 'Richard Brooks', callerNumber: '(916) 773-8821', duration: '1m 12s', transcript: 'Hello, this is Richard from the Sutter Health outreach team. We want to coordinate a joint dropoff next Friday. Please call my extension back at your earliest convenience.' },
                            { callerName: 'Anonymous Resident', callerNumber: '(916) 991-0043', duration: '0m 30s', transcript: 'Yes, there is trash accumulation and several people sleeping unsheltered on X Street underpass. Can the rover check-in with hygiene bags?' }
                          ];
                          const selected = mockVoicemails[Math.floor(Math.random() * mockVoicemails.length)];
                          try {
                            const res = await fetch('/api/phone/voicemails', {
                              method: 'POST',
                              headers: { 'Content-Type': 'application/json' },
                              body: JSON.stringify({
                                callerName: selected.callerName,
                                callerNumber: selected.callerNumber,
                                duration: selected.duration,
                                transcript: selected.transcript,
                                extensionNumber: currentUser.extension || '101'
                              })
                            });
                            if (res.ok) {
                              const d = await res.json();
                              showNotification(`Voicemail simulated! AI Transcript emailed to: ${d.emailSentTo}`, 'success');
                              fetchVoicemails();
                              fetchEmails(); // update email inbox list to show voicemail email!
                            }
                          } catch (err) {
                            showNotification('Failed to trigger voicemail simulator.', 'error');
                          }
                        }}
                        className="bg-amber-500 hover:bg-amber-600 text-slate-950 text-[10px] font-bold px-2.5 py-1.5 rounded-lg transition-all cursor-pointer text-center"
                      >
                        Simulate Call & Voicemail
                      </button>
                    </div>

                    {voicemails.length === 0 ? (
                      <p className="text-xs text-slate-400 border border-dashed border-slate-200 p-6 rounded-xl text-center">
                        No voicemail messages on file for this extension.
                      </p>
                    ) : (
                      <div className="space-y-3 max-h-[300px] overflow-y-auto pr-1">
                        {voicemails.map(vm => (
                          <div
                            key={vm.id}
                            className={`border rounded-xl p-4 transition-all ${
                              vm.read ? 'bg-slate-50 border-slate-200' : 'bg-amber-50/20 border-amber-200 shadow-sm'
                            }`}
                          >
                            <div className="flex justify-between items-start mb-2">
                              <div>
                                <h4 className="text-xs font-bold text-slate-800 flex items-center gap-1.5">
                                  {vm.callerName}
                                  <span className="text-[9px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded font-mono font-bold">Ext. {vm.extensionNumber || '101'}</span>
                                </h4>
                                <p className="text-[10px] font-mono text-slate-500">{vm.callerNumber}</p>
                              </div>
                              <span className="text-[10px] font-mono text-slate-400">{new Date(vm.timestamp).toLocaleString()}</span>
                            </div>
                            
                            <p className="text-xs text-slate-600 bg-white p-2.5 rounded-lg border border-slate-100 leading-relaxed italic mb-3">
                              "{vm.transcript}"
                            </p>

                            <div className="flex items-center justify-between">
                              <span className="text-[10px] text-slate-400 font-semibold flex items-center gap-1">
                                <span className="inline-block w-1.5 h-1.5 rounded-full bg-slate-300"></span>
                                Duration: {vm.duration}
                              </span>
                              {!vm.read && (
                                <button
                                  onClick={() => handleMarkVoicemailRead(vm.id)}
                                  className="bg-slate-900 hover:bg-slate-800 text-white font-bold px-3 py-1 rounded-lg text-[10px] transition-all cursor-pointer"
                                >
                                  Mark as Read / Archive
                                </button>
                              )}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

                  {/* Company Directory with Call Queue status */}
                  <div className="bg-white p-5 border border-slate-200 rounded-2xl shadow-sm space-y-4">
                    <div>
                      <h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider">MyUsako Company Employee Directory</h3>
                      <p className="text-[10px] text-slate-400">Real-time extension mapping and Sacramento active Call Queue presence</p>
                    </div>

                    <div className="border border-slate-200 rounded-xl overflow-hidden">
                      <div className="bg-slate-50 grid grid-cols-12 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-wider border-b border-slate-200 font-mono">
                        <div className="col-span-5">Employee / Email</div>
                        <div className="col-span-3">Extension</div>
                        <div className="col-span-4 text-right">Call Queue Status</div>
                      </div>
                      <div className="divide-y divide-slate-100 max-h-[220px] overflow-y-auto">
                        {allUsers.map(u => (
                          <div key={u.id || u.email} className="grid grid-cols-12 px-3 py-2.5 items-center text-xs hover:bg-slate-50">
                            <div className="col-span-5 truncate pr-1">
                              <div className="font-bold text-slate-800">{u.name}</div>
                              <div className="text-[10px] text-slate-500 truncate">{u.email}</div>
                            </div>
                            <div className="col-span-3 font-mono font-bold text-slate-700">
                              {u.extension ? (
                                <span className="bg-emerald-50 text-emerald-800 border border-emerald-100 px-1.5 py-0.5 rounded text-[10px] font-bold">
                                  ☎ {u.extension}
                                </span>
                              ) : (
                                <span className="text-slate-400 text-[10px]">--</span>
                              )}
                            </div>
                            <div className="col-span-4 text-right">
                              {u.inCallQueue ? (
                                <span className="inline-flex items-center gap-1 bg-emerald-500/10 text-emerald-700 border border-emerald-500/20 text-[9px] px-2 py-0.5 rounded-full font-bold">
                                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                                  Active in Queue
                                </span>
                              ) : (
                                <span className="inline-flex items-center gap-1 bg-slate-100 text-slate-400 text-[9px] px-2 py-0.5 rounded-full">
                                  Offline
                                </span>
                              )}
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>

                  {/* Call History */}
                  <div className="space-y-3">
                    <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider">Recent Call History logs</h3>
                    <div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100 max-h-[150px] overflow-y-auto">
                      {calls.map(call => (
                        <div key={call.id} className="p-3 flex justify-between items-center text-xs">
                          <div className="flex items-center gap-2.5">
                            {call.direction === 'inbound' ? (
                              <PhoneIncoming className="w-4 h-4 text-emerald-600 shrink-0" />
                            ) : (
                              <PhoneOutgoing className="w-4 h-4 text-amber-500 shrink-0" />
                            )}
                            <div>
                              <div className="font-bold text-slate-800">{call.name}</div>
                              <div className="font-mono text-[10px] text-slate-500">{call.phoneNumber}</div>
                            </div>
                          </div>
                          <div className="text-right">
                            <div className="font-mono text-[10px] text-slate-400">{new Date(call.timestamp).toLocaleString()}</div>
                            <div className="font-mono text-[10px] text-slate-500 font-bold mt-0.5">Duration: {call.duration}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TAB 3: CiviCRM (Client Cases & Donations ledgers) */}
          {activeTab === 'civicrm' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between border-b border-slate-200 pb-4">
                <div>
                  <h2 className="font-sans text-lg font-bold text-slate-900 flex items-center gap-2">
                    <Database className="w-5 h-5 text-dark-green" />
                    CiviCRM Enterprise Client Management System
                  </h2>
                  <p className="text-xs text-slate-500">Case files, supportive logs, rapid intake, and real-time donations ledgers</p>
                </div>
                <div className="bg-dark-green-light border border-slate-200 text-[10px] font-mono px-3 py-1 rounded-lg text-dark-green">
                  Secured CiviCRM API Gateway
                </div>
              </div>

              {/* Client Directory, Intake, and Quick Actions Console */}
              <div className="bg-white border border-slate-200 rounded-2xl shadow-sm p-6 space-y-6">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-100 pb-4">
                  <div>
                    <h3 className="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
                      <Users className="w-4 h-4 text-dark-green" />
                      Sacramento Client Intake & Services Station
                    </h3>
                    <p className="text-xs text-slate-500">Search existing client records, register new contacts, conduct intake and Needs Assessments, and log rapid services.</p>
                  </div>
                  <button
                    onClick={() => {
                      setShowAddClientModal(!showAddClientModal);
                      setSelectedClient(null);
                    }}
                    className="bg-dark-green hover:bg-dark-green-hover text-cream text-xs font-bold px-4 py-2 rounded-xl transition-all flex items-center gap-1.5 cursor-pointer self-start"
                  >
                    <Plus className="w-4 h-4" />
                    Register New Client
                  </button>
                </div>

                {/* Register New Client Collapsible Card */}
                {showAddClientModal && (
                  <div className="bg-cream border border-slate-200 p-5 rounded-2xl space-y-4 animate-fadeIn">
                    <h4 className="text-xs font-bold text-dark-green uppercase tracking-wider">New Client Intake Profile</h4>
                    <form onSubmit={handleAddClient} className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Full Name *</label>
                        <input
                          type="text"
                          required
                          placeholder="e.g. John Carter"
                          className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                          value={newClientForm.name}
                          onChange={(e) => setNewClientForm(prev => ({ ...prev, name: e.target.value }))}
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Phone Number (Optional)</label>
                        <input
                          type="text"
                          placeholder="e.g. (916) 555-0199"
                          className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                          value={newClientForm.phone}
                          onChange={(e) => setNewClientForm(prev => ({ ...prev, phone: e.target.value }))}
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Email Address (Optional)</label>
                        <input
                          type="email"
                          placeholder="e.g. j.carter@gmail.com"
                          className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                          value={newClientForm.email}
                          onChange={(e) => setNewClientForm(prev => ({ ...prev, email: e.target.value }))}
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Date of Birth (Optional)</label>
                        <input
                          type="date"
                          className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                          value={newClientForm.dob}
                          onChange={(e) => setNewClientForm(prev => ({ ...prev, dob: e.target.value }))}
                        />
                      </div>
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Gender Identity (Optional)</label>
                        <select
                          className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                          value={newClientForm.gender}
                          onChange={(e) => setNewClientForm(prev => ({ ...prev, gender: e.target.value }))}
                        >
                          <option value="">-- Select --</option>
                          <option value="Male">Male</option>
                          <option value="Female">Female</option>
                          <option value="Non-binary">Non-Binary</option>
                          <option value="Transgender">Transgender</option>
                          <option value="Prefer not to say">Prefer not to say</option>
                        </select>
                      </div>
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Profile Summary & Initial Notes</label>
                        <input
                          type="text"
                          placeholder="Brief description of outreach stop encounter"
                          className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                          value={newClientForm.notes}
                          onChange={(e) => setNewClientForm(prev => ({ ...prev, notes: e.target.value }))}
                        />
                      </div>
                      <div className="md:col-span-3 flex justify-end gap-2 pt-2">
                        <button
                          type="button"
                          onClick={() => setShowAddClientModal(false)}
                          className="px-4 py-2 text-xs font-semibold text-slate-600 hover:text-slate-800 transition-all cursor-pointer"
                        >
                          Cancel
                        </button>
                        <button
                          type="submit"
                          disabled={isLoading.addClient}
                          className="bg-dark-green hover:bg-dark-green-hover text-cream px-5 py-2 rounded-xl text-xs font-bold transition-all cursor-pointer disabled:opacity-50"
                        >
                          {isLoading.addClient ? 'Saving...' : 'Register Client Record'}
                        </button>
                      </div>
                    </form>
                  </div>
                )}

                {/* Search Bar & Client Selection Grid */}
                <div className="space-y-3">
                  <div className="relative">
                    <Search className="absolute left-3.5 top-3 w-4 h-4 text-slate-400" />
                    <input
                      type="text"
                      className="w-full bg-slate-50 border border-slate-200 rounded-xl pl-10 pr-4 py-2.5 text-xs focus:outline-none focus:bg-white focus:ring-1 focus:ring-dark-green transition-all"
                      placeholder="Search registered Sacramento clients by name, contact phone or email..."
                      value={clientSearchQuery}
                      onChange={(e) => setClientSearchQuery(e.target.value)}
                    />
                  </div>

                  {/* Search Results Mini-Grid */}
                  <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3">
                    {clients
                      .filter(c => !clientSearchQuery || c.name.toLowerCase().includes(clientSearchQuery.toLowerCase()))
                      .map(c => {
                        const isSelected = selectedClient?.id === c.id;
                        const hasIntake = !!c.intake;
                        return (
                          <button
                            key={c.id}
                            onClick={() => {
                              setSelectedClient(c);
                              setShowIntakeForm(false);
                              if (c.intake) {
                                setIntakeForm({ ...c.intake });
                              } else {
                                setIntakeForm({ housingStatus: 'Unsheltered', hasIncome: false, veteranStatus: false, needsAssessment: '', primaryNeeds: [], intakeDate: '' });
                              }
                            }}
                            className={`p-3 text-left border rounded-xl transition-all cursor-pointer ${
                              isSelected
                                ? 'bg-dark-green border-dark-green text-cream shadow-md animate-scaleUp'
                                : 'bg-white hover:bg-slate-50 border-slate-200 text-slate-800'
                            }`}
                          >
                            <div className="font-bold text-xs truncate">{c.name}</div>
                            <div className={`text-[9px] mt-1 font-semibold flex items-center gap-1 ${
                              isSelected ? 'text-cream/80' : 'text-slate-400'
                            }`}>
                              <span className={`w-1.5 h-1.5 rounded-full ${hasIntake ? 'bg-emerald-500' : 'bg-amber-400'}`}></span>
                              {hasIntake ? 'Intake Done' : 'Needs Intake'}
                            </div>
                          </button>
                        );
                      })}
                  </div>
                </div>

                {/* Selected Client Workspace */}
                {selectedClient ? (
                  <div className="border border-slate-200 rounded-2xl p-5 bg-slate-50 space-y-6 animate-fadeIn">
                    {/* Workspace Header with Client profile details */}
                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 pb-4 border-b border-slate-200">
                      <div>
                        <div className="text-[10px] text-slate-400 font-bold uppercase">Active Case Profile Workspace</div>
                        <h4 className="font-sans text-base font-bold text-slate-900 mt-0.5">{selectedClient.name}</h4>
                        <div className="flex flex-wrap gap-x-4 gap-y-1 text-slate-500 text-[11px] font-mono mt-1">
                          {selectedClient.phone && <span>📞 {selectedClient.phone}</span>}
                          {selectedClient.email && <span>✉ {selectedClient.email}</span>}
                          {selectedClient.dob && <span>🎂 DOB: {selectedClient.dob}</span>}
                          {selectedClient.gender && <span>👤 Gender: {selectedClient.gender}</span>}
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <button
                          onClick={() => {
                            setShowIntakeForm(!showIntakeForm);
                          }}
                          className="bg-slate-200 hover:bg-slate-300 text-slate-800 font-semibold px-4 py-2 rounded-xl text-xs transition-all cursor-pointer"
                        >
                          {selectedClient.intake ? 'Edit Needs Assessment' : 'Conduct Needs Assessment'}
                        </button>
                        <button
                          onClick={() => {
                            setSelectedClient(null);
                          }}
                          className="text-slate-400 hover:text-slate-600 font-bold p-2 text-xs cursor-pointer"
                        >
                          Close Profile
                        </button>
                      </div>
                    </div>

                    {/* Needs Assessment and Intake Form Toggle */}
                    {showIntakeForm ? (
                      <form onSubmit={handleSaveIntake} className="bg-white border border-slate-200 p-5 rounded-xl space-y-4 shadow-xs">
                        <h5 className="text-xs font-bold text-dark-green uppercase tracking-wider border-b pb-2">
                          Needs Assessment & Supportive Services Intake Process
                        </h5>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                          <div>
                            <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Housing Status</label>
                            <select
                              className="w-full bg-slate-50 border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                              value={intakeForm.housingStatus}
                              onChange={(e) => setIntakeForm(prev => ({ ...prev, housingStatus: e.target.value }))}
                            >
                              <option value="Unsheltered">Unsheltered (Street/Camp/Car)</option>
                              <option value="Emergency Shelter">Emergency Shelter</option>
                              <option value="Transitional Housing">Transitional Housing</option>
                              <option value="Permanently Housed">Permanently Housed</option>
                              <option value="Other">Other</option>
                            </select>
                          </div>
                          <div>
                            <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Income Status</label>
                            <div className="flex gap-4 pt-2.5">
                              <label className="flex items-center gap-1.5 text-xs text-slate-700 font-medium cursor-pointer">
                                <input
                                  type="checkbox"
                                  className="rounded border-slate-300 text-dark-green focus:ring-dark-green cursor-pointer"
                                  checked={intakeForm.hasIncome}
                                  onChange={(e) => setIntakeForm(prev => ({ ...prev, hasIncome: e.target.checked }))}
                                />
                                Has Regular Income
                              </label>
                              <label className="flex items-center gap-1.5 text-xs text-slate-700 font-medium cursor-pointer">
                                <input
                                  type="checkbox"
                                  className="rounded border-slate-300 text-dark-green focus:ring-dark-green cursor-pointer"
                                  checked={intakeForm.veteranStatus}
                                  onChange={(e) => setIntakeForm(prev => ({ ...prev, veteranStatus: e.target.checked }))}
                                />
                                Military Veteran
                              </label>
                            </div>
                          </div>
                          <div>
                            <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Primary Urgent Needs (Select multiple)</label>
                            <div className="grid grid-cols-2 gap-x-2 gap-y-1 text-xs">
                              {['Housing', 'Food assistance', 'Substance therapy', 'Pet support', 'Job readiness', 'Legal support'].map(need => {
                                const isChecked = intakeForm.primaryNeeds?.includes(need);
                                return (
                                  <label key={need} className="flex items-center gap-1.5 text-slate-650 cursor-pointer">
                                    <input
                                      type="checkbox"
                                      className="rounded border-slate-300 text-dark-green cursor-pointer"
                                      checked={isChecked}
                                      onChange={(e) => {
                                        const newNeeds = e.target.checked
                                          ? [...(intakeForm.primaryNeeds || []), need]
                                          : (intakeForm.primaryNeeds || []).filter(n => n !== need);
                                        setIntakeForm(prev => ({ ...prev, primaryNeeds: newNeeds }));
                                      }}
                                    />
                                    {need}
                                  </label>
                                );
                              })}
                            </div>
                          </div>
                        </div>

                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Needs Assessment Notes & Multi-agency recommendations</label>
                          <textarea
                            rows={3}
                            className="w-full bg-slate-50 border border-slate-200 text-xs p-3 rounded-xl focus:outline-none"
                            placeholder="Detail client safety, physical limitations, mental healthcare referral suggestions, or general requirements..."
                            value={intakeForm.needsAssessment}
                            onChange={(e) => setIntakeForm(prev => ({ ...prev, needsAssessment: e.target.value }))}
                          />
                        </div>

                        <div className="flex justify-end gap-2">
                          <button
                            type="button"
                            onClick={() => setShowIntakeForm(false)}
                            className="px-4 py-2 text-xs font-semibold text-slate-600 hover:text-slate-800 cursor-pointer"
                          >
                            Cancel
                          </button>
                          <button
                            type="submit"
                            disabled={isLoading.saveIntake}
                            className="bg-dark-green hover:bg-dark-green-hover text-cream px-5 py-2 rounded-xl text-xs font-bold transition-all cursor-pointer"
                          >
                            {isLoading.saveIntake ? 'Saving...' : 'Save Assessment & Core Intake'}
                          </button>
                        </div>
                      </form>
                    ) : selectedClient.intake ? (
                      <div className="bg-white border border-slate-200 p-4 rounded-xl grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div className="border-r border-slate-100 pr-4">
                          <div className="text-[10px] text-slate-400 font-bold uppercase">Housing Status</div>
                          <div className="text-xs font-bold text-slate-800 mt-1">{selectedClient.intake.housingStatus}</div>
                        </div>
                        <div className="border-r border-slate-100 pr-4">
                          <div className="text-[10px] text-slate-400 font-bold uppercase">Special Demographics</div>
                          <div className="space-y-1 mt-1 text-xs font-semibold">
                            <div>Income: <span className="text-slate-600">{selectedClient.intake.hasIncome ? 'Yes' : 'No'}</span></div>
                            <div>Veteran: <span className="text-slate-600">{selectedClient.intake.veteranStatus ? 'Yes' : 'No'}</span></div>
                          </div>
                        </div>
                        <div className="border-r border-slate-100 pr-4">
                          <div className="text-[10px] text-slate-400 font-bold uppercase">Primary Urgent Needs</div>
                          <div className="flex flex-wrap gap-1 mt-1.5">
                            {selectedClient.intake.primaryNeeds?.map(need => (
                              <span key={need} className="bg-slate-100 text-slate-700 text-[9px] font-bold px-2 py-0.5 rounded-md border">
                                {need}
                              </span>
                            )) || <span className="text-slate-400 text-xs">None declared</span>}
                          </div>
                        </div>
                        <div>
                          <div className="text-[10px] text-slate-400 font-bold uppercase">Needs Assessment</div>
                          <p className="text-xs text-slate-600 mt-1 line-clamp-3 italic leading-relaxed">
                            "{selectedClient.intake.needsAssessment || 'No assessment summary notes registered yet.'}"
                          </p>
                        </div>
                      </div>
                    ) : (
                      <div className="bg-amber-50/50 border border-dashed border-amber-200 p-5 rounded-xl text-center space-y-2">
                        <p className="text-xs text-amber-800 font-medium">No official Needs Assessment or intake protocol completed on this client record yet.</p>
                        <button
                          onClick={() => setShowIntakeForm(true)}
                          className="bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold text-xs px-4 py-1.5 rounded-lg transition-all cursor-pointer"
                        >
                          Conduct Needs Assessment Now
                        </button>
                      </div>
                    )}

                    {/* Quick Services Logging Station (11 core services) */}
                    <div className="space-y-3">
                      <div>
                        <h5 className="text-xs font-bold text-slate-700 uppercase tracking-wider">Quick Services Dispatch Console</h5>
                        <p className="text-[10px] text-slate-400">Click a button below to instantly document services delivered on-site.</p>
                      </div>

                      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
                        {[
                          { label: 'Bicycle Repair Station', service: 'Bicycle repair station', color: 'hover:bg-slate-100 text-slate-800 border-slate-200 hover:border-slate-300', icon: Wrench },
                          { label: 'Secured Pet Cages', service: 'Secured pet cages', color: 'hover:bg-red-50 text-red-800 border-red-100 hover:border-red-200', icon: Shield },
                          { label: 'Cell Phone Charging', service: 'Cell phone charging station', color: 'hover:bg-amber-50 text-amber-800 border-amber-100 hover:border-amber-200', icon: BatteryCharging },
                          { label: 'Computer & Print', service: 'Two computer and print stations', color: 'hover:bg-indigo-50 text-indigo-800 border-indigo-100 hover:border-indigo-200', icon: Printer },
                          { label: 'Gov Phone Assist', service: 'Government phone-assistance signup', color: 'hover:bg-teal-50 text-teal-800 border-teal-100 hover:border-teal-200', icon: Phone },
                          { label: 'SNAP / GA App Help', service: 'SNAP, GA, and CalWORKs applications', color: 'hover:bg-blue-50 text-blue-800 border-blue-100 hover:border-blue-200', icon: FileText },
                          { label: 'Harm-Reduction', service: 'Harm-reduction services', color: 'hover:bg-orange-50 text-orange-800 border-orange-100 hover:border-orange-200', icon: HeartHandshake },
                          { label: 'Restroom Access', service: 'Restroom access', color: 'hover:bg-emerald-50 text-emerald-800 border-emerald-100 hover:border-emerald-200', icon: Bath },
                          { label: 'Paper Bag Lunch & Drink', service: 'Paper bag lunch and drink', color: 'hover:bg-rose-50 text-rose-800 border-rose-100 hover:border-rose-200', icon: ShoppingBag },
                          { label: 'TV & Seating Area', service: 'TV and seating area', color: 'hover:bg-violet-50 text-violet-800 border-violet-100 hover:border-violet-200', icon: Tv },
                          { label: 'Free Wi-Fi Access', service: 'Free Wi-Fi', color: 'hover:bg-sky-50 text-sky-800 border-sky-100 hover:border-sky-200', icon: Wifi }
                        ].map((btn) => {
                          const IconComp = btn.icon;
                          return (
                            <button
                              key={btn.label}
                              type="button"
                              onClick={() => {
                                handleLogClientActivity(btn.service, `Service delivered at Sacramento stop by ${currentUser?.name || currentUser?.email}`);
                              }}
                              className={`p-3 border rounded-xl flex flex-col items-center justify-center text-center gap-1.5 cursor-pointer bg-white transition-all shadow-xs hover:shadow-sm ${btn.color}`}
                            >
                              <IconComp className="w-5 h-5 shrink-0" />
                              <div className="font-bold text-[10px] leading-tight">{btn.label}</div>
                            </button>
                          );
                        })}
                      </div>
                    </div>

                    {/* Client Activity History timeline */}
                    <div className="space-y-3">
                      <h5 className="text-xs font-bold text-slate-700 uppercase tracking-wider">Historical Services delivered to {selectedClient.name}</h5>
                      <div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100 max-h-[160px] overflow-y-auto pr-1">
                        {!selectedClient.activities || selectedClient.activities.length === 0 ? (
                          <div className="p-4 text-center text-slate-400 text-xs">No support activities logged for this client yet. Use the Quick Action buttons above.</div>
                        ) : (
                          selectedClient.activities.map(act => (
                            <div key={act.id} className="p-3 flex justify-between items-center text-xs hover:bg-slate-50">
                              <div className="flex items-center gap-2">
                                <CheckCircle2 className="w-4 h-4 text-emerald-600" />
                                <div>
                                  <div className="font-bold text-slate-800">{act.serviceType}</div>
                                  <div className="text-[10px] text-slate-500">Logged by: {act.loggedBy}</div>
                                </div>
                              </div>
                              <div className="font-mono text-[10px] text-slate-400">
                                {new Date(act.timestamp).toLocaleString()}
                              </div>
                            </div>
                          ))
                        )}
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="bg-slate-50 border border-dashed border-slate-200 p-8 rounded-2xl text-center text-slate-400 text-xs font-semibold">
                    Please select a client record from the list above or register a new client profile to conduct intakes and log services.
                  </div>
                )}
              </div>

              {/* Case management and donations splits */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Cases Core */}
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider">Active Client Cases & Logs</h3>
                    <div className="text-[10px] text-slate-400 font-bold">Total: {cases.length}</div>
                  </div>

                  {/* Register Case Form */}
                  <div className="bg-slate-50 border border-slate-200 p-4 rounded-xl space-y-3">
                    <h4 className="text-[11px] font-bold text-slate-700 uppercase tracking-wider">Register New Client Case</h4>
                    <form onSubmit={handleCreateCase} className="space-y-3">
                      <div className="grid grid-cols-2 gap-3">
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Client Name</label>
                          <input
                            type="text"
                            required
                            placeholder="John Carter"
                            className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            value={caseForm.clientName}
                            onChange={(e) => setCaseForm(prev => ({ ...prev, clientName: e.target.value }))}
                          />
                        </div>
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Case Type</label>
                          <select
                            className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            value={caseForm.caseType}
                            onChange={(e) => setCaseForm(prev => ({ ...prev, caseType: e.target.value }))}
                          >
                            <option value="Housing">Housing</option>
                            <option value="Medical">Medical</option>
                            <option value="Food Assistance">Food Assistance</option>
                            <option value="Job Placement">Job Placement</option>
                            <option value="Mental Health">Mental Health</option>
                          </select>
                        </div>
                      </div>

                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Assigned To (Staff Email)</label>
                        <input
                          type="email"
                          placeholder={currentUser.email}
                          className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                          value={caseForm.assignedTo}
                          onChange={(e) => setCaseForm(prev => ({ ...prev, assignedTo: e.target.value }))}
                        />
                      </div>

                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Case Status Description & Notes</label>
                        <textarea
                          rows={3}
                          required
                          placeholder="Client currently residing in temporary campsite, needing housing fast track..."
                          className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                          value={caseForm.description}
                          onChange={(e) => setCaseForm(prev => ({ ...prev, description: e.target.value }))}
                        />
                      </div>

                      <button
                        type="submit"
                        disabled={isLoading.case}
                        className="w-full bg-slate-900 hover:bg-slate-800 text-white font-bold py-2 rounded-lg text-xs transition-all cursor-pointer disabled:opacity-50"
                      >
                        {isLoading.case ? 'Registering...' : 'Add Case to CiviCRM'}
                      </button>
                    </form>
                  </div>

                  {/* List of Cases */}
                  <div className="space-y-2.5 max-h-[400px] overflow-y-auto">
                    {cases.map(c => (
                      <div key={c.id} className="bg-white border border-slate-200 rounded-xl p-4 space-y-2">
                        <div className="flex justify-between items-start">
                          <div>
                            <h4 className="text-xs font-bold text-slate-900">{c.clientName}</h4>
                            <span className="text-[10px] font-bold text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded border border-amber-200 mt-1 inline-block">
                              Type: {c.caseType}
                            </span>
                          </div>
                          <span className={`text-[10px] font-bold px-2 py-0.5 rounded ${
                            c.status === 'Open' ? 'bg-blue-50 text-blue-700 border border-blue-200' :
                            c.status === 'In Progress' ? 'bg-amber-50 text-amber-700 border border-amber-200' :
                            'bg-slate-100 text-slate-700'
                          }`}>
                            {c.status}
                          </span>
                        </div>
                        <p className="text-xs text-slate-600 leading-normal bg-slate-50 p-2.5 rounded border border-slate-100">
                          {c.description}
                        </p>
                        <div className="flex justify-between items-center text-[10px] text-slate-400 font-mono">
                          <span>Assigned to: {c.assignedTo}</span>
                          <span>Updated: {new Date(c.lastUpdated).toLocaleString()}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Donations Core */}
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider">Donations & Contribution Ledger</h3>
                    <div className="text-[10px] font-bold text-slate-900">
                      Ledger Volume: ${donations.reduce((acc, curr) => acc + curr.amount, 0).toLocaleString()}
                    </div>
                  </div>

                  {/* Log Donation Form */}
                  <div className="bg-slate-50 border border-slate-200 p-4 rounded-xl space-y-3">
                    <h4 className="text-[11px] font-bold text-slate-700 uppercase tracking-wider">Log Received Contribution</h4>
                    <form onSubmit={handleCreateDonation} className="space-y-3">
                      <div className="grid grid-cols-2 gap-3">
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Donor Name / Group</label>
                          <input
                            type="text"
                            required
                            placeholder="Elena Gilbert"
                            className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            value={donationForm.donorName}
                            onChange={(e) => setDonationForm(prev => ({ ...prev, donorName: e.target.value }))}
                          />
                        </div>
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Amount ($)</label>
                          <input
                            type="number"
                            required
                            placeholder="500"
                            className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            value={donationForm.amount}
                            onChange={(e) => setDonationForm(prev => ({ ...prev, amount: e.target.value }))}
                          />
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-3">
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Method</label>
                          <select
                            className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            value={donationForm.paymentMethod}
                            onChange={(e) => setDonationForm(prev => ({ ...prev, paymentMethod: e.target.value as any }))}
                          >
                            <option value="Credit Card">Credit Card</option>
                            <option value="Check">Check</option>
                            <option value="Bank Transfer">Bank Transfer</option>
                            <option value="Cash">Cash</option>
                            <option value="Online">Online</option>
                          </select>
                        </div>
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Campaign</label>
                          <select
                            className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            value={donationForm.campaign}
                            onChange={(e) => setDonationForm(prev => ({ ...prev, campaign: e.target.value as any }))}
                          >
                            <option value="Relief Rover">Relief Rover</option>
                            <option value="General Fund">General Fund</option>
                            <option value="Homeless Outreach">Homeless Outreach</option>
                            <option value="Winter Shelter">Winter Shelter</option>
                          </select>
                        </div>
                      </div>

                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Ledger Notes</label>
                        <input
                          type="text"
                          placeholder="Outreach vehicle fuel sponsorship..."
                          className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                          value={donationForm.notes}
                          onChange={(e) => setDonationForm(prev => ({ ...prev, notes: e.target.value }))}
                        />
                      </div>

                      <button
                        type="submit"
                        disabled={isLoading.donation}
                        className="w-full bg-slate-900 hover:bg-slate-800 text-white font-bold py-2 rounded-lg text-xs transition-all cursor-pointer disabled:opacity-50"
                      >
                        {isLoading.donation ? 'Storing...' : 'Post Secure Ledger Entry'}
                      </button>
                    </form>
                  </div>

                  {/* List of Donations */}
                  <div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100 max-h-[400px] overflow-y-auto">
                    {donations.map(don => (
                      <div key={don.id} className="p-4 flex justify-between items-center text-xs">
                        <div>
                          <div className="font-bold text-slate-900">{don.donorName}</div>
                          <div className="text-[10px] text-slate-400 mt-1 flex items-center gap-1.5">
                            <span className="bg-slate-100 px-1 py-0.5 rounded font-mono text-[9px]">Method: {don.paymentMethod}</span>
                            <span>•</span>
                            <span className="text-amber-600 font-bold">Campaign: {don.campaign}</span>
                          </div>
                          {don.notes && <p className="text-[10px] text-slate-500 italic mt-1 font-sans">"{don.notes}"</p>}
                        </div>
                        <div className="text-right">
                          <div className="font-mono text-xs font-bold text-emerald-600">+${don.amount.toLocaleString()}</div>
                          <div className="text-[10px] font-mono text-slate-400 mt-0.5">{don.date}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TAB 4: Relief Rover Logistics & AI Routing */}
          {activeTab === 'rover' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between border-b border-slate-100 pb-4">
                <div>
                  <h2 className="font-sans text-lg font-bold text-slate-900 flex items-center gap-2">
                    <Truck className="w-5 h-5 text-amber-500" />
                    Relief Rover AI Operations & Routing Center
                  </h2>
                  <p className="text-xs text-slate-500">Automated Sacramento hotspot mapping, manual scheduling, and GPS coordinates tracker</p>
                </div>
                {/* Live tracking button */}
                <button
                  onClick={handleToggleRoverLive}
                  disabled={isLoading.roverLive}
                  className={`px-4 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-2 cursor-pointer border ${
                    roverState.isTrackingLive
                      ? 'bg-emerald-600 hover:bg-emerald-500 text-white border-emerald-500 shadow-md shadow-emerald-500/10'
                      : 'bg-slate-900 hover:bg-slate-800 text-slate-300 border-slate-800'
                  }`}
                >
                  <MapPin className={`w-4 h-4 ${roverState.isTrackingLive ? 'animate-bounce text-white' : 'text-slate-400'}`} />
                  <span>{roverState.isTrackingLive ? 'LIVE COORDINATES: TRANSMITTING ON' : 'ACTIVATE LIVE GPS STREAM'}</span>
                </button>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
                {/* Router settings & Schedule forms */}
                <div className="lg:col-span-5 space-y-6">
                  {/* Manual scheduler stop form */}
                  <div className="bg-slate-50 border border-slate-200 rounded-2xl p-5 shadow-sm space-y-4">
                    <div>
                      <h3 className="text-xs font-bold text-slate-700 uppercase tracking-wider flex items-center gap-1">
                        <Calendar className="w-4 h-4 text-slate-500" /> Schedule Rover outreach Stop
                      </h3>
                      <p className="text-[10px] text-slate-400 mt-0.5">Stops must be requested at least 24h in advance</p>
                    </div>

                    <form onSubmit={handleScheduleStop} className="space-y-3">
                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Cross Streets Only (No Specific address)</label>
                        <input
                          type="text"
                          required
                          placeholder="e.g. 21st St & Broadway"
                          className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none focus:border-amber-500"
                          value={stopForm.crossStreets}
                          onChange={(e) => setStopForm(prev => ({ ...prev, crossStreets: e.target.value }))}
                        />
                        <span className="text-[9px] text-slate-400 mt-1 block">Safety Protocol: Specific physical addresses are forbidden to maintain privacy.</span>
                      </div>

                      <div className="grid grid-cols-2 gap-3">
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Scheduled Date</label>
                          <input
                            type="date"
                            required
                            className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            value={stopForm.scheduledDate}
                            onChange={(e) => setStopForm(prev => ({ ...prev, scheduledDate: e.target.value }))}
                          />
                        </div>
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1 uppercase">Time Slot</label>
                          <select
                            className="w-full bg-white border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none font-semibold text-slate-850"
                            value={stopForm.scheduledTime}
                            onChange={(e) => setStopForm(prev => ({ ...prev, scheduledTime: e.target.value as any }))}
                          >
                            <option value="10:00 AM">10:00 AM</option>
                            <option value="11:30 AM">11:30 AM</option>
                            <option value="2:00 PM">2:00 PM</option>
                            <option value="3:30 PM">3:30 PM</option>
                          </select>
                        </div>
                      </div>

                      <button
                        type="submit"
                        disabled={isLoading.stop}
                        className="w-full bg-slate-900 hover:bg-slate-800 text-white font-bold py-2 rounded-lg text-xs transition-all cursor-pointer disabled:opacity-50"
                      >
                        {isLoading.stop ? 'Processing...' : 'Reserve Outreach Time Slot'}
                      </button>
                    </form>
                  </div>

                  {/* Scheduled list */}
                  <div className="space-y-2">
                    <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider">Reserved Appointments Ledger</h4>
                    <div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100 max-h-[250px] overflow-y-auto">
                      {scheduledStops.length === 0 ? (
                        <p className="text-xs text-slate-450 p-4 text-center">No active requests registered.</p>
                      ) : (
                        scheduledStops.map(stop => (
                          <div key={stop.id} className="p-3 flex justify-between items-start text-xs">
                            <div>
                              <div className="font-bold text-slate-800">{stop.crossStreets}</div>
                              <div className="text-[10px] text-slate-400 mt-1 flex items-center gap-1">
                                <Clock className="w-3 h-3 text-slate-400" />
                                <span>{stop.scheduledTime}</span>
                                <span>•</span>
                                <span>{stop.scheduledDate}</span>
                              </div>
                            </div>
                            <div className="text-right">
                              <span className="bg-emerald-50 text-emerald-700 border border-emerald-200 text-[9px] font-mono px-1.5 py-0.5 rounded font-bold">
                                APPROVED
                              </span>
                              <div className="text-[9px] text-slate-400 font-mono mt-1">By: {stop.requesterName}</div>
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  </div>
                </div>

                {/* AI Route mapping display */}
                <div className="lg:col-span-7 space-y-4">
                  <div className="bg-slate-900 text-white border border-slate-850 rounded-2xl p-5 shadow-sm space-y-4">
                    <div className="flex justify-between items-start">
                      <div>
                        <h3 className="font-sans font-bold text-base text-amber-400 flex items-center gap-2">
                          <Sparkles className="w-5 h-5 text-amber-500" />
                          Relief Rover Tomorrow's AI Route Planner
                        </h3>
                        <p className="text-[11px] text-slate-400 mt-1 leading-normal">
                          Order of priority: Employee requested stop appointments (Priority 1) followed by AI analyzed Sacramento hotspots (Priority 2).
                        </p>
                      </div>
                      <button
                        onClick={handleProcessAIRouting}
                        disabled={isLoading.aiRoute}
                        className="bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold px-4 py-2.5 rounded-xl text-xs flex items-center gap-2 cursor-pointer transition-all disabled:opacity-50 shrink-0"
                      >
                        <RefreshCw className={`w-3.5 h-3.5 ${isLoading.aiRoute ? 'animate-spin' : ''}`} />
                        <span>PROCESS AI ROUTE</span>
                      </button>
                    </div>

                    <div className="text-[11px] text-slate-400 font-mono flex items-center gap-1 border-t border-slate-800 pt-3">
                      <span>Last processed:</span>
                      <span className="text-white font-semibold">
                        {roverState.lastRouteProcessedAt ? new Date(roverState.lastRouteProcessedAt).toLocaleString() : 'Never Processed'}
                      </span>
                    </div>

                    {/* Displays ordered routes */}
                    <div className="space-y-3.5 pt-2">
                      {roverState.activeRoute.length === 0 ? (
                        <div className="text-center p-8 border border-dashed border-slate-800 rounded-xl">
                          <Compass className="w-8 h-8 text-slate-600 mx-auto mb-2 animate-spin" />
                          <p className="text-xs text-slate-400">No active processed route found for tomorrow.</p>
                          <p className="text-[10px] text-slate-500 mt-1">Press "Process AI Route" above to map the Sacramento area using outreach databases.</p>
                        </div>
                      ) : (
                        roverState.activeRoute.map((stop: any) => (
                          <div
                            key={stop.order}
                            className={`p-4 rounded-xl border flex items-start gap-3.5 ${
                              stop.source === 'User Request' 
                                ? 'bg-amber-500/10 border-amber-500/30' 
                                : 'bg-slate-850 border-slate-800'
                            }`}
                          >
                            <div className="bg-slate-850 text-white font-mono font-bold text-xs w-7 h-7 rounded-full flex items-center justify-center shrink-0 border border-slate-700">
                              #{stop.order}
                            </div>
                            <div className="flex-1 min-w-0">
                              <div className="flex justify-between items-start">
                                <h4 className="text-xs font-bold text-white tracking-tight">{stop.crossStreets}</h4>
                                <span className={`text-[9px] font-mono font-bold px-1.5 py-0.5 rounded ${
                                  stop.source === 'User Request'
                                    ? 'bg-amber-500 text-slate-950'
                                    : 'bg-indigo-500/10 text-indigo-400 border border-indigo-500/30'
                                }`}>
                                  {stop.source === 'User Request' ? 'USER SCHEDULED' : 'AI PREDICTED'}
                                </span>
                              </div>
                              <p className="text-[11px] text-slate-350 mt-1 leading-normal italic font-sans font-light">
                                "{stop.reason}"
                              </p>
                              <div className="flex items-center gap-3 text-[10px] font-mono text-slate-400 mt-2">
                                <span className="flex items-center gap-1">
                                  <Clock className="w-3 h-3 text-slate-500" /> Estimated: {stop.estimatedArrival}
                                </span>
                                <span>•</span>
                                <span className="flex items-center gap-1">
                                  Priority: <span className={stop.priority === 'High' ? 'text-red-400 font-bold' : 'text-amber-400'}>{stop.priority}</span>
                                </span>
                              </div>
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TAB 5: Unified Helpdesk inquiries box (help@myusako.org) */}
          {activeTab === 'helpdesk' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between border-b border-slate-100 pb-4">
                <div>
                  <h2 className="font-sans text-lg font-bold text-slate-900 flex items-center gap-2">
                    <Compass className="w-5 h-5 text-amber-500" />
                    Public Help Desk Inbox (help@myusako.org)
                  </h2>
                  <p className="text-xs text-slate-500">Sacramento residents, city council, and community coordinators assistance box</p>
                </div>
                <button 
                  onClick={fetchHelpdesk}
                  className="p-2 hover:bg-slate-100 rounded-lg transition-all"
                  title="Check messages"
                >
                  <RefreshCw className="w-4 h-4 text-slate-500" />
                </button>
              </div>

              <div className="space-y-4">
                {helpdeskEmails.length === 0 ? (
                  <p className="text-xs text-slate-400 text-center py-10">No public inquiries found on the server.</p>
                ) : (
                  helpdeskEmails.map(msg => (
                    <div
                      key={msg.id}
                      className={`border rounded-2xl p-5 space-y-4 transition-all ${
                        msg.status === 'Resolved' 
                          ? 'bg-slate-50/50 border-slate-200 opacity-75' 
                          : 'bg-white border-amber-200/60 shadow-sm'
                      }`}
                    >
                      <div className="flex justify-between items-start">
                        <div className="space-y-1">
                          <div className="text-xs font-bold text-slate-800">{msg.sender}</div>
                          <span className="text-[10px] text-slate-400 font-mono block">To: help@myusako.org</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <span className={`text-[10px] font-bold px-2 py-0.5 rounded font-mono ${
                            msg.status === 'Open' ? 'bg-red-50 text-red-700 border border-red-200' :
                            msg.status === 'In Progress' ? 'bg-amber-50 text-amber-700 border border-amber-200' :
                            'bg-emerald-50 text-emerald-700 border border-emerald-200'
                          }`}>
                            {msg.status}
                          </span>
                          <span className="text-[10px] font-mono text-slate-450">{new Date(msg.timestamp).toLocaleString()}</span>
                        </div>
                      </div>

                      <div className="space-y-2">
                        <h4 className="text-xs font-bold text-slate-950 font-sans">{msg.subject}</h4>
                        <p className="text-xs text-slate-750 leading-relaxed font-sans pl-3 border-l-2 border-slate-200 whitespace-pre-line">
                          {msg.body}
                        </p>
                      </div>

                      {msg.status !== 'Resolved' ? (
                        <div className="bg-slate-50 p-4 rounded-xl space-y-3 border border-slate-200">
                          <label className="block text-[10px] font-extrabold text-slate-500 uppercase tracking-wider">
                            Dispatch Reply on behalf of help@myusako.org
                          </label>
                          <textarea
                            rows={3}
                            className="w-full bg-white border border-slate-200 text-xs p-2.5 rounded-lg focus:outline-none"
                            placeholder="Hello, thank you for writing to MyUsako Sacramento outreach helpdesk. We have dispatched our Relief Rover to inspect..."
                            value={newHelpReply[msg.id] || ''}
                            onChange={(e) => setNewHelpReply(prev => ({ ...prev, [msg.id]: e.target.value }))}
                          />
                          <div className="flex justify-end gap-2">
                            <button
                              onClick={() => {
                                // Assign to current user without replying
                                fetch(`/api/helpdesk/${msg.id}`, {
                                  method: 'PUT',
                                  headers: { 'Content-Type': 'application/json' },
                                  body: JSON.stringify({ status: 'In Progress', assignedTo: currentUser.email })
                                }).then(() => fetchHelpdesk());
                              }}
                              className="bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 font-bold px-3 py-1.5 rounded-lg text-xs transition-all cursor-pointer"
                            >
                              Assign to Me
                            </button>
                            <button
                              onClick={() => handleHelpdeskReply(msg.id, msg.sender)}
                              className="bg-slate-950 hover:bg-slate-850 text-white font-bold px-4 py-1.5 rounded-lg text-xs transition-all cursor-pointer"
                            >
                              Dispatch Outgoing Response & Resolve
                            </button>
                          </div>
                        </div>
                      ) : (
                        <div className="text-[10px] text-slate-400 font-mono flex items-center gap-1.5">
                          <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
                          <span>Resolved by: {msg.assignedTo}</span>
                        </div>
                      )}
                    </div>
                  ))
                )}
              </div>
            </div>
          )}

          {/* TAB 6: Shared Forms */}
          {activeTab === 'forms' && (
            <div className="space-y-6">
              <div className="flex items-center justify-between border-b border-slate-100 pb-4">
                <div>
                  <h2 className="font-sans text-lg font-bold text-slate-900 flex items-center gap-2">
                    <FileText className="w-5 h-5 text-amber-500" />
                    Operational Shared Forms Archive
                  </h2>
                  <p className="text-xs text-slate-500">Standard operational logs, safety reports, and supply requests</p>
                </div>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* Form catalog left column */}
                <div className="lg:col-span-1 space-y-4">
                  <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Operational Forms Directory</h3>
                  <div className="space-y-2.5">
                    {sharedForms.map(form => (
                      <div
                        key={form.id}
                        className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm hover:shadow transition-all space-y-2"
                      >
                        <div className="flex justify-between items-start">
                          <span className="bg-slate-150 text-slate-700 font-mono text-[9px] px-1.5 py-0.5 rounded font-bold">
                            {form.category}
                          </span>
                        </div>
                        <h4 className="text-xs font-bold text-slate-900">{form.title}</h4>
                        <p className="text-[11px] text-slate-500 leading-normal">{form.description}</p>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Form display and interactive submission simulation right side */}
                <div className="lg:col-span-2 space-y-6">
                  <div className="bg-slate-50 border border-slate-200 rounded-2xl p-5 shadow-sm space-y-4">
                    <h3 className="text-xs font-bold text-slate-850 uppercase tracking-wider flex items-center gap-1.5">
                      <FileText className="w-4 h-4 text-amber-500" /> Complete outreach Activity form
                    </h3>
                    <p className="text-[11px] text-slate-400 leading-normal">
                      Select below to quickly record daily events. Submitting automatically registers this on the local secure filesystem.
                    </p>

                    <form onSubmit={(e) => handleFormSubmit(sharedForms[0], e)} className="space-y-4 bg-white p-4 rounded-xl border border-slate-100">
                      <div className="text-xs font-bold text-slate-800 border-b border-slate-100 pb-2">
                        {sharedForms[0]?.title || 'Relief Rover Outreach Log'}
                      </div>

                      <div className="grid grid-cols-2 gap-3">
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1">Outreach Route Date</label>
                          <input
                            type="date"
                            required
                            className="w-full bg-slate-50 border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            onChange={(e) => setFormResponses(prev => ({
                              ...prev,
                              [sharedForms[0].id]: { ...prev[sharedForms[0].id], date: e.target.value }
                            }))}
                          />
                        </div>
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1">Shift / Time</label>
                          <select
                            className="w-full bg-slate-50 border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none font-semibold text-slate-700"
                            onChange={(e) => setFormResponses(prev => ({
                              ...prev,
                              [sharedForms[0].id]: { ...prev[sharedForms[0].id], shift: e.target.value }
                            }))}
                          >
                            <option value="10:00 AM">10:00 AM</option>
                            <option value="11:30 AM">11:30 AM</option>
                            <option value="2:00 PM">2:00 PM</option>
                            <option value="3:30 PM">3:30 PM</option>
                          </select>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-3">
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1">Hygiene Kits Distributed</label>
                          <input
                            type="number"
                            placeholder="e.g. 15"
                            className="w-full bg-slate-50 border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            onChange={(e) => setFormResponses(prev => ({
                              ...prev,
                              [sharedForms[0].id]: { ...prev[sharedForms[0].id], hygieneKits: e.target.value }
                            }))}
                          />
                        </div>
                        <div>
                          <label className="block text-[10px] font-bold text-slate-500 mb-1">Bottled Waters Handed Out</label>
                          <input
                            type="number"
                            placeholder="e.g. 30"
                            className="w-full bg-slate-50 border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                            onChange={(e) => setFormResponses(prev => ({
                              ...prev,
                              [sharedForms[0].id]: { ...prev[sharedForms[0].id], bottledWater: e.target.value }
                            }))}
                          />
                        </div>
                      </div>

                      <div>
                        <label className="block text-[10px] font-bold text-slate-500 mb-1">Critical Incidents & Medical assistance Required</label>
                        <textarea
                          rows={3}
                          placeholder="Please document any urgent client needs or medical services requested here..."
                          className="w-full bg-slate-50 border border-slate-200 text-xs px-2.5 py-1.5 rounded-lg focus:outline-none"
                          onChange={(e) => setFormResponses(prev => ({
                            ...prev,
                            [sharedForms[0].id]: { ...prev[sharedForms[0].id], notes: e.target.value }
                          }))}
                        />
                      </div>

                      <button
                        type="submit"
                        className="w-full bg-slate-950 hover:bg-slate-850 text-white font-bold py-2 rounded-lg text-xs transition-all cursor-pointer"
                      >
                        File Digital Form & Dispatch Admin Notification
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TAB 7: Admin User Settings Controls */}
          {activeTab === 'admin_users' && currentUser.role === 'admin' && (
            <div className="space-y-6">
              <div className="border-b border-slate-100 pb-4">
                <h2 className="font-sans text-lg font-bold text-slate-900 flex items-center gap-2">
                  <UserCheck className="w-5 h-5 text-amber-500" />
                  Employee Access Directories & Security Controls
                </h2>
                <p className="text-xs text-slate-500">Register new employees, assign allowed modules, and approve forgot-password requests</p>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
                {/* Left side directory */}
                <div className="lg:col-span-8 space-y-4">
                  <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider">Registered Intranet Employees</h3>
                  <div className="bg-white border border-slate-200 rounded-2xl divide-y divide-slate-100 shadow-sm overflow-hidden">
                    {allUsers.map(user => (
                      <div key={user.id} className="p-4 flex flex-col sm:flex-row justify-between sm:items-center gap-4 text-xs">
                        <div>
                          <div className="flex items-center gap-2">
                            <span className="font-bold text-slate-900">{user.name}</span>
                            {user.role === 'admin' && (
                              <span className="bg-amber-100 text-amber-800 border border-amber-200 text-[8px] font-mono px-1 rounded font-bold uppercase">
                                Root Admin
                              </span>
                            )}
                          </div>
                          <div className="font-mono text-[10px] text-slate-450 mt-0.5">{user.email}</div>
                          
                          {/* Checked Permissions listing */}
                          <div className="flex flex-wrap gap-1.5 mt-2.5">
                            {toolsMenu.map(tool => {
                              const isAllowed = user.allowedTools.includes(tool.key);
                              return (
                                <button
                                  key={tool.key}
                                  onClick={() => {
                                    if (user.role === 'admin') return; // Admin gets everything
                                    const nextTools = isAllowed
                                      ? user.allowedTools.filter(t => t !== tool.key)
                                      : [...user.allowedTools, tool.key];
                                    handleUpdateUserTools(user.id, nextTools);
                                  }}
                                  disabled={user.role === 'admin'}
                                  className={`text-[9px] px-2 py-0.5 rounded-full font-semibold border transition-all cursor-pointer ${
                                    isAllowed
                                      ? 'bg-amber-50 text-amber-850 border-amber-200'
                                      : 'bg-slate-50 text-slate-400 border-slate-200/50'
                                  }`}
                                >
                                  {tool.label}
                                </button>
                              );
                            })}
                          </div>
                        </div>

                        {user.role !== 'admin' && (
                          <button
                            onClick={() => handleDeleteUser(user.id)}
                            className="text-red-600 hover:bg-red-50 p-2 rounded-lg transition-all self-end sm:self-center cursor-pointer"
                            title="Delete user account"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        )}
                      </div>
                    ))}
                  </div>

                  {/* Password Reset Approvals Queue */}
                  <div className="space-y-3 pt-4">
                    <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1.5">
                      <Lock className="w-4 h-4 text-slate-400" /> Pending Password Reset Requests
                    </h3>
                    <div className="bg-white border border-slate-200 rounded-2xl p-4 divide-y divide-slate-100 shadow-sm">
                      {resetRequests.length === 0 ? (
                        <p className="text-xs text-slate-400 text-center py-4">No pending reset requests.</p>
                      ) : (
                        resetRequests.map(req => {
                          // Extract name from subject: "Password Reset Request from John Doe"
                          const requesterName = req.subject.replace('Password Reset Request from ', '');
                          // Extract email from body or simulate
                          const requesterEmail = req.body.match(/\(([^)]+)\)/)?.[1] || 'employee@myusako.org';
                          
                          return (
                            <div key={req.id} className="py-3 flex justify-between items-center text-xs">
                              <div>
                                <div className="font-bold text-slate-800">{requesterName}</div>
                                <div className="font-mono text-[10px] text-slate-500">{requesterEmail}</div>
                                <div className="text-[9px] text-slate-400 font-mono mt-0.5">Submitted: {new Date(req.timestamp).toLocaleString()}</div>
                              </div>
                              <button
                                onClick={() => handleApproveReset(req.id, requesterEmail)}
                                className="bg-slate-900 hover:bg-slate-800 text-white font-bold px-3 py-1.5 rounded-xl text-[10px] cursor-pointer transition-all"
                              >
                                Approve Reset (Restores username as default password)
                              </button>
                            </div>
                          );
                        })
                      )}
                    </div>
                  </div>
                </div>

                {/* Right side createUser form */}
                <div className="lg:col-span-4 space-y-4">
                  <h3 className="text-xs font-bold text-slate-500 uppercase tracking-wider">Register Employee Portal</h3>
                  <div className="bg-slate-50 border border-slate-200 p-5 rounded-2xl space-y-4">
                    <form onSubmit={handleCreateUser} className="space-y-3.5">
                      <div>
                        <label className="block text-[10px] font-bold text-slate-600 mb-1.5 uppercase">Full Employee Name</label>
                        <input
                          type="text"
                          required
                          placeholder="e.g. Joshua Smith"
                          className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                          value={createUserForm.name}
                          onChange={(e) => setCreateUserForm(prev => ({ ...prev, name: e.target.value }))}
                        />
                      </div>

                      <div>
                        <label className="block text-[10px] font-bold text-slate-600 mb-1.5 uppercase">Email username (Prefix)</label>
                        <div className="flex items-center">
                          <input
                            type="text"
                            required
                            placeholder="e.g. Joshua.Smith"
                            className="flex-1 bg-white border border-slate-200 text-xs px-3 py-2 rounded-l-xl focus:outline-none"
                            value={createUserForm.emailPrefix}
                            onChange={(e) => setCreateUserForm(prev => ({ ...prev, emailPrefix: e.target.value }))}
                          />
                          <span className="bg-slate-200 text-slate-700 text-xs px-3 py-2 rounded-r-xl border border-l-0 border-slate-200 font-semibold">
                            @myusako.org
                          </span>
                        </div>
                        <p className="text-[9px] text-slate-400 mt-1.5">
                          Username will also be configured as default initial password!
                        </p>
                      </div>

                      <div>
                        <label className="block text-[10px] font-bold text-slate-600 mb-1.5 uppercase">Role</label>
                        <select
                          className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                          value={createUserForm.role}
                          onChange={(e) => setCreateUserForm(prev => ({ ...prev, role: e.target.value }))}
                        >
                          <option value="employee">Employee / Outreach Staff</option>
                          <option value="admin">System Admin</option>
                        </select>
                      </div>

                      <button
                        type="submit"
                        disabled={isLoading.userCreate}
                        className="w-full bg-slate-900 hover:bg-slate-800 text-white font-bold py-2.5 rounded-xl text-xs transition-all cursor-pointer disabled:opacity-50"
                      >
                        {isLoading.userCreate ? 'Registering...' : 'Provision Employee Account'}
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* TAB 8: System Phone configuration backend parameters (Twilio / Vapi configs) */}
          {activeTab === 'admin_phone_vapi' && currentUser.role === 'admin' && (
            <div className="space-y-6">
              <div className="border-b border-slate-100 pb-4">
                <h2 className="font-sans text-lg font-bold text-slate-900 flex items-center gap-2">
                  <Settings className="w-5 h-5 text-amber-500" />
                  Telephony & AI Keys Administrative Hub
                </h2>
                <p className="text-xs text-slate-500">Configure Twilio, Vapi, ElevenLabs, and Sacramento Area GIS API integration parameters</p>
              </div>

              <form onSubmit={handleSaveSettings} className="space-y-6">
                {/* Twilio Group */}
                <div className="bg-slate-50 border border-slate-200 rounded-2xl p-5 space-y-4">
                  <h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
                    <Phone className="w-4 h-4 text-slate-600" /> Twilio SIP Integration parameters
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Twilio Account Email</label>
                      <input
                        type="email"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                        value={systemSettings.twilioEmail || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, twilioEmail: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Twilio Phone Line</label>
                      <input
                        type="text"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                        value={systemSettings.twilioPhone || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, twilioPhone: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Account SID (SKa9aeb...)</label>
                      <input
                        type="text"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.twilioSid || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, twilioSid: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Client Secret</label>
                      <input
                        type="password"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.twilioSecret || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, twilioSecret: e.target.value }))}
                      />
                    </div>
                  </div>
                </div>

                {/* Vapi.AI Config */}
                <div className="bg-slate-50 border border-slate-200 rounded-2xl p-5 space-y-4">
                  <h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
                    <Sparkles className="w-4 h-4 text-slate-600" /> Vapi AI Conversational Core parameters
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Vapi Account Owner</label>
                      <input
                        type="email"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                        value={systemSettings.vapiEmail || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, vapiEmail: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Vapi Hotline Line</label>
                      <input
                        type="text"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none"
                        value={systemSettings.vapiPhone || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, vapiPhone: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Private Key (Secret)</label>
                      <input
                        type="password"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.vapiPrivateKey || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, vapiPrivateKey: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Account ID</label>
                      <input
                        type="text"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.vapiAccountId || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, vapiAccountId: e.target.value }))}
                      />
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Public Key (Client Integration)</label>
                      <input
                        type="text"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.vapiPublicKey || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, vapiPublicKey: e.target.value }))}
                      />
                    </div>
                  </div>
                </div>

                {/* Auxiliary AI keys (ElevenLabs, OpenAI, OpenRouter, Google AI Studio, Github Pat) */}
                <div className="bg-slate-50 border border-slate-200 rounded-2xl p-5 space-y-4">
                  <h3 className="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-1.5">
                    <Shield className="w-4 h-4 text-slate-600" /> Auxiliary Enterprise API Handlers
                  </h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">ElevenLabs Speech TTS Key</label>
                      <input
                        type="password"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.elevenLabsKey || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, elevenLabsKey: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">OpenAI organization Master key (Key 1)</label>
                      <input
                        type="password"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.openaiKey1 || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, openaiKey1: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">OpenRouter Workspace Access Key</label>
                      <input
                        type="password"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.openrouterKey || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, openrouterKey: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">OpenAI backup organization key (Key 2)</label>
                      <input
                        type="password"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.openaiKey2 || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, openaiKey2: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">GitHub Personal Access Token (PAT)</label>
                      <input
                        type="password"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.githubPat || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, githubPat: e.target.value }))}
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase mb-1">Google AI Studio API Key (Outreach router engine)</label>
                      <input
                        type="password"
                        className="w-full bg-white border border-slate-200 text-xs px-3 py-2 rounded-xl focus:outline-none font-mono"
                        value={systemSettings.googleStudioKey || ''}
                        onChange={(e) => setSystemSettings((prev: any) => ({ ...prev, googleStudioKey: e.target.value }))}
                      />
                    </div>
                  </div>
                </div>

                <div className="flex justify-end pt-2">
                  <button
                    type="submit"
                    disabled={isLoading.settingsSave}
                    className="bg-amber-500 hover:bg-amber-600 text-slate-950 font-extrabold px-6 py-3 rounded-xl text-xs transition-all cursor-pointer disabled:opacity-50 tracking-wider uppercase"
                  >
                    {isLoading.settingsSave ? 'Updating configurations...' : 'Save Unified Telephony Parameters'}
                  </button>
                </div>
              </form>
            </div>
          )}
        </div>
      </main>

      {/* Intranet Footer Accent */}
      <footer className="bg-slate-900 text-slate-400 py-6 border-t border-slate-800 text-center text-xs font-mono mt-10">
        <div className="max-w-7xl mx-auto px-4 space-y-1">
          <div>
            System: <span className="text-white">myusako.org</span> | Intranet Gateway: <span className="text-white">https://intranet.myusako.org/</span>
          </div>
          <div>
            FTP Server: <span className="text-white">ftpintranet@myusako.org</span> | Shared IP: <span className="text-white">136.0.111.105</span>
          </div>
          <div className="text-[10px] text-slate-500 pt-2">
            © 2026 MyUsako Sacramento Homeless supportive services. All activity logs and phone calls encrypted by high-grade corporate security.
          </div>
        </div>
      </footer>
    </div>
  );
}