import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { useSource, useAppState, useAction } from './sdk';
import { Badge, Metric, Glass, Icon } from './components';
import { BarChart, Bar, LineChart, Line, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { 
  TrendingUp, Users, CheckCircle, Clock, AlertCircle, FileText, 
  Mail, Calendar, UserCheck, Search, Filter, Plus, ChevronRight,
  Upload, Download, Bell, Shield, Award, Target, Activity
} from 'lucide-react';

// Mock data for onboarding workflows
const MOCK_HIRES = [
  { id: '1', name: 'Marcus Chen', role: 'Software Engineer', department: 'Engineering', startDate: '2026-01-15', buddy: 'Sarah Kim', status: 'in-progress', progress: 65, phase: 'Week 1', avatar: 'MC', email: 'marcus.chen@company.com', manager: 'David Park' },
  { id: '2', name: 'Emily Rodriguez', role: 'Product Manager', department: 'Product', startDate: '2026-01-20', buddy: 'James Wilson', status: 'in-progress', progress: 45, phase: 'Day 1', avatar: 'ER', email: 'emily.r@company.com', manager: 'Lisa Chang' },
  { id: '3', name: 'Alex Thompson', role: 'UX Designer', department: 'Design', startDate: '2026-01-08', buddy: 'Maya Patel', status: 'in-progress', progress: 85, phase: 'Month 1', avatar: 'AT', email: 'alex.t@company.com', manager: 'Chris Lee' },
  { id: '4', name: 'Jordan Williams', role: 'Sales Rep', department: 'Sales', startDate: '2026-02-01', buddy: 'TBD', status: 'pending', progress: 15, phase: 'Pre-boarding', avatar: 'JW', email: 'jordan.w@company.com', manager: 'Mike Johnson' },
  { id: '5', name: 'Priya Sharma', role: 'Data Analyst', department: 'Analytics', startDate: '2025-12-01', buddy: 'Tom Brown', status: 'complete', progress: 100, phase: '90-day', avatar: 'PS', email: 'priya.s@company.com', manager: 'Anna Davis' },
];

const MOCK_TASKS = [
  { id: 't1', hireId: '1', title: 'Complete I-9 Form', phase: 'Pre-boarding', status: 'done', dueDate: '2026-01-14', assignee: 'Marcus Chen', category: 'compliance', priority: 'high' },
  { id: 't2', hireId: '1', title: 'Sign Employment Contract', phase: 'Pre-boarding', status: 'done', dueDate: '2026-01-14', assignee: 'Marcus Chen', category: 'documents', priority: 'high' },
  { id: 't3', hireId: '1', title: 'Submit Tax Documents (W-4)', phase: 'Pre-boarding', status: 'done', dueDate: '2026-01-14', assignee: 'Marcus Chen', category: 'documents', priority: 'high' },
  { id: 't4', hireId: '1', title: 'Review Employee Handbook', phase: 'Pre-boarding', status: 'done', dueDate: '2026-01-14', assignee: 'Marcus Chen', category: 'reading', priority: 'medium' },
  { id: 't5', hireId: '1', title: 'Setup Email & Slack', phase: 'Day 1', status: 'done', dueDate: '2026-01-15', assignee: 'IT Admin', category: 'it', priority: 'high' },
  { id: 't6', hireId: '1', title: 'Laptop & Equipment Setup', phase: 'Day 1', status: 'done', dueDate: '2026-01-15', assignee: 'IT Admin', category: 'it', priority: 'high' },
  { id: 't7', hireId: '1', title: 'Team Introduction Meeting', phase: 'Day 1', status: 'done', dueDate: '2026-01-15', assignee: 'David Park', category: 'meetings', priority: 'medium' },
  { id: 't8', hireId: '1', title: 'Buddy Lunch', phase: 'Day 1', status: 'done', dueDate: '2026-01-15', assignee: 'Sarah Kim', category: 'social', priority: 'low' },
  { id: 't9', hireId: '1', title: 'Complete Security Training', phase: 'Week 1', status: 'in-progress', dueDate: '2026-01-22', assignee: 'Marcus Chen', category: 'training', priority: 'high' },
  { id: 't10', hireId: '1', title: 'Setup Development Environment', phase: 'Week 1', status: 'in-progress', dueDate: '2026-01-22', assignee: 'Marcus Chen', category: 'it', priority: 'high' },
  { id: 't11', hireId: '1', title: '1:1 with Manager', phase: 'Week 1', status: 'pending', dueDate: '2026-01-22', assignee: 'David Park', category: 'meetings', priority: 'medium' },
  { id: 't12', hireId: '1', title: 'Review Team OKRs', phase: 'Week 1', status: 'pending', dueDate: '2026-01-22', assignee: 'Marcus Chen', category: 'reading', priority: 'medium' },
  { id: 't13', hireId: '2', title: 'Complete I-9 Form', phase: 'Pre-boarding', status: 'done', dueDate: '2026-01-19', assignee: 'Emily Rodriguez', category: 'compliance', priority: 'high' },
  { id: 't14', hireId: '2', title: 'Sign Employment Contract', phase: 'Pre-boarding', status: 'done', dueDate: '2026-01-19', assignee: 'Emily Rodriguez', category: 'documents', priority: 'high' },
  { id: 't15', hireId: '2', title: 'Submit Tax Documents (W-4)', phase: 'Pre-boarding', status: 'pending', dueDate: '2026-01-19', assignee: 'Emily Rodriguez', category: 'documents', priority: 'high' },
  { id: 't16', hireId: '2', title: 'Review Employee Handbook', phase: 'Pre-boarding', status: 'in-progress', dueDate: '2026-01-19', assignee: 'Emily Rodriguez', category: 'reading', priority: 'medium' },
  { id: 't17', hireId: '2', title: 'Setup Email & Slack', phase: 'Day 1', status: 'pending', dueDate: '2026-01-20', assignee: 'IT Admin', category: 'it', priority: 'high' },
  { id: 't18', hireId: '2', title: 'Product Roadmap Review', phase: 'Day 1', status: 'pending', dueDate: '2026-01-20', assignee: 'Lisa Chang', category: 'meetings', priority: 'high' },
  { id: 't19', hireId: '3', title: 'Complete I-9 Form', phase: 'Pre-boarding', status: 'done', dueDate: '2026-01-07', assignee: 'Alex Thompson', category: 'compliance', priority: 'high' },
  { id: 't20', hireId: '3', title: 'Design System Training', phase: 'Month 1', status: 'in-progress', dueDate: '2026-02-08', assignee: 'Alex Thompson', category: 'training', priority: 'medium' },
];

const MOCK_DOCUMENTS = [
  { id: 'd1', hireId: '1', name: 'I-9 Form', type: 'pdf', status: 'signed', uploadedAt: '2026-01-14', expiresAt: null },
  { id: 'd2', hireId: '1', name: 'Employment Contract', type: 'pdf', status: 'signed', uploadedAt: '2026-01-14', expiresAt: null },
  { id: 'd3', hireId: '1', name: 'W-4 Tax Form', type: 'pdf', status: 'signed', uploadedAt: '2026-01-14', expiresAt: null },
  { id: 'd4', hireId: '1', name: 'Direct Deposit Form', type: 'pdf', status: 'pending', uploadedAt: null, expiresAt: null },
  { id: 'd5', hireId: '2', name: 'I-9 Form', type: 'pdf', status: 'signed', uploadedAt: '2026-01-19', expiresAt: null },
  { id: 'd6', hireId: '2', name: 'Employment Contract', type: 'pdf', status: 'signed', uploadedAt: '2026-01-19', expiresAt: null },
  { id: 'd7', hireId: '2', name: 'W-4 Tax Form', type: 'pdf', status: 'pending', uploadedAt: null, expiresAt: null },
  { id: 'd8', hireId: '3', name: 'I-9 Form', type: 'pdf', status: 'signed', uploadedAt: '2026-01-07', expiresAt: '2029-01-07' },
  { id: 'd9', hireId: '3', name: 'NDA Agreement', type: 'pdf', status: 'signed', uploadedAt: '2026-01-07', expiresAt: null },
];

const PHASES = ['Pre-boarding', 'Day 1', 'Week 1', 'Month 1', 'Month 2', 'Month 3', '90-day'];
const CATEGORIES = [
  { id: 'compliance', label: 'Compliance', color: '#ef4444', icon: 'shield' },
  { id: 'documents', label: 'Documents', color: '#f59e0b', icon: 'file-text' },
  { id: 'it', label: 'IT Setup', color: '#8b5cf6', icon: 'activity' },
  { id: 'training', label: 'Training', color: '#06b6d4', icon: 'award' },
  { id: 'meetings', label: 'Meetings', color: '#10b981', icon: 'users' },
  { id: 'social', label: 'Social', color: '#ec4899', icon: 'user-check' },
  { id: 'reading', label: 'Reading', color: '#64748b', icon: 'file-text' },
];

const STATUS_COLORS = {
  pending: 'bg-slate-500',
  'in-progress': 'bg-blue-500',
  done: 'bg-emerald-500',
  complete: 'bg-emerald-500',
  overdue: 'bg-red-500',
};

export default function App() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [selectedHire, setSelectedHire] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [phaseFilter, setPhaseFilter] = useState('all');
  const [statusFilter, setStatusFilter] = useState('all');
  const [showUploadModal, setShowUploadModal] = useState(false);
  const [showTaskModal, setShowTaskModal] = useState(false);
  const [selectedTask, setSelectedTask] = useState<any>(null);
  const [userRole, setUserRole] = useState<'hr-admin' | 'manager' | 'new-hire'>('hr-admin');
  
  const { data, loading, error, refetch } = useSource('/api/framework/connections/app/employee-onboarding/data', 30000);
  const dispatch = useAction();
  const [notifications, setNotifications] = useAppState('notifications', []);

  // Use mock data since no providers connected yet
  const hires = useMemo(() => MOCK_HIRES, []);
  const tasks = useMemo(() => MOCK_TASKS, []);
  const documents = useMemo(() => MOCK_DOCUMENTS, []);

  // Filter hires based on search and filters
  const filteredHires = useMemo(() => {
    return hires.filter(hire => {
      const matchesSearch = hire.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                           hire.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
                           hire.department.toLowerCase().includes(searchQuery.toLowerCase());
      const matchesPhase = phaseFilter === 'all' || hire.phase === phaseFilter;
      const matchesStatus = statusFilter === 'all' || hire.status === statusFilter;
      return matchesSearch && matchesPhase && matchesStatus;
    });
  }, [hires, searchQuery, phaseFilter, statusFilter]);

  // Calculate statistics
  const stats = useMemo(() => {
    const totalHires = hires.length;
    const activeHires = hires.filter(h => h.status === 'in-progress').length;
    const completedHires = hires.filter(h => h.status === 'complete').length;
    const avgProgress = Math.round(hires.reduce((sum, h) => sum + h.progress, 0) / totalHires);
    const overdueTasks = tasks.filter(t => t.status !== 'done' && new Date(t.dueDate) < new Date()).length;
    const pendingDocs = documents.filter(d => d.status === 'pending').length;
    
    return { totalHires, activeHires, completedHires, avgProgress, overdueTasks, pendingDocs };
  }, [hires, tasks, documents]);

  // Progress chart data
  const progressData = useMemo(() => {
    return PHASES.slice(0, 5).map(phase => ({
      name: phase,
      completed: hires.filter(h => h.phase === phase && h.status === 'complete').length,
      inProgress: hires.filter(h => h.phase === phase && h.status === 'in-progress').length,
    }));
  }, [hires]);

  // Category distribution
  const categoryData = useMemo(() => {
    return CATEGORIES.map(cat => ({
      name: cat.label,
      value: tasks.filter(t => t.category === cat.id).length,
      color: cat.color,
    }));
  }, [tasks]);

  const handleTaskComplete = useCallback((taskId: string) => {
    dispatch('toast', { message: 'Task marked complete!', type: 'success' });
    refetch();
  }, [dispatch, refetch]);

  const handleSendReminder = useCallback((hireId: string, hireName: string) => {
    dispatch('toast', { message: `Reminder sent to ${hireName}`, type: 'success' });
    dispatch('enqueue', { 
      action_type: 'send_email', 
      data: { 
        to: hires.find(h => h.id === hireId)?.email, 
        subject: 'Onboarding Reminder', 
        body: 'You have pending onboarding tasks.' 
      } 
    });
  }, [dispatch, hires]);

  const handleFileUpload = useCallback((files: FileList) => {
    dispatch('toast', { message: `${files.length} file(s) uploaded`, type: 'success' });
    setShowUploadModal(false);
  }, [dispatch]);

  // Render loading state
  if (loading) {
    return (
      <div className="min-h-screen bg-[#0a0e1a] flex items-center justify-center">
        <div className="text-blue-400 animate-spin text-3xl">
          <Icon name="activity" size={48} />
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#0a0e1a] text-white">
      {/* Header */}
      <header className="border-b border-white/[0.08] px-6 py-4 sticky top-0 bg-[#0a0e1a]/95 backdrop-blur z-40">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-cyan-500 flex items-center justify-center">
                <Icon name="users" size={20} className="text-white" />
              </div>
              <div>
                <h1 className="text-xl font-bold">Employee Onboarding</h1>
                <p className="text-xs text-slate-400">Workflow Tracker</p>
              </div>
            </div>
          </div>
          
          <div className="flex items-center gap-3">
            {/* Role Selector */}
            <select 
              value={userRole} 
              onChange={(e) => setUserRole(e.target.value as any)}
              className="bg-white/[0.05] border border-white/[0.08] rounded-lg px-3 py-2 text-sm"
            >
              <option value="hr-admin">HR Admin View</option>
              <option value="manager">Manager View</option>
              <option value="new-hire">New Hire View</option>
            </select>
            
            <button 
              onClick={() => setShowUploadModal(true)}
              className="flex items-center gap-2 px-4 py-2 bg-violet-500/20 text-violet-400 rounded-lg text-sm hover:bg-violet-500/30 transition"
            >
              <Icon name="upload" size={16} />
              Upload Document
            </button>
            
            <button 
              onClick={() => setShowTaskModal(true)}
              className="flex items-center gap-2 px-4 py-2 bg-emerald-500/20 text-emerald-400 rounded-lg text-sm hover:bg-emerald-500/30 transition"
            >
              <Icon name="plus" size={16} />
              Add Task
            </button>
          </div>
        </div>

        {/* Tabs */}
        <div className="flex gap-2 mt-4">
          {[
            { id: 'dashboard', label: 'Dashboard', icon: 'activity' },
            { id: 'hires', label: 'New Hires', icon: 'users' },
            { id: 'tasks', label: 'Tasks', icon: 'check-circle' },
            { id: 'documents', label: 'Documents', icon: 'file-text' },
            { id: 'analytics', label: 'Analytics', icon: 'trending-up' },
          ].map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition ${
                activeTab === tab.id 
                  ? 'bg-violet-500/20 text-violet-400' 
                  : 'text-slate-400 hover:text-white hover:bg-white/[0.05]'
              }`}
            >
              <Icon name={tab.icon as any} size={16} />
              {tab.label}
            </button>
          ))}
        </div>
      </header>

      {/* Error Banner */}
      {error && (
        <div className="mx-6 mt-4 p-4 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center gap-3">
          <Icon name="alert-circle" size={20} className="text-red-400" />
          <span className="text-red-400 text-sm">Connection issue: {error.message}. Showing cached data.</span>
        </div>
      )}

      <div className="p-6 space-y-6">
        {/* Dashboard Tab */}
        {activeTab === 'dashboard' && (
          <>
            {/* KPI Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <Glass className="p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-slate-400 text-sm">Active Hires</p>
                    <p className="text-3xl font-bold mt-1">{stats.activeHires}</p>
                  </div>
                  <div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
                    <Icon name="users" size={24} className="text-blue-400" />
                  </div>
                </div>
                <div className="mt-3 flex items-center gap-2">
                  <Badge label={`${stats.totalHires} total`} variant="neutral" />
                </div>
              </Glass>

              <Glass className="p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-slate-400 text-sm">Avg Progress</p>
                    <p className="text-3xl font-bold mt-1">{stats.avgProgress}%</p>
                  </div>
                  <div className="w-12 h-12 rounded-xl bg-emerald-500/20 flex items-center justify-center">
                    <Icon name="trending-up" size={24} className="text-emerald-400" />
                  </div>
                </div>
                <div className="mt-3 w-full bg-slate-700 rounded-full h-2">
                  <div className="bg-emerald-500 h-2 rounded-full transition-all" style={{ width: `${stats.avgProgress}%` }} />
                </div>
              </Glass>

              <Glass className="p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-slate-400 text-sm">Overdue Tasks</p>
                    <p className="text-3xl font-bold mt-1">{stats.overdueTasks}</p>
                  </div>
                  <div className="w-12 h-12 rounded-xl bg-red-500/20 flex items-center justify-center">
                    <Icon name="alert-circle" size={24} className="text-red-400" />
                  </div>
                </div>
                {stats.overdueTasks > 0 && (
                  <Badge label="Action needed" variant="negative" />
                )}
              </Glass>

              <Glass className="p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-slate-400 text-sm">Pending Docs</p>
                    <p className="text-3xl font-bold mt-1">{stats.pendingDocs}</p>
                  </div>
                  <div className="w-12 h-12 rounded-xl bg-amber-500/20 flex items-center justify-center">
                    <Icon name="file-text" size={24} className="text-amber-400" />
                  </div>
                </div>
                <div className="mt-3 flex items-center gap-2">
                  <Badge label={`${documents.length} total`} variant="neutral" />
                </div>
              </Glass>
            </div>

            {/* Charts Row */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Glass className="p-5">
                <div className="flex items-center gap-2 mb-4">
                  <Icon name="activity" size={20} className="text-violet-400" />
                  <h3 className="font-semibold">Progress by Phase</h3>
                </div>
                <ResponsiveContainer width="100%" height={250}>
                  <BarChart data={progressData}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
                    <XAxis dataKey="name" stroke="#94a3b8" fontSize={12} />
                    <YAxis stroke="#94a3b8" fontSize={12} />
                    <Tooltip 
                      contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                      labelStyle={{ color: '#fff' }}
                    />
                    <Legend />
                    <Bar dataKey="completed" fill="#10b981" radius={[4, 4, 0, 0]} />
                    <Bar dataKey="inProgress" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                  </BarChart>
                </ResponsiveContainer>
              </Glass>

              <Glass className="p-5">
                <div className="flex items-center gap-2 mb-4">
                  <Icon name="target" size={20} className="text-cyan-400" />
                  <h3 className="font-semibold">Task Distribution</h3>
                </div>
                <ResponsiveContainer width="100%" height={250}>
                  <PieChart>
                    <Pie
                      data={categoryData}
                      cx="50%"
                      cy="50%"
                      innerRadius={60}
                      outerRadius={100}
                      paddingAngle={2}
                      dataKey="value"
                    >
                      {categoryData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                    <Tooltip 
                      contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                    />
                    <Legend />
                  </PieChart>
                </ResponsiveContainer>
              </Glass>
            </div>

            {/* Active Hires Table */}
            <Glass className="p-5">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-2">
                  <Icon name="users" size={20} className="text-violet-400" />
                  <h3 className="font-semibold">Active Onboarding</h3>
                </div>
                <button 
                  onClick={() => setActiveTab('hires')}
                  className="text-sm text-violet-400 hover:text-violet-300 flex items-center gap-1"
                >
                  View All <Icon name="chevron-right" size={16} />
                </button>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-white/[0.08] text-slate-400">
                      <th className="text-left py-3 px-4">New Hire</th>
                      <th className="text-left py-3 px-4">Role</th>
                      <th className="text-left py-3 px-4">Phase</th>
                      <th className="text-left py-3 px-4">Progress</th>
                      <th className="text-left py-3 px-4">Buddy</th>
                      <th className="text-left py-3 px-4">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {hires.filter(h => h.status !== 'complete').map(hire => (
                      <tr 
                        key={hire.id} 
                        className="border-b border-white/[0.04] hover:bg-white/[0.02] cursor-pointer"
                        onClick={() => { setSelectedHire(hire.id); setActiveTab('hires'); }}
                      >
                        <td className="py-3 px-4">
                          <div className="flex items-center gap-3">
                            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-cyan-500 flex items-center justify-center text-sm font-medium">
                              {hire.avatar}
                            </div>
                            <div>
                              <p className="font-medium">{hire.name}</p>
                              <p className="text-xs text-slate-400">{hire.email}</p>
                            </div>
                          </div>
                        </td>
                        <td className="py-3 px-4">
                          <div>
                            <p>{hire.role}</p>
                            <p className="text-xs text-slate-400">{hire.department}</p>
                          </div>
                        </td>
                        <td className="py-3 px-4">
                          <Badge label={hire.phase} variant="tech" />
                        </td>
                        <td className="py-3 px-4">
                          <div className="flex items-center gap-2">
                            <div className="w-24 bg-slate-700 rounded-full h-2">
                              <div 
                                className={`h-2 rounded-full transition-all ${hire.progress === 100 ? 'bg-emerald-500' : hire.progress > 50 ? 'bg-blue-500' : 'bg-amber-500'}`}
                                style={{ width: `${hire.progress}%` }}
                              />
                            </div>
                            <span className="text-xs">{hire.progress}%</span>
                          </div>
                        </td>
                        <td className="py-3 px-4">
                          {hire.buddy !== 'TBD' ? (
                            <div className="flex items-center gap-2">
                              <Icon name="user-check" size={14} className="text-emerald-400" />
                              <span>{hire.buddy}</span>
                            </div>
                          ) : (
                            <Badge label="Not assigned" variant="negative" />
                          )}
                        </td>
                        <td className="py-3 px-4">
                          <button 
                            onClick={(e) => { e.stopPropagation(); handleSendReminder(hire.id, hire.name); }}
                            className="p-2 hover:bg-white/[0.05] rounded-lg transition"
                            title="Send reminder"
                          >
                            <Icon name="bell" size={16} className="text-slate-400" />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Glass>
          </>
        )}

        {/* New Hires Tab */}
        {activeTab === 'hires' && (
          <>
            {/* Filters */}
            <Glass className="p-4">
              <div className="flex flex-wrap gap-4">
                <div className="flex-1 min-w-64">
                  <div className="relative">
                    <Icon name="search" size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                    <input
                      type="text"
                      placeholder="Search by name, role, or department..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="w-full bg-white/[0.05] border border-white/[0.08] rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:border-violet-500/50"
                    />
                  </div>
                </div>
                <select
                  value={phaseFilter}
                  onChange={(e) => setPhaseFilter(e.target.value)}
                  className="bg-white/[0.05] border border-white/[0.08] rounded-lg px-4 py-2 text-sm"
                >
                  <option value="all">All Phases</option>
                  {PHASES.map(phase => (
                    <option key={phase} value={phase}>{phase}</option>
                  ))}
                </select>
                <select
                  value={statusFilter}
                  onChange={(e) => setStatusFilter(e.target.value)}
                  className="bg-white/[0.05] border border-white/[0.08] rounded-lg px-4 py-2 text-sm"
                >
                  <option value="all">All Statuses</option>
                  <option value="pending">Pending</option>
                  <option value="in-progress">In Progress</option>
                  <option value="complete">Complete</option>
                </select>
              </div>
            </Glass>

            {/* Hire Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {filteredHires.map(hire => (
                <Glass 
                  key={hire.id} 
                  className="p-5 cursor-pointer hover:bg-white/[0.03] transition"
                  onClick={() => setSelectedHire(hire.id)}
                >
                  <div className="flex items-start justify-between mb-4">
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-violet-500 to-cyan-500 flex items-center justify-center text-lg font-bold">
                        {hire.avatar}
                      </div>
                      <div>
                        <h4 className="font-semibold">{hire.name}</h4>
                        <p className="text-sm text-slate-400">{hire.role}</p>
                      </div>
                    </div>
                    <Badge 
                      label={hire.status === 'complete' ? 'Complete' : hire.status === 'in-progress' ? 'Active' : 'Pending'} 
                      variant={hire.status === 'complete' ? 'positive' : hire.status === 'in-progress' ? 'tech' : 'neutral'} 
                    />
                  </div>

                  <div className="space-y-3">
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-slate-400">Department</span>
                      <span>{hire.department}</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-slate-400">Start Date</span>
                      <span>{hire.startDate}</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-slate-400">Manager</span>
                      <span>{hire.manager}</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-slate-400">Buddy</span>
                      <span>{hire.buddy !== 'TBD' ? hire.buddy : 'Not assigned'}</span>
                    </div>
                  </div>

                  <div className="mt-4">
                    <div className="flex items-center justify-between text-sm mb-2">
                      <span className="text-slate-400">Progress</span>
                      <span className="font-medium">{hire.progress}%</span>
                    </div>
                    <div className="w-full bg-slate-700 rounded-full h-2">
                      <div 
                        className={`h-2 rounded-full transition-all ${hire.progress === 100 ? 'bg-emerald-500' : hire.progress > 50 ? 'bg-blue-500' : 'bg-amber-500'}`}
                        style={{ width: `${hire.progress}%` }}
                      />
                    </div>
                  </div>

                  <div className="mt-4 pt-4 border-t border-white/[0.08] flex items-center justify-between">
                    <Badge label={hire.phase} variant="tech" />
                    <button 
                      onClick={(e) => { e.stopPropagation(); handleSendReminder(hire.id, hire.name); }}
                      className="p-2 hover:bg-white/[0.05] rounded-lg transition"
                    >
                      <Icon name="bell" size={16} className="text-slate-400" />
                    </button>
                  </div>
                </Glass>
              ))}
            </div>
          </>
        )}

        {/* Tasks Tab */}
        {activeTab === 'tasks' && (
          <Glass className="p-5">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Icon name="check-circle" size={20} className="text-emerald-400" />
                <h3 className="font-semibold">All Tasks</h3>
              </div>
              <div className="flex items-center gap-2 text-sm text-slate-400">
                <span>{tasks.filter(t => t.status === 'done').length}/{tasks.length} completed</span>
              </div>
            </div>

            <div className="space-y-6">
              {PHASES.slice(0, 5).map(phase => {
                const phaseTasks = tasks.filter(t => t.phase === phase);
                if (phaseTasks.length === 0) return null;
                
                return (
                  <div key={phase}>
                    <h4 className="text-sm font-semibold text-slate-400 mb-3 flex items-center gap-2">
                      <Icon name="calendar" size={16} />
                      {phase}
                    </h4>
                    <div className="space-y-2">
                      {phaseTasks.map(task => (
                        <div 
                          key={task.id}
                          className="flex items-center justify-between p-3 bg-white/[0.02] rounded-lg border border-white/[0.04] hover:bg-white/[0.03] transition cursor-pointer"
                          onClick={() => setSelectedTask(task)}
                        >
                          <div className="flex items-center gap-3">
                            <button
                              onClick={(e) => { e.stopPropagation(); handleTaskComplete(task.id); }}
                              className={`w-5 h-5 rounded border-2 flex items-center justify-center transition ${
                                task.status === 'done' 
                                  ? 'bg-emerald-500 border-emerald-500' 
                                  : 'border-slate-500 hover:border-emerald-500'
                              }`}
                            >
                              {task.status === 'done' && <Icon name="check" size={12} className="text-white" />}
                            </button>
                            <div>
                              <p className={`font-medium ${task.status === 'done' ? 'text-slate-400 line-through' : ''}`}>
                                {task.title}
                              </p>
                              <div className="flex items-center gap-2 text-xs text-slate-400 mt-1">
                                <span>{task.assignee}</span>
                                <span>•</span>
                                <span className={new Date(task.dueDate) < new Date() && task.status !== 'done' ? 'text-red-400' : ''}>
                                  Due: {task.dueDate}
                                </span>
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Badge 
                              label={CATEGORIES.find(c => c.id === task.category)?.label || task.category} 
                              variant="neutral" 
                            />
                            {new Date(task.dueDate) < new Date() && task.status !== 'done' && (
                              <Icon name="alert-circle" size={16} className="text-red-400" />
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </Glass>
        )}

        {/* Documents Tab */}
        {activeTab === 'documents' && (
          <Glass className="p-5">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Icon name="file-text" size={20} className="text-amber-400" />
                <h3 className="font-semibold">Document Collection</h3>
              </div>
              <button 
                onClick={() => setShowUploadModal(true)}
                className="flex items-center gap-2 px-4 py-2 bg-violet-500/20 text-violet-400 rounded-lg text-sm hover:bg-violet-500/30 transition"
              >
                <Icon name="upload" size={16} />
                Upload
              </button>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-white/[0.08] text-slate-400">
                    <th className="text-left py-3 px-4">Document</th>
                    <th className="text-left py-3 px-4">New Hire</th>
                    <th className="text-left py-3 px-4">Status</th>
                    <th className="text-left py-3 px-4">Uploaded</th>
                    <th className="text-left py-3 px-4">Expires</th>
                    <th className="text-left py-3 px-4">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {documents.map(doc => {
                    const hire = hires.find(h => h.id === doc.hireId);
                    return (
                      <tr key={doc.id} className="border-b border-white/[0.04] hover:bg-white/[0.02]">
                        <td className="py-3 px-4">
                          <div className="flex items-center gap-2">
                            <Icon name="file-text" size={16} className="text-slate-400" />
                            <span>{doc.name}</span>
                          </div>
                        </td>
                        <td className="py-3 px-4">{hire?.name || 'Unknown'}</td>
                        <td className="py-3 px-4">
                          <Badge 
                            label={doc.status === 'signed' ? 'Signed' : doc.status === 'pending' ? 'Pending' : 'Expired'} 
                            variant={doc.status === 'signed' ? 'positive' : doc.status === 'pending' ? 'neutral' : 'negative'} 
                          />
                        </td>
                        <td className="py-3 px-4">{doc.uploadedAt || '-'}</td>
                        <td className="py-3 px-4">
                          {doc.expiresAt ? (
                            <span className={new Date(doc.expiresAt) < new Date() ? 'text-red-400' : ''}>
                              {doc.expiresAt}
                            </span>
                          ) : '-'}
                        </td>
                        <td className="py-3 px-4">
                          <div className="flex items-center gap-2">
                            <button className="p-2 hover:bg-white/[0.05] rounded-lg transition" title="Download">
                              <Icon name="download" size={16} className="text-slate-400" />
                            </button>
                            {doc.status === 'pending' && (
                              <button className="p-2 hover:bg-white/[0.05] rounded-lg transition" title="Request signature">
                                <Icon name="mail" size={16} className="text-slate-400" />
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </Glass>
        )}

        {/* Analytics Tab */}
        {activeTab === 'analytics' && (
          <div className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Glass className="p-5">
                <div className="flex items-center gap-2 mb-4">
                  <Icon name="trending-up" size={20} className="text-emerald-400" />
                  <h3 className="font-semibold">Completion Trends</h3>
                </div>
                <ResponsiveContainer width="100%" height={300}>
                  <LineChart data={[
                    { name: 'Week 1', completed: 2, started: 5 },
                    { name: 'Week 2', completed: 4, started: 6 },
                    { name: 'Week 3', completed: 5, started: 5 },
                    { name: 'Week 4', completed: 6, started: 4 },
                  ]}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
                    <XAxis dataKey="name" stroke="#94a3b8" fontSize={12} />
                    <YAxis stroke="#94a3b8" fontSize={12} />
                    <Tooltip 
                      contentStyle={{ backgroundColor: '#1e293b', border: '1px solid #334155', borderRadius: '8px' }}
                    />
                    <Legend />
                    <Line type="monotone" dataKey="completed" stroke="#10b981" strokeWidth={2} />
                    <Line type="monotone" dataKey="started" stroke="#3b82f6" strokeWidth={2} />
                  </LineChart>
                </ResponsiveContainer>
              </Glass>

              <Glass className="p-5">
                <div className="flex items-center gap-2 mb-4">
                  <Icon name="shield" size={20} className="text-violet-400" />
                  <h3 className="font-semibold">Compliance Status</h3>
                </div>
                <div className="space-y-4">
                  {[
                    { name: 'I-9 Forms', completed: 5, total: 5, color: 'emerald' },
                    { name: 'Tax Documents', completed: 3, total: 5, color: 'amber' },
                    { name: 'Employment Contracts', completed: 5, total: 5, color: 'emerald' },
                    { name: 'NDAs', completed: 4, total: 5, color: 'blue' },
                    { name: 'Handbook Acknowledgments', completed: 4, total: 5, color: 'blue' },
                  ].map(item => (
                    <div key={item.name}>
                      <div className="flex items-center justify-between text-sm mb-2">
                        <span>{item.name}</span>
                        <span className="text-slate-400">{item.completed}/{item.total}</span>
                      </div>
                      <div className="w-full bg-slate-700 rounded-full h-2">
                        <div 
                          className={`h-2 rounded-full transition-all bg-${item.color}-500`}
                          style={{ width: `${(item.completed / item.total) * 100}%` }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </Glass>
            </div>

            <Glass className="p-5">
              <div className="flex items-center gap-2 mb-4">
                <Icon name="award" size={20} className="text-amber-400" />
                <h3 className="font-semibold">90-Day Milestone Tracker</h3>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {[
                  { milestone: '30-Day Check-in', hires: 3, color: 'blue' },
                  { milestone: '60-Day Check-in', hires: 2, color: 'violet' },
                  { milestone: '90-Day Review', hires: 1, color: 'emerald' },
                ].map(item => (
                  <div key={item.milestone} className="p-4 bg-white/[0.02] rounded-lg border border-white/[0.04]">
                    <p className="text-sm text-slate-400">{item.milestone}</p>
                    <p className="text-2xl font-bold mt-1">{item.hires} hires</p>
                  </div>
                ))}
              </div>
            </Glass>
          </div>
        )}
      </div>

      {/* Hire Detail Modal */}
      {selectedHire && (
        <div 
          className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4"
          onClick={() => setSelectedHire(null)}
        >
          <Glass 
            className="p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto"
            onClick={e => e.stopPropagation()}
          >
            {(() => {
              const hire = hires.find(h => h.id === selectedHire);
              if (!hire) return null;
              const hireTasks = tasks.filter(t => t.hireId === hire.id);
              const hireDocs = documents.filter(d => d.hireId === hire.id);

              return (
                <>
                  <div className="flex items-start justify-between mb-6">
                    <div className="flex items-center gap-4">
                      <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-violet-500 to-cyan-500 flex items-center justify-center text-xl font-bold">
                        {hire.avatar}
                      </div>
                      <div>
                        <h2 className="text-xl font-bold">{hire.name}</h2>
                        <p className="text-slate-400">{hire.role} • {hire.department}</p>
                        <p className="text-sm text-slate-400 mt-1">{hire.email}</p>
                      </div>
                    </div>
                    <button 
                      onClick={() => setSelectedHire(null)}
                      className="p-2 hover:bg-white/[0.05] rounded-lg transition"
                    >
                      <Icon name="x" size={20} className="text-slate-400" />
                    </button>
                  </div>

                  <div className="grid grid-cols-2 gap-4 mb-6">
                    <div className="p-3 bg-white/[0.02] rounded-lg">
                      <p className="text-sm text-slate-400">Start Date</p>
                      <p className="font-medium">{hire.startDate}</p>
                    </div>
                    <div className="p-3 bg-white/[0.02] rounded-lg">
                      <p className="text-sm text-slate-400">Manager</p>
                      <p className="font-medium">{hire.manager}</p>
                    </div>
                    <div className="p-3 bg-white/[0.02] rounded-lg">
                      <p className="text-sm text-slate-400">Buddy</p>
                      <p className="font-medium">{hire.buddy !== 'TBD' ? hire.buddy : 'Not assigned'}</p>
                    </div>
                    <div className="p-3 bg-white/[0.02] rounded-lg">
                      <p className="text-sm text-slate-400">Current Phase</p>
                      <Badge label={hire.phase} variant="tech" />
                    </div>
                  </div>

                  <div className="mb-6">
                    <div className="flex items-center justify-between mb-2">
                      <p className="text-sm text-slate-400">Overall Progress</p>
                      <p className="font-medium">{hire.progress}%</p>
                    </div>
                    <div className="w-full bg-slate-700 rounded-full h-3">
                      <div 
                        className={`h-3 rounded-full transition-all ${hire.progress === 100 ? 'bg-emerald-500' : 'bg-blue-500'}`}
                        style={{ width: `${hire.progress}%` }}
                      />
                    </div>
                  </div>

                  <h3 className="font-semibold mb-3 flex items-center gap-2">
                    <Icon name="check-circle" size={18} className="text-emerald-400" />
                    Tasks ({hireTasks.filter(t => t.status === 'done').length}/{hireTasks.length})
                  </h3>
                  <div className="space-y-2 mb-6">
                    {hireTasks.map(task => (
                      <div key={task.id} className="flex items-center justify-between p-3 bg-white/[0.02] rounded-lg">
                        <div className="flex items-center gap-3">
                          <div className={`w-4 h-4 rounded border-2 flex items-center justify-center ${
                            task.status === 'done' ? 'bg-emerald-500 border-emerald-500' : 'border-slate-500'
                          }`}>
                            {task.status === 'done' && <Icon name="check" size={12} className="text-white" />}
                          </div>
                          <span className={task.status === 'done' ? 'text-slate-400 line-through' : ''}>{task.title}</span>
                        </div>
                        <Badge label={task.phase} variant="neutral" />
                      </div>
                    ))}
                  </div>

                  <h3 className="font-semibold mb-3 flex items-center gap-2">
                    <Icon name="file-text" size={18} className="text-amber-400" />
                    Documents ({hireDocs.filter(d => d.status === 'signed').length}/{hireDocs.length})
                  </h3>
                  <div className="space-y-2">
                    {hireDocs.map(doc => (
                      <div key={doc.id} className="flex items-center justify-between p-3 bg-white/[0.02] rounded-lg">
                        <div className="flex items-center gap-3">
                          <Icon name="file-text" size={16} className="text-slate-400" />
                          <span>{doc.name}</span>
                        </div>
                        <Badge 
                          label={doc.status} 
                          variant={doc.status === 'signed' ? 'positive' : 'neutral'} 
                        />
                      </div>
                    ))}
                  </div>

                  <div className="mt-6 pt-6 border-t border-white/[0.08] flex gap-3">
                    <button 
                      onClick={() => handleSendReminder(hire.id, hire.name)}
                      className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-violet-500/20 text-violet-400 rounded-lg hover:bg-violet-500/30 transition"
                    >
                      <Icon name="bell" size={16} />
                      Send Reminder
                    </button>
                    <button 
                      onClick={() => dispatch('toast', { message: 'Profile updated', type: 'success' })}
                      className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-emerald-500/20 text-emerald-400 rounded-lg hover:bg-emerald-500/30 transition"
                    >
                      <Icon name="check" size={16} />
                      Mark Phase Complete
                    </button>
                  </div>
                </>
              );
            })()}
          </Glass>
        </div>
      )}

      {/* Task Detail Modal */}
      {selectedTask && (
        <div 
          className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4"
          onClick={() => setSelectedTask(null)}
        >
          <Glass 
            className="p-6 max-w-lg w-full"
            onClick={e => e.stopPropagation()}
          >
            <div className="flex items-start justify-between mb-4">
              <h2 className="text-lg font-bold">{selectedTask.title}</h2>
              <button 
                onClick={() => setSelectedTask(null)}
                className="p-2 hover:bg-white/[0.05] rounded-lg transition"
              >
                <Icon name="x" size={20} className="text-slate-400" />
              </button>
            </div>

            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-slate-400">Phase</p>
                  <Badge label={selectedTask.phase} variant="tech" />
                </div>
                <div>
                  <p className="text-sm text-slate-400">Category</p>
                  <Badge label={CATEGORIES.find(c => c.id === selectedTask.category)?.label || selectedTask.category} variant="neutral" />
                </div>
                <div>
                  <p className="text-sm text-slate-400">Assignee</p>
                  <p className="font-medium">{selectedTask.assignee}</p>
                </div>
                <div>
                  <p className="text-sm text-slate-400">Due Date</p>
                  <p className={`font-medium ${new Date(selectedTask.dueDate) < new Date() && selectedTask.status !== 'done' ? 'text-red-400' : ''}`}>
                    {selectedTask.dueDate}
                  </p>
                </div>
              </div>

              <div>
                <p className="text-sm text-slate-400 mb-2">Status</p>
                <div className="flex gap-2">
                  {['pending', 'in-progress', 'done'].map(status => (
                    <button
                      key={status}
                      onClick={() => {
                        setSelectedTask({ ...selectedTask, status });
                        dispatch('toast', { message: `Task marked as ${status}`, type: 'success' });
                      }}
                      className={`px-3 py-1.5 rounded-lg text-sm transition ${
                        selectedTask.status === status 
                          ? 'bg-emerald-500/20 text-emerald-400' 
                          : 'bg-white/[0.05] text-slate-400 hover:text-white'
                      }`}
                    >
                      {status === 'done' ? '✓ Complete' : status.charAt(0).toUpperCase() + status.slice(1)}
                    </button>
                  ))}
                </div>
              </div>

              <div className="pt-4 border-t border-white/[0.08]">
                <button 
                  onClick={() => {
                    handleTaskComplete(selectedTask.id);
                    setSelectedTask(null);
                  }}
                  className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-emerald-500/20 text-emerald-400 rounded-lg hover:bg-emerald-500/30 transition"
                >
                  <Icon name="check-circle" size={16} />
                  Mark Complete
                </button>
              </div>
            </div>
          </Glass>
        </div>
      )}

      {/* Upload Modal */}
      {showUploadModal && (
        <div 
          className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4"
          onClick={() => setShowUploadModal(false)}
        >
          <Glass 
            className="p-6 max-w-lg w-full"
            onClick={e => e.stopPropagation()}
          >
            <div className="flex items-start justify-between mb-4">
              <h2 className="text-lg font-bold">Upload Document</h2>
              <button 
                onClick={() => setShowUploadModal(false)}
                className="p-2 hover:bg-white/[0.05] rounded-lg transition"
              >
                <Icon name="x" size={20} className="text-slate-400" />
              </button>
            </div>

            <div className="border-2 border-dashed border-white/[0.08] rounded-xl p-8 text-center mb-4">
              <Icon name="upload" size={40} className="text-slate-400 mx-auto mb-4" />
              <p className="text-slate-400 mb-2">Drag and drop files here, or click to browse</p>
              <p className="text-xs text-slate-500">PDF, PNG, JPG up to 10MB</p>
              <input 
                type="file" 
                multiple 
                onChange={(e) => e.target.files && handleFileUpload(e.target.files)}
                className="hidden" 
                id="file-upload"
              />
              <label 
                htmlFor="file-upload"
                className="inline-flex items-center gap-2 mt-4 px-4 py-2 bg-violet-500/20 text-violet-400 rounded-lg text-sm cursor-pointer hover:bg-violet-500/30 transition"
              >
                <Icon name="upload" size={16} />
                Select Files
              </label>
            </div>

            <div className="flex gap-3">
              <button 
                onClick={() => setShowUploadModal(false)}
                className="flex-1 px-4 py-2 bg-white/[0.05] text-slate-400 rounded-lg hover:bg-white/[0.08] transition"
              >
                Cancel
              </button>
              <button 
                onClick={() => {
                  dispatch('toast', { message: 'Document uploaded successfully', type: 'success' });
                  setShowUploadModal(false);
                }}
                className="flex-1 px-4 py-2 bg-violet-500/20 text-violet-400 rounded-lg hover:bg-violet-500/30 transition"
              >
                Upload
              </button>
            </div>
          </Glass>
        </div>
      )}

      {/* Add Task Modal */}
      {showTaskModal && (
        <div 
          className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4"
          onClick={() => setShowTaskModal(false)}
        >
          <Glass 
            className="p-6 max-w-lg w-full"
            onClick={e => e.stopPropagation()}
          >
            <div className="flex items-start justify-between mb-4">
              <h2 className="text-lg font-bold">Add New Task</h2>
              <button 
                onClick={() => setShowTaskModal(false)}
                className="p-2 hover:bg-white/[0.05] rounded-lg transition"
              >
                <Icon name="x" size={20} className="text-slate-400" />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm text-slate-400 mb-2">Task Title</label>
                <input 
                  type="text" 
                  className="w-full bg-white/[0.05] border border-white/[0.08] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-violet-500/50"
                  placeholder="Enter task title"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm text-slate-400 mb-2">Phase</label>
                  <select className="w-full bg-white/[0.05] border border-white/[0.08] rounded-lg px-4 py-2 text-sm">
                    {PHASES.map(phase => (
                      <option key={phase} value={phase}>{phase}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm text-slate-400 mb-2">Category</label>
                  <select className="w-full bg-white/[0.05] border border-white/[0.08] rounded-lg px-4 py-2 text-sm">
                    {CATEGORIES.map(cat => (
                      <option key={cat.id} value={cat.id}>{cat.label}</option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm text-slate-400 mb-2">Assignee</label>
                  <input 
                    type="text" 
                    className="w-full bg-white/[0.05] border border-white/[0.08] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-violet-500/50"
                    placeholder="Who is responsible?"
                  />
                </div>
                <div>
                  <label className="block text-sm text-slate-400 mb-2">Due Date</label>
                  <input 
                    type="date" 
                    className="w-full bg-white/[0.05] border border-white/[0.08] rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-violet-500/50"
                  />
                </div>
              </div>

              <div className="pt-4 border-t border-white/[0.08] flex gap-3">
                <button 
                  onClick={() => setShowTaskModal(false)}
                  className="flex-1 px-4 py-2 bg-white/[0.05] text-slate-400 rounded-lg hover:bg-white/[0.08] transition"
                >
                  Cancel
                </button>
                <button 
                  onClick={() => {
                    dispatch('toast', { message: 'Task created successfully', type: 'success' });
                    setShowTaskModal(false);
                  }}
                  className="flex-1 px-4 py-2 bg-emerald-500/20 text-emerald-400 rounded-lg hover:bg-emerald-500/30 transition"
                >
                  Create Task
                </button>
              </div>
            </div>
          </Glass>
        </div>
      )}
    </div>
  );
}