import React, { useState, useEffect, useMemo } from 'react';
import { 
  Home, FileText, PlusCircle, Users, BarChart2, Settings, LogOut, Menu, X, 
  AlertCircle, CheckCircle, Clock, ChevronRight, Search, Filter, Paperclip, 
  Send, Download, MapPin, Tag, MessageSquare, Briefcase, Shield, ShieldAlert
} from 'lucide-react';

// --- MOCK DATA ---
const MOCK_USERS = [
  { id: 'U1', name: 'Ahmad Faiz', email: 'ahmad@student.edu.my', role: 'user', avatar: 'https://i.pravatar.cc/150?u=U1' },
  { id: 'U2', name: 'Siti Nurhaliza', email: 'siti@student.edu.my', role: 'user', avatar: 'https://i.pravatar.cc/150?u=U2' },
  { id: 'T1', name: 'Technician Kamarul', email: 'kamarul@tech.edu.my', role: 'technician', avatar: 'https://i.pravatar.cc/150?u=T1' },
  { id: 'T2', name: 'Technician Ravi', email: 'ravi@tech.edu.my', role: 'technician', avatar: 'https://i.pravatar.cc/150?u=T2' },
  { id: 'A1', name: 'Admin Sarah', email: 'sarah@admin.edu.my', role: 'admin', avatar: 'https://i.pravatar.cc/150?u=A1' },
  { id: 'SA1', name: 'Super Admin Johan', email: 'johan@admin.edu.my', role: 'super_admin', avatar: 'https://i.pravatar.cc/150?u=SA1' },
];

const MOCK_CATEGORIES = ['Hardware', 'Software', 'Network', 'Facilities', 'Other'];
const MOCK_LOCATIONS = ['Makmal Komputer 1', 'Makmal Komputer 2', 'Bilik Kuliah A', 'Dewan Kuliah Utama', 'Pejabat Pentadbiran'];

const initialComplaints = [
  { id: 'CMP-001', title: 'Projector not turning on', description: 'The projector in Bilik Kuliah A is completely dead. Power cable seems fine.', category: 'Hardware', location: 'Bilik Kuliah A', priority: 'High', status: 'Pending', reporterId: 'U1', date: '2026-04-25T08:30:00Z', assigneeId: null, comments: [] },
  { id: 'CMP-002', title: 'WiFi disconnects randomly', description: 'Network keeps dropping every 10 minutes in Makmal 2.', category: 'Network', location: 'Makmal Komputer 2', priority: 'Medium', status: 'In Progress', reporterId: 'U2', date: '2026-04-24T10:15:00Z', assigneeId: 'T1', comments: [{ id: 1, author: 'Technician Kamarul', text: 'Checking the router configuration now.', time: '2026-04-25T09:00:00Z' }] },
  { id: 'CMP-003', title: 'Aircon leaking water', description: 'Water is dripping near the front desk.', category: 'Facilities', location: 'Pejabat Pentadbiran', priority: 'High', status: 'Resolved', reporterId: 'U1', date: '2026-04-20T14:20:00Z', assigneeId: 'T2', comments: [{ id: 2, author: 'Technician Ravi', text: 'Pipe cleared and filter replaced.', time: '2026-04-21T11:00:00Z' }] },
  { id: 'CMP-004', title: 'AutoCAD license expired', description: 'Cannot open AutoCAD on PC 12.', category: 'Software', location: 'Makmal Komputer 1', priority: 'Low', status: 'Pending', reporterId: 'U2', date: '2026-04-26T09:05:00Z', assigneeId: null, comments: [] },
  { id: 'CMP-005', title: 'Broken chair', description: 'Chair leg is broken at row 3.', category: 'Facilities', location: 'Dewan Kuliah Utama', priority: 'Low', status: 'Resolved', reporterId: 'U1', date: '2026-04-15T10:00:00Z', assigneeId: 'T2', comments: [] },
];

// --- UTILITY COMPONENTS ---

const Badge = ({ children, variant = 'default' }) => {
  const styles = {
    default: 'bg-slate-100 text-slate-700 border-slate-200',
    success: 'bg-green-100 text-green-700 border-green-200',
    warning: 'bg-amber-100 text-amber-700 border-amber-200',
    danger: 'bg-red-100 text-red-700 border-red-200',
    primary: 'bg-blue-100 text-blue-700 border-blue-200',
  };
  return (
    <span className={`px-2.5 py-1 rounded-full text-xs font-medium border ${styles[variant]} flex items-center w-fit`}>
      {children}
    </span>
  );
};

const Card = ({ children, className = '', noPadding = false }) => (
  <div className={`bg-white rounded-2xl shadow-sm border border-slate-100 ${noPadding ? '' : 'p-6'} ${className}`}>
    {children}
  </div>
);

const Button = ({ children, variant = 'primary', icon: Icon, className = '', ...props }) => {
  const baseStyle = "inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium transition-colors rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2";
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 shadow-sm",
    secondary: "bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 focus:ring-slate-500",
    danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",
    ghost: "bg-transparent text-slate-600 hover:bg-slate-100 focus:ring-slate-500"
  };
  return (
    <button className={`${baseStyle} ${variants[variant]} ${className}`} {...props}>
      {Icon && <Icon className="w-4 h-4" />}
      {children}
    </button>
  );
};

const StatusBadge = ({ status }) => {
  if (status === 'Resolved') return <Badge variant="success"><CheckCircle className="w-3 h-3 mr-1"/> Resolved</Badge>;
  if (status === 'In Progress') return <Badge variant="warning"><Clock className="w-3 h-3 mr-1"/> In Progress</Badge>;
  return <Badge variant="danger"><AlertCircle className="w-3 h-3 mr-1"/> Pending</Badge>;
};

