import React, { useState, useEffect } from 'react';
import { Search, Filter, Users, Mail, Phone, MapPin, Briefcase } from 'lucide-react';

interface Employee {
  id: string;
  name: string;
  email: string;
  title: string;
  department: string;
  location: string;
  phone?: string;
  status: 'active' | 'onboarding' | 'terminated';
}

export default function EmployeeDirectory() {
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [filterDepartment, setFilterDepartment] = useState('all');
  const [filterStatus, setFilterStatus] = useState('all');
  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');

  useEffect(() => {
    // Mock data - in production, fetch from Gusto MCP
    setEmployees([
      {
        id: '1',
        name: 'Sarah Johnson',
        email: 'sarah.j@company.com',
        title: 'Senior Software Engineer',
        department: 'Engineering',
        location: 'San Francisco, CA',
        phone: '+1 555-0101',
        status: 'active'
      },
      {
        id: '2',
        name: 'Michael Chen',
        email: 'michael.c@company.com',
        title: 'Product Manager',
        department: 'Product',
        location: 'New York, NY',
        phone: '+1 555-0102',
        status: 'active'
      },
      {
        id: '3',
        name: 'Emily Rodriguez',
        email: 'emily.r@company.com',
        title: 'Marketing Director',
        department: 'Marketing',
        location: 'Austin, TX',
        phone: '+1 555-0103',
        status: 'active'
      },
      {
        id: '4',
        name: 'David Kim',
        email: 'david.k@company.com',
        title: 'Sales Representative',
        department: 'Sales',
        location: 'Seattle, WA',
        phone: '+1 555-0104',
        status: 'active'
      },
      {
        id: '5',
        name: 'Lisa Wang',
        email: 'lisa.w@company.com',
        title: 'UI/UX Designer',
        department: 'Design',
        location: 'Los Angeles, CA',
        phone: '+1 555-0105',
        status: 'onboarding'
      },
      {
        id: '6',
        name: 'James Wilson',
        email: 'james.w@company.com',
        title: 'DevOps Engineer',
        department: 'Engineering',
        location: 'Boston, MA',
        phone: '+1 555-0106',
        status: 'active'
      }
    ]);
  }, []);

  const filteredEmployees = employees.filter(emp => {
    const matchesSearch = emp.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         emp.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         emp.title.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesDept = filterDepartment === 'all' || emp.department === filterDepartment;
    const matchesStatus = filterStatus === 'all' || emp.status === filterStatus;
    return matchesSearch && matchesDept && matchesStatus;
  });

  const departments = [...new Set(employees.map(e => e.department))];

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-bold mb-2 flex items-center gap-3">
            <Users className="text-blue-400" size={36} />
            Employee Directory
          </h1>
          <p className="text-slate-400">Search and browse all company employees</p>
        </div>

        {/* Search and Filters */}
        <div className="bg-slate-900 rounded-lg p-6 mb-6 border border-slate-800">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            {/* Search */}
            <div className="md:col-span-2 relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={20} />
              <input
                type="text"
                placeholder="Search by name, email, or title..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:border-blue-500 text-slate-100"
              />
            </div>

            {/* Department Filter */}
            <select
              value={filterDepartment}
              onChange={(e) => setFilterDepartment(e.target.value)}
              className="px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:border-blue-500 text-slate-100"
            >
              <option value="all">All Departments</option>
              {departments.map(dept => (
                <option key={dept} value={dept}>{dept}</option>
              ))}
            </select>

            {/* Status Filter */}
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
              className="px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg focus:outline-none focus:border-blue-500 text-slate-100"
            >
              <option value="all">All Status</option>
              <option value="active">Active</option>
              <option value="onboarding">Onboarding</option>
              <option value="terminated">Terminated</option>
            </select>
          </div>

          <div className="flex items-center justify-between mt-4 pt-4 border-t border-slate-800">
            <div className="text-slate-400">
              Showing {filteredEmployees.length} of {employees.length} employees
            </div>
            <div className="flex gap-2">
              <button
                onClick={() => setViewMode('grid')}
                className={`px-4 py-2 rounded ${viewMode === 'grid' ? 'bg-blue-600' : 'bg-slate-800'}`}
              >
                Grid
              </button>
              <button
                onClick={() => setViewMode('list')}
                className={`px-4 py-2 rounded ${viewMode === 'list' ? 'bg-blue-600' : 'bg-slate-800'}`}
              >
                List
              </button>
            </div>
          </div>
        </div>

        {/* Employee Grid/List */}
        {viewMode === 'grid' ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredEmployees.map(employee => (
              <EmployeeCard key={employee.id} employee={employee} />
            ))}
          </div>
        ) : (
          <div className="space-y-3">
            {filteredEmployees.map(employee => (
              <EmployeeListItem key={employee.id} employee={employee} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function EmployeeCard({ employee }: { employee: Employee }) {
  const initials = employee.name.split(' ').map(n => n[0]).join('');
  
  return (
    <div className="bg-slate-900 rounded-lg p-6 border border-slate-800 hover:border-blue-500/50 transition-colors cursor-pointer">
      <div className="flex items-start gap-4 mb-4">
        <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-xl font-bold">
          {initials}
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="font-semibold text-lg mb-1 truncate">{employee.name}</h3>
          <div className="text-sm text-slate-400 truncate">{employee.title}</div>
          <StatusBadge status={employee.status} />
        </div>
      </div>

      <div className="space-y-2 text-sm">
        <div className="flex items-center gap-2 text-slate-400">
          <Briefcase size={14} />
          <span>{employee.department}</span>
        </div>
        <div className="flex items-center gap-2 text-slate-400">
          <MapPin size={14} />
          <span>{employee.location}</span>
        </div>
        <div className="flex items-center gap-2 text-slate-400">
          <Mail size={14} />
          <span className="truncate">{employee.email}</span>
        </div>
        {employee.phone && (
          <div className="flex items-center gap-2 text-slate-400">
            <Phone size={14} />
            <span>{employee.phone}</span>
          </div>
        )}
      </div>
    </div>
  );
}

function EmployeeListItem({ employee }: { employee: Employee }) {
  const initials = employee.name.split(' ').map(n => n[0]).join('');
  
  return (
    <div className="bg-slate-900 rounded-lg p-4 border border-slate-800 hover:border-blue-500/50 transition-colors cursor-pointer">
      <div className="flex items-center gap-4">
        <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center font-bold">
          {initials}
        </div>
        <div className="flex-1 grid grid-cols-4 gap-4 items-center">
          <div>
            <div className="font-semibold">{employee.name}</div>
            <div className="text-sm text-slate-400">{employee.title}</div>
          </div>
          <div className="text-slate-400">{employee.department}</div>
          <div className="text-slate-400 text-sm">{employee.email}</div>
          <div className="flex justify-end">
            <StatusBadge status={employee.status} />
          </div>
        </div>
      </div>
    </div>
  );
}

function StatusBadge({ status }: { status: string }) {
  const colors = {
    active: 'bg-green-500/20 text-green-400 border-green-500/30',
    onboarding: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
    terminated: 'bg-red-500/20 text-red-400 border-red-500/30'
  };

  return (
    <span className={`inline-block px-2 py-1 rounded text-xs font-medium border mt-2 ${colors[status as keyof typeof colors]}`}>
      {status}
    </span>
  );
}