const PriorityBadge = ({ priority }) => {
  if (priority === 'High') return <Badge variant="danger">High</Badge>;
  if (priority === 'Medium') return <Badge variant="warning">Medium</Badge>;
  return <Badge variant="default">Low</Badge>;
};

// --- MAIN APPLICATION ---

export default function App() {
  const [currentUser, setCurrentUser] = useState(null);
  const [currentRoute, setCurrentRoute] = useState({ path: '/login', params: {} });
  const [complaints, setComplaints] = useState(initialComplaints);
  const [users, setUsers] = useState(MOCK_USERS);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

// Navigation Helper
  const navigate = (path, params = {}) => {
    setCurrentRoute({ path, params });
    setIsMobileMenuOpen(false);
  };

// Auth Helpers
  const login = (email, password) => {
    // Mock login logic
    const user = users.find(u => u.email === email);
    if (user) {
      setCurrentUser(user);
      navigate(user.role === 'user' ? '/dashboard' : (user.role === 'technician' ? '/tech-dashboard' : '/admin-dashboard'));
    } else {
      alert("Invalid credentials. Try 'ahmad@student.edu.my', 'kamarul@tech.edu.my', or 'sarah@admin.edu.my'");
    }
  };

const logout = () => {
    setCurrentUser(null);
    navigate('/login');
  };

// Render Router
  let content;
  if (!currentUser && currentRoute.path === '/register') content = <RegisterPage navigate={navigate} />;
  else if (!currentUser) content = <LoginPage login={login} navigate={navigate} />;
  else {
    // Authenticated Layout
    content = (
      <div className="flex h-screen bg-slate-50 text-slate-800 font-sans">
        {/* Sidebar */}
        <aside className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-slate-200 transform transition-transform duration-200 ease-in-out ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} md:relative md:translate-x-0 flex flex-col`}>
          <div className="p-6 border-b border-slate-100 flex justify-between items-center">
            <div>
              <h1 className="text-lg font-bold text-slate-900 leading-tight">Faculty<br/>Aduan System</h1>
              <p className="text-xs text-blue-600 font-medium mt-1">Kejuruteraan</p>
            </div>
            <button className="md:hidden text-slate-500" onClick={() => setIsMobileMenuOpen(false)}>
              <X className="w-5 h-5" />
            </button>
          </div>
          <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
            <SidebarLink icon={Home} label="Dashboard" 
              active={['/dashboard', '/tech-dashboard', '/admin-dashboard'].includes(currentRoute.path)} 
              onClick={() => navigate(currentUser.role === 'user' ? '/dashboard' : (currentUser.role === 'technician' ? '/tech-dashboard' : '/admin-dashboard'))} 
            />

{currentUser.role === 'user' && (
              <>
                <SidebarLink icon={PlusCircle} label="Submit Complaint" active={currentRoute.path === '/submit'} onClick={() => navigate('/submit')} />
                <SidebarLink icon={FileText} label="My Complaints" active={currentRoute.path === '/my-complaints'} onClick={() => navigate('/my-complaints')} />
              </>
            )}

{(currentUser.role === 'admin' || currentUser.role === 'super_admin') && (
              <>
                <SidebarLink icon={Briefcase} label="Manage Complaints" active={currentRoute.path === '/manage-complaints'} onClick={() => navigate('/manage-complaints')} />
                <SidebarLink icon={BarChart2} label="Reports & KPI" active={currentRoute.path === '/reports'} onClick={() => navigate('/reports')} />
              </>
            )}

{currentUser.role === 'super_admin' && (
              <SidebarLink icon={Users} label="User Management" active={currentRoute.path === '/users'} onClick={() => navigate('/users')} />
            )}
          </nav>
          <div className="p-4 border-t border-slate-100">
            <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-xl mb-3">
              <img src={currentUser.avatar} alt="User" className="w-10 h-10 rounded-full" />
              <div className="overflow-hidden">
                <p className="text-sm font-medium text-slate-900 truncate">{currentUser.name}</p>
                <p className="text-xs text-slate-500 capitalize">{currentUser.role.replace('_', ' ')}</p>
              </div>
            </div>
            <Button variant="ghost" icon={LogOut} className="w-full justify-start text-red-600 hover:text-red-700 hover:bg-red-50" onClick={logout}>
              Log out
            </Button>
          </div>
        </aside>

{/* Main Content */}
        <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
          {/* Topbar for mobile */}
          <header className="bg-white border-b border-slate-200 px-4 py-3 flex items-center justify-between md:hidden">
            <div className="font-bold text-slate-900">Aduan System</div>
            <button onClick={() => setIsMobileMenuOpen(true)} className="p-2 -mr-2 text-slate-600">
              <Menu className="w-6 h-6" />
            </button>
          </header>

<div className="flex-1 overflow-auto p-4 md:p-8">
            <div className="max-w-6xl mx-auto">
              {/* Routing Logic */}
              {currentRoute.path === '/dashboard' && <UserDashboard user={currentUser} complaints={complaints} navigate={navigate} />}
              {currentRoute.path === '/submit' && <SubmitComplaint user={currentUser} complaints={complaints} setComplaints={setComplaints} navigate={navigate} />}
              {currentRoute.path === '/my-complaints' && <ComplaintList user={currentUser} complaints={complaints} navigate={navigate} />}
              {currentRoute.path === '/complaint' && <ComplaintDetail id={currentRoute.params.id} user={currentUser} complaints={complaints} setComplaints={setComplaints} users={users} navigate={navigate} />}

{currentRoute.path === '/tech-dashboard' && <TechnicianDashboard user={currentUser} complaints={complaints} navigate={navigate} />}

{currentRoute.path === '/admin-dashboard' && <AdminDashboard complaints={complaints} navigate={navigate} />}
              {currentRoute.path === '/manage-complaints' && <AdminComplaintManagement complaints={complaints} users={users} navigate={navigate} />}

{currentRoute.path === '/reports' && <ReportPage complaints={complaints} />}

{currentRoute.path === '/users' && <UserManagement users={users} setUsers={setUsers} />}
            </div>
          </div>
        </main>
      </div>
    );
  }

return content;
}

const SidebarLink = ({ icon: Icon, label, active, onClick }) => (
  <button
    onClick={onClick}
    className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-colors ${
      active 
        ? 'bg-blue-50 text-blue-700' 
        : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
    }`}
  >
    <Icon className={`w-5 h-5 ${active ? 'text-blue-600' : 'text-slate-400'}`} />
    {label}
  </button>
);

// --- PAGES ---

// 1. LOGIN PAGE
const LoginPage = ({ login, navigate }) => {
  const [email, setEmail] = useState('ahmad@student.edu.my');
  const [password, setPassword] = useState('password');

return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <div className="text-center mb-8">
          <div className="bg-blue-100 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <Shield className="w-8 h-8 text-blue-600" />
          </div>
          <h1 className="text-2xl font-bold text-slate-900">Welcome Back</h1>
          <p className="text-slate-500 mt-2">Faculty of Engineering Complaint System</p>
        </div>
        <form onSubmit={(e) => { e.preventDefault(); login(email, password); }} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" required />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Password</label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" required />
          </div>
          <div className="flex items-center justify-between text-sm">
             <label className="flex items-center gap-2">
               <input type="checkbox" className="rounded text-blue-600 focus:ring-blue-500" />
               <span className="text-slate-600">Remember me</span>
             </label>
             <a href="#" className="text-blue-600 hover:underline">Forgot password?</a>
          </div>
          <Button type="submit" className="w-full py-2.5 mt-2">Sign In</Button>
        </form>
        <p className="text-center text-sm text-slate-500 mt-6">
          Don't have an account? <button onClick={() => navigate('/register')} className="text-blue-600 font-medium hover:underline">Register here</button>
        </p>

{/* Helper for demo */}
        <div className="mt-8 p-4 bg-slate-100 rounded-lg text-xs text-slate-600 space-y-2">
          <p className="font-semibold text-slate-700">Demo Accounts:</p>
          <p>User: ahmad@student.edu.my</p>
          <p>Tech: kamarul@tech.edu.my</p>
          <p>Admin: sarah@admin.edu.my</p>
          <p>Super: johan@admin.edu.my</p>
          <p className="italic text-slate-400">(Password can be anything)</p>
        </div>
      </Card>
    </div>
  );
};

// 2. REGISTER PAGE
const RegisterPage = ({ navigate }) => {
  return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <div className="text-center mb-8">
          <h1 className="text-2xl font-bold text-slate-900">Create Account</h1>
          <p className="text-slate-500 mt-2">Register as a new student or staff</p>
        </div>
        <form onSubmit={(e) => { e.preventDefault(); alert('Registration successful! Please login.'); navigate('/login'); }} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Full Name</label>
            <input type="text" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" required />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Email Address</label>
            <input type="email" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" required />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Password</label>
            <input type="password" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" required />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Confirm Password</label>
            <input type="password" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" required />
          </div>
          <div className="p-3 bg-blue-50 rounded-lg flex gap-3 text-sm text-blue-800">
            <AlertCircle className="w-5 h-5 flex-shrink-0" />
            <p>All new accounts are registered as normal users. Contact an admin if you need staff privileges.</p>
          </div>
          <Button type="submit" className="w-full py-2.5">Register Account</Button>
        </form>
        <p className="text-center text-sm text-slate-500 mt-6">
          Already have an account? <button onClick={() => navigate('/login')} className="text-blue-600 font-medium hover:underline">Sign in</button>
        </p>
      </Card>
    </div>
  );
};

// 3. USER DASHBOARD
const UserDashboard = ({ user, complaints, navigate }) => {
  const myComplaints = complaints.filter(c => c.reporterId === user.id);
  const pending = myComplaints.filter(c => c.status === 'Pending').length;
  const inProgress = myComplaints.filter(c => c.status === 'In Progress').length;
  const resolved = myComplaints.filter(c => c.status === 'Resolved').length;

return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Welcome, {user.name}</h1>
          <p className="text-slate-500">Here is an overview of your submitted complaints.</p>
        </div>
        <Button icon={PlusCircle} onClick={() => navigate('/submit')}>New Complaint</Button>
      </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <StatCard title="Total Submitted" value={myComplaints.length} icon={FileText} color="bg-blue-500" />
        <StatCard title="Pending" value={pending} icon={AlertCircle} color="bg-red-500" />
        <StatCard title="In Progress" value={inProgress} icon={Clock} color="bg-amber-500" />
        <StatCard title="Resolved" value={resolved} icon={CheckCircle} color="bg-green-500" />
      </div>

<Card noPadding>
        <div className="p-6 border-b border-slate-100 flex justify-between items-center">
          <h2 className="text-lg font-semibold">Recent Complaints</h2>
          <Button variant="ghost" className="text-sm" onClick={() => navigate('/my-complaints')}>View All</Button>
        </div>
        <div className="divide-y divide-slate-100">
          {myComplaints.slice(0, 3).map(complaint => (
            <ComplaintRow key={complaint.id} complaint={complaint} onClick={() => navigate('/complaint', { id: complaint.id })} />
          ))}
          {myComplaints.length === 0 && (
            <div className="p-8 text-center text-slate-500">
              <div className="mx-auto w-12 h-12 bg-slate-50 rounded-full flex items-center justify-center mb-3">
                <FileText className="w-6 h-6 text-slate-400" />
              </div>
              <p>You haven't submitted any complaints yet.</p>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
};

const StatCard = ({ title, value, icon: Icon, color }) => (
  <Card className="flex items-center gap-4">
    <div className={`w-12 h-12 rounded-2xl flex items-center justify-center text-white ${color}`}>
      <Icon className="w-6 h-6" />
    </div>
    <div>
      <p className="text-sm text-slate-500 font-medium">{title}</p>
      <p className="text-2xl font-bold text-slate-900">{value}</p>
    </div>
  </Card>
);

const ComplaintRow = ({ complaint, onClick }) => (
  <div onClick={onClick} className="p-4 hover:bg-slate-50 cursor-pointer transition-colors flex items-center gap-4">
    <div className="flex-1 min-w-0">
      <div className="flex items-center gap-3 mb-1">
        <p className="text-sm font-semibold text-slate-900 truncate">{complaint.title}</p>
        <span className="text-xs text-slate-400 font-medium">{complaint.id}</span>
      </div>
      <div className="flex flex-wrap gap-3 text-xs text-slate-500">
        <span className="flex items-center gap-1"><Tag className="w-3 h-3"/> {complaint.category}</span>
        <span className="flex items-center gap-1"><MapPin className="w-3 h-3"/> {complaint.location}</span>
        <span>{new Date(complaint.date).toLocaleDateString()}</span>
      </div>
    </div>
    <div className="flex items-center gap-3">
      <PriorityBadge priority={complaint.priority} />
      <StatusBadge status={complaint.status} />
      <ChevronRight className="w-5 h-5 text-slate-300 hidden sm:block" />
    </div>
  </div>
);

// 4. SUBMIT COMPLAINT PAGE
const SubmitComplaint = ({ user, complaints, setComplaints, navigate }) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const newComplaint = {
      id: `CMP-00${complaints.length + 1}`,
      title: formData.get('title'),
      description: formData.get('description'),
      category: formData.get('category'),
      location: formData.get('location'),
      priority: formData.get('priority'),
      status: 'Pending',
      reporterId: user.id,
      date: new Date().toISOString(),
      assigneeId: null,
      comments: []
    };
    setComplaints([newComplaint, ...complaints]);
    navigate('/dashboard');
  };

return (
    <div className="max-w-3xl mx-auto space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Submit New Complaint</h1>
        <p className="text-slate-500">Please provide details about the issue you are facing.</p>
      </div>

<Card>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div className="sm:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Complaint Title</label>
              <input name="title" type="text" placeholder="e.g., Projector not working" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" required />
            </div>

<div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Category</label>
              <select name="category" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-white" required>
                <option value="">Select category...</option>
                {MOCK_CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>

<div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Location</label>
              <select name="location" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-white" required>
                <option value="">Select location...</option>
                {MOCK_LOCATIONS.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>

<div>
              <label className="block text-sm font-medium text-slate-700 mb-1">Priority Level</label>
              <select name="priority" className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none bg-white">
                <option value="Low">Low</option>
                <option value="Medium">Medium</option>
                <option value="High">High</option>
              </select>
            </div>

<div className="sm:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Description</label>
              <textarea name="description" rows="4" placeholder="Describe the issue in detail..." className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none resize-none" required></textarea>
            </div>

<div className="sm:col-span-2">
              <label className="block text-sm font-medium text-slate-700 mb-1">Attachment (Optional)</label>
              <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-slate-300 border-dashed rounded-lg hover:border-blue-500 transition-colors bg-slate-50 cursor-pointer">
                <div className="space-y-1 text-center">
                  <Paperclip className="mx-auto h-8 w-8 text-slate-400" />
                  <div className="flex text-sm text-slate-600 justify-center">
                    <span className="relative cursor-pointer bg-transparent rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
                      Upload a file
                    </span>
                    <p className="pl-1">or drag and drop</p>
                  </div>
                  <p className="text-xs text-slate-500">PNG, JPG, PDF up to 10MB</p>
                </div>
              </div>
            </div>
          </div>

<div className="flex justify-end gap-3 pt-4 border-t border-slate-100">
            <Button type="button" variant="ghost" onClick={() => navigate('/dashboard')}>Cancel</Button>
            <Button type="submit" icon={Send}>Submit Complaint</Button>
          </div>
        </form>
      </Card>
    </div>
  );
};

// 5. USER COMPLAINT LIST
const ComplaintList = ({ user, complaints, navigate }) => {
  const myComplaints = complaints.filter(c => c.reporterId === user.id);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState('All');

const filtered = myComplaints.filter(c => {
    const matchSearch = c.title.toLowerCase().includes(searchTerm.toLowerCase()) || c.id.toLowerCase().includes(searchTerm.toLowerCase());
    const matchStatus = filterStatus === 'All' || c.status === filterStatus;
    return matchSearch && matchStatus;
  });

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">My Complaints</h1>
        <p className="text-slate-500">Track the status of all your submitted issues.</p>
      </div>

<Card noPadding>
        <div className="p-4 border-b border-slate-100 flex flex-col sm:flex-row gap-4 justify-between">
          <div className="relative flex-1 max-w-md">
            <Search className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
            <input 
              type="text" placeholder="Search by title or ID..." 
              value={searchTerm} onChange={e => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" 
            />
          </div>
          <div className="flex items-center gap-2">
            <Filter className="w-5 h-5 text-slate-400" />
            <select 
              value={filterStatus} onChange={e => setFilterStatus(e.target.value)}
              className="py-2 pl-3 pr-8 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 bg-white"
            >
              <option value="All">All Statuses</option>
              <option value="Pending">Pending</option>
              <option value="In Progress">In Progress</option>
              <option value="Resolved">Resolved</option>
            </select>
          </div>
        </div>

<div className="divide-y divide-slate-100">
          {filtered.length > 0 ? filtered.map(complaint => (
            <ComplaintRow key={complaint.id} complaint={complaint} onClick={() => navigate('/complaint', { id: complaint.id })} />
          )) : (
            <div className="p-8 text-center text-slate-500">No complaints found matching your criteria.</div>
          )}
        </div>
      </Card>
    </div>
  );
};

// 6. COMPLAINT DETAIL PAGE
const ComplaintDetail = ({ id, user, complaints, setComplaints, users, navigate }) => {
  const complaintIndex = complaints.findIndex(c => c.id === id);
  const complaint = complaints[complaintIndex];
  const [commentText, setCommentText] = useState('');

if (!complaint) return <div>Complaint not found</div>;

const reporter = users.find(u => u.id === complaint.reporterId);
  const assignee = users.find(u => u.id === complaint.assigneeId);
  const isAdminOrTech = user.role === 'admin' || user.role === 'super_admin' || user.role === 'technician';

const handleUpdateStatus = (newStatus) => {
    const updated = [...complaints];
    updated[complaintIndex] = { ...complaint, status: newStatus };
    setComplaints(updated);
  };

const handleAssign = (techId) => {
    const updated = [...complaints];
    updated[complaintIndex] = { ...complaint, assigneeId: techId, status: techId ? 'In Progress' : 'Pending' };
    setComplaints(updated);
  };

const handleAddComment = () => {
    if(!commentText.trim()) return;
    const newComment = {
      id: Date.now(),
      author: user.name,
      text: commentText,
      time: new Date().toISOString()
    };
    const updated = [...complaints];
    updated[complaintIndex].comments.push(newComment);
    setComplaints(updated);
    setCommentText('');
  };

return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4 text-sm text-slate-500 mb-4">
        <button onClick={() => navigate(-1)} className="hover:text-slate-900 transition-colors">Back</button>
        <span>/</span>
        <span className="font-medium text-slate-900">{complaint.id}</span>
      </div>

<div className="flex flex-col md:flex-row gap-6">
        {/* Main Content */}
        <div className="flex-1 space-y-6">
          <Card>
            <div className="flex justify-between items-start mb-4">
              <div>
                <h1 className="text-2xl font-bold text-slate-900 mb-2">{complaint.title}</h1>
                <div className="flex flex-wrap gap-3 text-sm text-slate-500">
                  <span className="flex items-center gap-1"><Tag className="w-4 h-4"/> {complaint.category}</span>
                  <span className="flex items-center gap-1"><MapPin className="w-4 h-4"/> {complaint.location}</span>
                  <span className="flex items-center gap-1"><Clock className="w-4 h-4"/> {new Date(complaint.date).toLocaleString()}</span>
                </div>
              </div>
            </div>

<div className="prose prose-slate max-w-none mb-8">
              <h3 className="text-sm font-semibold text-slate-900 uppercase tracking-wider mb-2">Description</h3>
              <p className="text-slate-700 whitespace-pre-wrap bg-slate-50 p-4 rounded-xl border border-slate-100">{complaint.description}</p>
            </div>

{/* Admin/Tech Controls */}
            {isAdminOrTech && (
              <div className="bg-blue-50 rounded-xl p-4 border border-blue-100 space-y-4">
                <h3 className="text-sm font-semibold text-blue-900 uppercase tracking-wider flex items-center gap-2">
                  <ShieldAlert className="w-4 h-4" /> Management Actions
                </h3>
                <div className="flex flex-wrap gap-4">
                  {(user.role === 'admin' || user.role === 'super_admin') && (
                    <div className="flex-1 min-w-[200px]">
                      <label className="block text-xs font-medium text-blue-800 mb-1">Assign Technician</label>
                      <select 
                        value={complaint.assigneeId || ''} 
                        onChange={e => handleAssign(e.target.value)}
                        className="w-full text-sm py-2 px-3 border border-blue-200 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 bg-white"
                      >
                        <option value="">Unassigned</option>
                        {users.filter(u => u.role === 'technician').map(t => (
                          <option key={t.id} value={t.id}>{t.name}</option>
                        ))}
                      </select>
                    </div>
                  )}
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-xs font-medium text-blue-800 mb-1">Update Status</label>
                    <div className="flex gap-2">
                      {['Pending', 'In Progress', 'Resolved'].map(s => (
                        <button 
                          key={s} onClick={() => handleUpdateStatus(s)}
                          className={`flex-1 py-1.5 px-3 text-xs font-medium rounded-lg border transition-colors ${complaint.status === s ? 'bg-blue-600 text-white border-blue-600 shadow-sm' : 'bg-white text-slate-600 border-slate-300 hover:bg-slate-50'}`}
                        >
                          {s}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            )}
          </Card>

{/* Comments Section */}
          <Card>
            <h3 className="text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
              <MessageSquare className="w-5 h-5 text-slate-400" /> Discussion
            </h3>
            <div className="space-y-4 mb-6">
              {complaint.comments.length === 0 ? (
                <p className="text-sm text-slate-500 text-center py-4">No comments yet.</p>
              ) : (
                complaint.comments.map(c => (
                  <div key={c.id} className="flex gap-4">
                    <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-bold text-xs flex-shrink-0">
                      {c.author.charAt(0)}
                    </div>
                    <div className="bg-slate-50 rounded-2xl rounded-tl-none p-4 flex-1">
                      <div className="flex justify-between items-baseline mb-1">
                        <span className="font-semibold text-sm text-slate-900">{c.author}</span>
                        <span className="text-xs text-slate-400">{new Date(c.time).toLocaleString()}</span>
                      </div>
                      <p className="text-sm text-slate-700">{c.text}</p>
                    </div>
                  </div>
                ))
              )}
            </div>

<div className="flex gap-3 items-start">
              <img src={user.avatar} alt="" className="w-8 h-8 rounded-full hidden sm:block" />
              <div className="flex-1">
                <textarea 
                  value={commentText} onChange={e => setCommentText(e.target.value)}
                  placeholder="Add a comment or update..." 
                  className="w-full px-4 py-3 border border-slate-300 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 resize-none text-sm"
                  rows="2"
                />
                <div className="flex justify-end mt-2">
                  <Button size="sm" onClick={handleAddComment} disabled={!commentText.trim()}>Post Comment</Button>
                </div>
              </div>
            </div>
          </Card>
        </div>

{/* Sidebar Info */}
        <div className="w-full md:w-72 space-y-6">
          <Card className="space-y-6">
            <div>
              <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Status</h4>
              <StatusBadge status={complaint.status} />
            </div>
            <div>
              <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Priority</h4>
              <PriorityBadge priority={complaint.priority} />
            </div>

<hr className="border-slate-100" />

<div>
              <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Reporter</h4>
              <div className="flex items-center gap-3">
                <img src={reporter?.avatar} className="w-10 h-10 rounded-full" alt="Reporter" />
                <div>
                  <p className="text-sm font-medium text-slate-900">{reporter?.name || 'Unknown'}</p>
                  <p className="text-xs text-slate-500">{reporter?.email}</p>
                </div>
              </div>
            </div>

<hr className="border-slate-100" />

<div>
              <h4 className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Assignee</h4>
              {assignee ? (
                <div className="flex items-center gap-3">
                  <img src={assignee.avatar} className="w-10 h-10 rounded-full" alt="Assignee" />
                  <div>
                    <p className="text-sm font-medium text-slate-900">{assignee.name}</p>
                    <p className="text-xs text-slate-500">Technician</p>
                  </div>
                </div>
              ) : (
                <p className="text-sm text-slate-500 italic">Unassigned</p>
              )}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

// 7. TECHNICIAN DASHBOARD
const TechnicianDashboard = ({ user, complaints, navigate }) => {
  const assignedTasks = complaints.filter(c => c.assigneeId === user.id);
  const pending = assignedTasks.filter(c => c.status !== 'Resolved');
  const completed = assignedTasks.filter(c => c.status === 'Resolved');

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Technician Workspace</h1>
        <p className="text-slate-500">Manage your assigned maintenance tasks.</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <StatCard title="Total Assigned" value={assignedTasks.length} icon={Briefcase} color="bg-blue-500" />
        <StatCard title="Active Tasks" value={pending.length} icon={AlertCircle} color="bg-amber-500" />
        <StatCard title="Completed" value={completed.length} icon={CheckCircle} color="bg-green-500" />
      </div>

<Card noPadding>
        <div className="p-4 border-b border-slate-100 bg-slate-50 rounded-t-2xl">
          <h2 className="text-lg font-semibold text-slate-800">Your Active Tasks</h2>
        </div>
        <div className="divide-y divide-slate-100">
          {pending.length > 0 ? pending.map(task => (
            <div key={task.id} className="p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-slate-50 transition-colors">
               <div>
                  <div className="flex items-center gap-3 mb-2">
                    <p className="font-semibold text-slate-900">{task.title}</p>
                    <PriorityBadge priority={task.priority} />
                  </div>
                  <div className="text-sm text-slate-500 flex flex-wrap gap-4">
                    <span className="flex items-center gap-1"><MapPin className="w-4 h-4"/> {task.location}</span>
                    <span className="flex items-center gap-1"><Tag className="w-4 h-4"/> {task.category}</span>
                    <span className="flex items-center gap-1 text-slate-400"><Clock className="w-4 h-4"/> {new Date(task.date).toLocaleDateString()}</span>
                  </div>
               </div>
               <div className="flex gap-2">
                 <Button variant="secondary" onClick={() => navigate('/complaint', { id: task.id })}>View Details</Button>
               </div>
            </div>
          )) : (
            <div className="p-8 text-center text-slate-500">You have no active assigned tasks.</div>
          )}
        </div>
      </Card>
    </div>
  );
};

// 8 & 9. ADMIN DASHBOARD & COMPLAINT MANAGEMENT
const AdminDashboard = ({ complaints, navigate }) => {
  const total = complaints.length;
  const resolved = complaints.filter(c => c.status === 'Resolved').length;
  const pending = complaints.filter(c => c.status === 'Pending').length;
  const resolutionRate = total > 0 ? Math.round((resolved / total) * 100) : 0;

return (
    <div className="space-y-6">
      <div className="flex justify-between items-end">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Admin Dashboard</h1>
          <p className="text-slate-500">System overview and key performance indicators.</p>
        </div>
        <Button onClick={() => navigate('/reports')} icon={BarChart2} variant="secondary">Full Report</Button>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatCard title="Total Complaints" value={total} icon={FileText} color="bg-blue-600" />
        <StatCard title="Resolution Rate" value={`${resolutionRate}%`} icon={CheckCircle} color="bg-emerald-500" />
        <StatCard title="Pending Review" value={pending} icon={AlertCircle} color="bg-red-500" />
        <StatCard title="Avg Resolution Time" value="2.4 days" icon={Clock} color="bg-indigo-500" />
      </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
           <h3 className="font-bold text-slate-800 mb-4">Recent Submissions</h3>
           <div className="space-y-4">
              {complaints.slice(0, 4).map(c => (
                <div key={c.id} className="flex justify-between items-center p-3 rounded-xl border border-slate-100 hover:border-blue-100 transition-colors cursor-pointer" onClick={() => navigate('/complaint', {id: c.id})}>
                  <div className="min-w-0 pr-4">
                    <p className="text-sm font-semibold text-slate-900 truncate">{c.title}</p>
                    <p className="text-xs text-slate-500">{c.id} • {c.category}</p>
                  </div>
                  <StatusBadge status={c.status} />
                </div>
              ))}
           </div>
        </Card>

{/* Simple inline chart for Dashboard */}
        <Card>
          <h3 className="font-bold text-slate-800 mb-4">Complaints by Category</h3>
          <div className="flex items-center gap-8 h-48">
             {/* CSS Pie Chart */}
             <div className="w-32 h-32 rounded-full shadow-inner flex-shrink-0" style={{
               background: 'conic-gradient(#3b82f6 0% 40%, #10b981 40% 65%, #f59e0b 65% 85%, #8b5cf6 85% 100%)'
             }}></div>
             <div className="space-y-2 text-sm flex-1">
                <div className="flex justify-between items-center"><span className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-blue-500"></div>Hardware</span> <span className="font-semibold">40%</span></div>
                <div className="flex justify-between items-center"><span className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-emerald-500"></div>Facilities</span> <span className="font-semibold">25%</span></div>
                <div className="flex justify-between items-center"><span className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-amber-500"></div>Network</span> <span className="font-semibold">20%</span></div>
                <div className="flex justify-between items-center"><span className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-violet-500"></div>Software</span> <span className="font-semibold">15%</span></div>
             </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

const AdminComplaintManagement = ({ complaints, users, navigate }) => {
  const [filter, setFilter] = useState('All');

const filtered = filter === 'All' ? complaints : complaints.filter(c => c.status === filter);

return (
    <div className="space-y-6">
       <div>
        <h1 className="text-2xl font-bold text-slate-900">Complaint Management</h1>
        <p className="text-slate-500">View, assign, and manage all system complaints.</p>
      </div>

<Card noPadding className="overflow-hidden">
        <div className="p-4 border-b border-slate-200 bg-slate-50 flex justify-between items-center">
          <div className="flex gap-2">
            {['All', 'Pending', 'In Progress', 'Resolved'].map(f => (
              <button key={f} onClick={() => setFilter(f)} className={`px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${filter === f ? 'bg-white shadow-sm text-blue-600 border border-slate-200' : 'text-slate-600 hover:bg-slate-200'}`}>
                {f}
              </button>
            ))}
          </div>
          <Button variant="secondary" icon={Download} size="sm">Export CSV</Button>
        </div>

<div className="overflow-x-auto">
          <table className="w-full text-left text-sm text-slate-600">
            <thead className="bg-slate-50 text-xs uppercase text-slate-500 border-b border-slate-200">
              <tr>
                <th className="px-6 py-4 font-semibold">ID / Title</th>
                <th className="px-6 py-4 font-semibold">Reporter</th>
                <th className="px-6 py-4 font-semibold">Status</th>
                <th className="px-6 py-4 font-semibold">Priority</th>
                <th className="px-6 py-4 font-semibold">Assignee</th>
                <th className="px-6 py-4 font-semibold text-right">Action</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {filtered.map(c => {
                const reporter = users.find(u => u.id === c.reporterId);
                const assignee = users.find(u => u.id === c.assigneeId);
                return (
                  <tr key={c.id} className="hover:bg-slate-50 transition-colors">
                    <td className="px-6 py-4">
                      <div className="font-medium text-slate-900 mb-0.5">{c.title}</div>
                      <div className="text-xs text-slate-400">{c.id} • {c.category}</div>
                    </td>
                    <td className="px-6 py-4">{reporter?.name || 'Unknown'}</td>
                    <td className="px-6 py-4"><StatusBadge status={c.status} /></td>
                    <td className="px-6 py-4"><PriorityBadge priority={c.priority} /></td>
                    <td className="px-6 py-4">
                      {assignee ? (
                        <div className="flex items-center gap-2">
                          <img src={assignee.avatar} className="w-6 h-6 rounded-full" alt=""/>
                          <span className="text-xs font-medium">{assignee.name.split(' ')[1] || assignee.name}</span>
                        </div>
                      ) : (
                        <span className="text-xs italic text-slate-400">Unassigned</span>
                      )}
                    </td>
                    <td className="px-6 py-4 text-right">
                      <button onClick={() => navigate('/complaint', { id: c.id })} className="text-blue-600 font-medium hover:text-blue-800 hover:underline text-xs">Manage</button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
};

// 11. SUPER ADMIN USER MANAGEMENT
const UserManagement = ({ users, setUsers }) => {
  const updateRole = (id, newRole) => {
    setUsers(users.map(u => u.id === id ? { ...u, role: newRole } : u));
  };

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">User Management</h1>
        <p className="text-slate-500">Super Admin access: Manage system roles and permissions.</p>
      </div>

<Card noPadding className="overflow-hidden">
        <div className="p-4 border-b border-slate-200 bg-slate-50 flex justify-between items-center">
           <div className="relative max-w-sm w-full">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
            <input type="text" placeholder="Search users..." className="w-full pl-9 pr-4 py-2 text-sm border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 bg-white" />
          </div>
          <Button icon={PlusCircle}>Add User</Button>
        </div>

<div className="overflow-x-auto">
          <table className="w-full text-left text-sm text-slate-600">
            <thead className="bg-slate-50 text-xs uppercase text-slate-500 border-b border-slate-200">
              <tr>
                <th className="px-6 py-4 font-semibold">User</th>
                <th className="px-6 py-4 font-semibold">Contact</th>
                <th className="px-6 py-4 font-semibold">Role</th>
                <th className="px-6 py-4 font-semibold">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {users.map(user => (
                <tr key={user.id} className="hover:bg-slate-50">
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-3">
                      <img src={user.avatar} className="w-10 h-10 rounded-full bg-slate-200" alt=""/>
                      <div>
                        <div className="font-medium text-slate-900">{user.name}</div>
                        <div className="text-xs text-slate-400">{user.id}</div>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-4">{user.email}</td>
                  <td className="px-6 py-4">
                    {user.role === 'super_admin' ? (
                       <Badge variant="primary"><Shield className="w-3 h-3 mr-1"/> Super Admin</Badge>
                    ) : (
                      <select 
                        value={user.role} onChange={e => updateRole(user.id, e.target.value)}
                        className="py-1.5 px-3 border border-slate-200 rounded bg-white text-sm outline-none focus:border-blue-500"
                      >
                        <option value="user">User</option>
                        <option value="technician">Technician</option>
                        <option value="admin">Admin</option>
                      </select>
                    )}
                  </td>
                  <td className="px-6 py-4"><Badge variant="success">Active</Badge></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  );
};

// 12. REPORT & ANALYTICS PAGE
const ReportPage = ({ complaints }) => {
  // Simple aggregations
  const total = complaints.length;
  const resolved = complaints.filter(c => c.status === 'Resolved').length;
  const resolutionRate = total > 0 ? Math.round((resolved / total) * 100) : 0;

// Category counts
  const categoryCounts = MOCK_CATEGORIES.reduce((acc, cat) => {
    acc[cat] = complaints.filter(c => c.category === cat).length;
    return acc;
  }, {});

// For the CSS Bar Chart (Mock Monthly Trend Data)
  const barData = [35, 45, 30, 60, 50, 80, 65, 40, 55, 70, 90, 85]; // Mock percentages for height

return (
    <div className="space-y-6 pb-10">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Analytics & Reports</h1>
          <p className="text-slate-500">Detailed KPIs and system performance metrics.</p>
        </div>
        <div className="flex gap-2">
          <select className="px-4 py-2 border border-slate-300 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 bg-white text-sm">
            <option>Year: 2026</option>
            <option>Year: 2025</option>
          </select>
          <Button variant="secondary" icon={Download}>Export PDF</Button>
        </div>
      </div>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="flex flex-col justify-center items-center text-center p-6 bg-gradient-to-br from-blue-500 to-blue-700 text-white border-none">
          <p className="text-blue-100 text-sm font-medium mb-1">Total Complaints YTD</p>
          <h3 className="text-4xl font-bold">{total * 24}</h3>
          <p className="text-xs text-blue-200 mt-2">+12% from last year</p>
        </Card>
        <Card className="flex flex-col justify-center items-center text-center p-6">
          <p className="text-slate-500 text-sm font-medium mb-1">Overall Resolution Rate</p>
          <h3 className="text-4xl font-bold text-slate-900">{resolutionRate}%</h3>
          <p className="text-xs text-emerald-500 font-medium mt-2">↑ 5% improvement</p>
        </Card>
        <Card className="flex flex-col justify-center items-center text-center p-6">
          <p className="text-slate-500 text-sm font-medium mb-1">Avg. Resolution Time</p>
          <h3 className="text-4xl font-bold text-slate-900">1.8d</h3>
          <p className="text-xs text-emerald-500 font-medium mt-2">↓ 0.4d faster</p>
        </Card>
        <Card className="flex flex-col justify-center items-center text-center p-6">
          <p className="text-slate-500 text-sm font-medium mb-1">Current Backlog</p>
          <h3 className="text-4xl font-bold text-slate-900">{complaints.filter(c=>c.status!=='Resolved').length}</h3>
          <p className="text-xs text-red-500 font-medium mt-2">Active pending items</p>
        </Card>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* CSS Bar Chart */}
        <Card className="lg:col-span-2">
          <div className="mb-6 flex justify-between items-center">
             <h3 className="font-bold text-slate-800">Monthly Complaint Trend</h3>
             <Badge variant="default">2026</Badge>
          </div>
          <div className="h-64 flex items-end gap-2 sm:gap-4 mt-8 pb-8 border-b border-slate-100 relative">
             {/* Y-axis labels */}
             <div className="absolute left-0 top-0 bottom-8 w-8 flex flex-col justify-between text-xs text-slate-400">
               <span>100</span>
               <span>50</span>
               <span>0</span>
             </div>
             <div className="pl-8 w-full flex justify-between items-end h-full">
               {['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].map((month, i) => (
                 <div key={month} className="relative flex flex-col items-center flex-1 group">
                   <div 
                     className="w-full max-w-[2rem] bg-blue-100 group-hover:bg-blue-200 rounded-t-sm transition-colors relative"
                     style={{ height: `${barData[i]}%` }}
                   >
                     <div className="absolute -top-6 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 text-xs bg-slate-800 text-white px-2 py-1 rounded transition-opacity pointer-events-none">
                       {barData[i]}
                     </div>
                   </div>
                   <span className="absolute -bottom-6 text-xs text-slate-500 font-medium">{month}</span>
                 </div>
               ))}
             </div>
          </div>
        </Card>

<Card>
          <h3 className="font-bold text-slate-800 mb-6">Distribution by Category</h3>
          <div className="flex flex-col items-center justify-center h-full pb-8">
            <div className="w-48 h-48 rounded-full shadow-inner relative mb-8" style={{
               background: 'conic-gradient(#3b82f6 0% 35%, #10b981 35% 60%, #f59e0b 60% 80%, #8b5cf6 80% 95%, #cbd5e1 95% 100%)'
            }}>
              <div className="absolute inset-0 m-auto w-32 h-32 bg-white rounded-full flex items-center justify-center shadow-sm">
                <div className="text-center">
                  <p className="text-2xl font-bold text-slate-900">{total * 24}</p>
                  <p className="text-xs text-slate-500 uppercase font-semibold">Total</p>
                </div>
              </div>
            </div>

<div className="w-full space-y-3 px-4">
               {MOCK_CATEGORIES.map((cat, i) => {
                 const colors = ['bg-blue-500', 'bg-emerald-500', 'bg-amber-500', 'bg-violet-500', 'bg-slate-300'];
                 // Calculate mock percentage based on index for visual rep
                 const pct = [35, 25, 20, 15, 5][i];
                 return (
                   <div key={cat} className="flex items-center justify-between text-sm">
                     <div className="flex items-center gap-2 text-slate-600">
                       <div className={`w-3 h-3 rounded-full ${colors[i]}`}></div>
                       {cat}
                     </div>
                     <span className="font-semibold text-slate-900">{pct}%</span>
                   </div>
                 )
               })}
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};