'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import {
  ArrowLeft, MapPin, Phone, Clock, Bike, Plus, X, Edit, Save, Trash2,
  Navigation, User, Wallet, DollarSign, CheckCircle, AlertTriangle, Battery,
  Mail, Calendar, Briefcase, Users, Search, UserPlus
} from 'lucide-react';

interface Hub {
  id: string;
  name: string;
  address: string;
  phone: string;
  managerName?: string;
  bikeCount: number;
  activeRentals: number;
  status: 'active' | 'inactive';
  coordinates?: { lat: number; lng: number };
  openTime: string;
  closeTime: string;
  isHeadOffice?: boolean;
}

interface BikeInfo {
  id: string;
  model: string;
  plate: string;
  status: 'available' | 'rented' | 'maintenance';
}

interface BatteryInfo {
  id: string;
  brand: string;
  model: string;
  serialNumber: string;
  status: 'available' | 'charging' | 'deployed' | 'maintenance';
  chargeLevel: number;
  assignedBike?: string;
  assignedDate?: string;
}

const mockHub: Hub = {
  id: 'HUB-001',
  name: 'JAIBEN Head Office',
  address: 'House 12, Road 17, Gulshan 1, Dhaka',
  phone: '+8801712345678',
  managerName: 'Rahim Ahmed',
  bikeCount: 25,
  activeRentals: 12,
  status: 'active',
  coordinates: { lat: 23.7925, lng: 90.4174 },
  openTime: '06:00',
  closeTime: '23:00',
  isHeadOffice: true
};

const mockHubBikes: BikeInfo[] = [
  { id: 'BIKE-001', model: 'AIMA Lightning', plate: 'Dhaka Metro Cha-9012', status: 'available' },
  { id: 'BIKE-002', model: 'Yadea DT3', plate: 'Dhaka Metro Ba-5521', status: 'rented' },
  { id: 'BIKE-003', model: 'AIMA EM5', plate: 'Dhaka Metro Ko-1234', status: 'available' },
  { id: 'BIKE-004', model: 'AIMA Lightning', plate: 'Dhaka Metro Cha-9013', status: 'rented' },
  { id: 'BIKE-005', model: 'Yadea G5', plate: 'Dhaka Metro Ha-5678', status: 'maintenance' },
];

const mockHubBatteries: BatteryInfo[] = [
  { id: 'BAT-001', brand: 'Lithium', model: '60V/30Ah', serialNumber: 'LTH-2024-001', status: 'available', chargeLevel: 95 },
  { id: 'BAT-002', brand: 'Lithium', model: '60V/30Ah', serialNumber: 'LTH-2024-002', status: 'charging', chargeLevel: 75 },
  { id: 'BAT-003', brand: 'Lithium', model: '60V/40Ah', serialNumber: 'LTH-2024-003', status: 'deployed', chargeLevel: 45, assignedBike: 'BIKE-002', assignedDate: '2024-03-15' },
  { id: 'BAT-004', brand: 'Lithium', model: '60V/30Ah', serialNumber: 'LTH-2024-004', status: 'available', chargeLevel: 88 },
  { id: 'BAT-005', brand: 'Lithium', model: '48V/25Ah', serialNumber: 'LTH-2024-005', status: 'maintenance', chargeLevel: 0 },
  { id: 'BAT-006', brand: 'Lithium', model: '60V/30Ah', serialNumber: 'LTH-2024-006', status: 'deployed', chargeLevel: 62, assignedBike: 'BIKE-004', assignedDate: '2024-03-18' },
];

interface RentalInfo {
  id: string;
  userName: string;
  bike: string;
  plate: string;
  startDate: string;
  type: string;
  status: 'active' | 'pending' | 'completed';
  dailyRate: number;
  totalPaid: number;
}

const mockHubRentals: RentalInfo[] = [
  { id: 'RNT-001', userName: 'Rahim Ahmed', bike: 'AIMA Lightning', plate: 'Dhaka Metro Cha-9012', startDate: '2024-01-15', type: 'single', status: 'active', dailyRate: 300, totalPaid: 81900 },
  { id: 'RNT-002', userName: 'Karim Hasan', bike: 'Yadea DT3', plate: 'Dhaka Metro Ba-5521', startDate: '2024-01-20', type: 'single', status: 'active', dailyRate: 200, totalPaid: 12400 },
  { id: 'RNT-003', userName: 'Jamal Uddin', bike: 'AIMA EM5', plate: 'Dhaka Metro Ko-1234', startDate: '2024-02-01', type: 'shared', status: 'pending', dailyRate: 150, totalPaid: 450 },
];

interface Employee {
  id: string;
  name: string;
  role: 'Manager' | 'Accountant' | 'Staff' | 'Technician' | 'Support';
  email: string;
  phone: string;
  status: 'Active' | 'On Leave' | 'Inactive';
  joiningDate: string;
  shift: 'Morning' | 'Evening' | 'Night' | 'Full-time';
}

const mockHubEmployees: Employee[] = [
  {
    id: 'EMP-001',
    name: 'Arif Rahman',
    role: 'Manager',
    email: 'arif.rahman@jaiben.com',
    phone: '+8801711223344',
    status: 'Active',
    joiningDate: '2023-01-10',
    shift: 'Full-time',
  },
  {
    id: 'EMP-002',
    name: 'Tasmia Chowdhury',
    role: 'Accountant',
    email: 'tasmia.c@jaiben.com',
    phone: '+8801722334455',
    status: 'Active',
    joiningDate: '2023-03-15',
    shift: 'Morning',
  },
  {
    id: 'EMP-003',
    name: 'Kamrul Islam',
    role: 'Staff',
    email: 'kamrul.i@jaiben.com',
    phone: '+8801733445566',
    status: 'Active',
    joiningDate: '2023-06-20',
    shift: 'Evening',
  },
  {
    id: 'EMP-004',
    name: 'Mizanur Rahman',
    role: 'Technician',
    email: 'mizan.r@jaiben.com',
    phone: '+8801744556677',
    status: 'Active',
    joiningDate: '2023-08-01',
    shift: 'Morning',
  },
  {
    id: 'EMP-005',
    name: 'Sujon Ali',
    role: 'Support',
    email: 'sujon.a@jaiben.com',
    phone: '+8801755667788',
    status: 'On Leave',
    joiningDate: '2023-11-15',
    shift: 'Night',
  },
];

export default function HubDetailPage() {
  const params = useParams();
  const router = useRouter();
  const id = params.id as string;

  const [hub, setHub] = useState<Hub>(mockHub);
  const [bikes, setBikes] = useState<BikeInfo[]>(mockHubBikes);
  const [batteries, setBatteries] = useState<BatteryInfo[]>(mockHubBatteries);
  const [rentals, setRentals] = useState<RentalInfo[]>(mockHubRentals);
  const [editMode, setEditMode] = useState(false);
  const [editForm, setEditForm] = useState(hub);
  const [activeTab, setActiveTab] = useState<'overview' | 'employees' | 'bikes' | 'batteries' | 'rentals'>('overview');
  const [employees, setEmployees] = useState<Employee[]>(mockHubEmployees);
  const [employeeSearch, setEmployeeSearch] = useState('');
  const [roleFilter, setRoleFilter] = useState<string>('All');
  const [statusFilter, setStatusFilter] = useState<string>('All');
  const [addEmployeeModal, setAddEmployeeModal] = useState(false);
  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
  const [employeeForm, setEmployeeForm] = useState<Omit<Employee, 'id'>>({
    name: '',
    role: 'Staff',
    email: '',
    phone: '',
    status: 'Active',
    joiningDate: new Date().toISOString().split('T')[0],
    shift: 'Full-time'
  });
  const [deleteEmployeeModal, setDeleteEmployeeModal] = useState<Employee | null>(null);
  const [assignModal, setAssignModal] = useState<BatteryInfo | null>(null);
  const [selectedBike, setSelectedBike] = useState('');
  const [addBikeModal, setAddBikeModal] = useState(false);
  const [addBatteryModal, setAddBatteryModal] = useState(false);
  const [editingBike, setEditingBike] = useState<BikeInfo | null>(null);
  const [editingBattery, setEditingBattery] = useState<BatteryInfo | null>(null);
  const [bikeForm, setBikeForm] = useState<{ model: string; plate: string; status: 'available' | 'rented' | 'maintenance' }>({ model: '', plate: '', status: 'available' });
  const [batteryForm, setBatteryForm] = useState<{ brand: string; model: string; serialNumber: string; chargeLevel: number; status: 'available' | 'charging' | 'deployed' | 'maintenance' }>({ brand: '', model: '', serialNumber: '', chargeLevel: 100, status: 'available' });
  const [deleteModal, setDeleteModal] = useState<{ type: 'bike' | 'battery'; item: BikeInfo | BatteryInfo } | null>(null);

  const handleSaveEdit = () => {
    setHub(editForm);
    setEditMode(false);
  };

  if (!id || id !== 'HUB-001') {
    return (
      <div className="p-6 flex items-center justify-center min-h-[50vh]">
        <div className="text-center">
          <MapPin className="w-16 h-16 text-slate-300 mx-auto mb-4" />
          <p className="text-slate-500">Hub not found</p>
          <button
            onClick={() => router.push('/admin/hub')}
            className="mt-4 px-4 py-2 bg-accent text-white rounded-lg text-sm"
          >
            Back to Hubs
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="p-4 lg:p-6 max-w-8xl mx-auto">
      <button
        onClick={() => router.push('/admin/hub')}
        className="flex items-center gap-2 text-slate-600 hover:text-slate-800 mb-4"
      >
        <ArrowLeft className="w-4 h-4" /> Back to Hubs
      </button>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="p-6 border-b border-slate-100">
          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
            <div>
              <div className="flex items-center gap-3">
                <h1 className="text-2xl font-extrabold text-slate-800">{hub.name}</h1>
                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${hub.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'
                  }`}>
                  {hub.status}
                </span>
                {hub.isHeadOffice && (
                  <span className="text-xs font-medium px-2 py-1 rounded-full bg-purple-100 text-purple-700">
                    Head Office
                  </span>
                )}
              </div>
              <p className="text-slate-500 mt-1">{hub.address}</p>
            </div>
            <div className="flex gap-2">
              {editMode ? (
                <>
                  <button onClick={handleSaveEdit} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
                    <Save className="w-4 h-4" /> Save
                  </button>
                  <button onClick={() => { setEditForm(hub); setEditMode(false); }} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
                    Cancel
                  </button>
                </>
              ) : (
                <button onClick={() => setEditMode(true)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
                  <Edit className="w-4 h-4" /> Edit
                </button>
              )}
            </div>
          </div>
        </div>

        <div className="border-b border-slate-100">
          <nav className="flex gap-6 px-6">
            <button
              onClick={() => setActiveTab('overview')}
              className={`py-4 text-sm font-medium border-b-2 transition-colors ${activeTab === 'overview'
                ? 'border-accent text-accent'
                : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
            >
              Overview
            </button>
            <button
              onClick={() => setActiveTab('employees')}
              className={`py-4 text-sm font-medium border-b-2 transition-colors ${activeTab === 'employees'
                ? 'border-accent text-accent'
                : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
            >
              Employees ({employees.length})
            </button>
            <button
              onClick={() => setActiveTab('bikes')}
              className={`py-4 text-sm font-medium border-b-2 transition-colors ${activeTab === 'bikes'
                ? 'border-accent text-accent'
                : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
            >
              Bikes ({bikes.length})
            </button>
            <button
              onClick={() => setActiveTab('batteries')}
              className={`py-4 text-sm font-medium border-b-2 transition-colors ${activeTab === 'batteries'
                ? 'border-accent text-accent'
                : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
            >
              Batteries ({batteries.length})
            </button>
            <button
              onClick={() => setActiveTab('rentals')}
              className={`py-4 text-sm font-medium border-b-2 transition-colors ${activeTab === 'rentals'
                ? 'border-accent text-accent'
                : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
            >
              Rentals ({rentals.length})
            </button>
          </nav>
        </div>

        <div className="p-6">
          {activeTab === 'overview' && (
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div className="space-y-4">
                <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
                  <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
                    <MapPin className="w-5 h-5" /> Location Info
                  </h3>
                  {editMode ? (
                    <div className="space-y-3">
                      <input
                        type="text"
                        value={editForm.address}
                        onChange={(e) => setEditForm({ ...editForm, address: e.target.value })}
                        className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
                        placeholder="Address"
                      />
                    </div>
                  ) : (
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span className="text-sm text-blue-600">Address</span>
                        <span className="text-sm font-medium text-blue-800">{hub.address}</span>
                      </div>
                      {hub.coordinates && (
                        <div className="flex justify-between">
                          <span className="text-sm text-blue-600">Coordinates</span>
                          <span className="text-sm font-medium text-blue-800">{hub.coordinates.lat}, {hub.coordinates.lng}</span>
                        </div>
                      )}
                    </div>
                  )}
                </div>

                <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
                  <h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
                    <Phone className="w-5 h-5" /> Contact Info
                  </h3>
                  {editMode ? (
                    <div className="space-y-3">
                      <input
                        type="text"
                        value={editForm.phone}
                        onChange={(e) => setEditForm({ ...editForm, phone: e.target.value })}
                        className="w-full px-3 py-2 border border-purple-200 rounded-lg text-sm"
                        placeholder="Phone"
                      />
                      <input
                        type="text"
                        value={editForm.managerName || ''}
                        onChange={(e) => setEditForm({ ...editForm, managerName: e.target.value })}
                        className="w-full px-3 py-2 border border-purple-200 rounded-lg text-sm"
                        placeholder="Manager Name"
                      />
                    </div>
                  ) : (
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span className="text-sm text-purple-600">Phone</span>
                        <span className="text-sm font-medium text-purple-800">{hub.phone}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm text-purple-600">Manager</span>
                        <span className="text-sm font-medium text-purple-800">{hub.managerName || '-'}</span>
                      </div>
                    </div>
                  )}
                </div>
              </div>

              <div className="space-y-4">
                <div className="bg-green-50 p-4 rounded-xl border border-green-100">
                  <h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
                    <Clock className="w-5 h-5" /> Operating Hours
                  </h3>
                  {editMode ? (
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="text-sm text-green-600">Open</label>
                        <input
                          type="time"
                          value={editForm.openTime}
                          onChange={(e) => setEditForm({ ...editForm, openTime: e.target.value })}
                          className="w-full px-3 py-2 border border-green-200 rounded-lg text-sm mt-1"
                        />
                      </div>
                      <div>
                        <label className="text-sm text-green-600">Close</label>
                        <input
                          type="time"
                          value={editForm.closeTime}
                          onChange={(e) => setEditForm({ ...editForm, closeTime: e.target.value })}
                          className="w-full px-3 py-2 border border-green-200 rounded-lg text-sm mt-1"
                        />
                      </div>
                    </div>
                  ) : (
                    <div className="flex justify-between">
                      <span className="text-sm text-green-600">Hours</span>
                      <span className="text-sm font-medium text-green-800">{hub.openTime} - {hub.closeTime}</span>
                    </div>
                  )}
                </div>

                <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
                  <h3 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
                    <DollarSign className="w-5 h-5" /> Today's Earnings
                  </h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm text-amber-600">Rentals</span>
                      <span className="text-sm font-medium text-amber-800">{hub.activeRentals}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm text-amber-600">Revenue</span>
                      <span className="text-sm font-medium text-amber-800">৳{hub.activeRentals * 300}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="space-y-4">
                <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                  <h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
                    <Bike className="w-5 h-5" /> Bike Statistics
                  </h3>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-sm text-slate-600">Total Bikes</span>
                      <span className="text-sm font-medium text-slate-800">{hub.bikeCount}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm text-slate-600">Available</span>
                      <span className="text-sm font-medium text-green-700">
                        {bikes.filter(b => b.status === 'available').length}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm text-slate-600">Rented</span>
                      <span className="text-sm font-medium text-amber-700">
                        {bikes.filter(b => b.status === 'rented').length}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm text-slate-600">Maintenance</span>
                      <span className="text-sm font-medium text-red-700">
                        {bikes.filter(b => b.status === 'maintenance').length}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'employees' && (
            <div>
              <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
                <div>
                  <h3 className="font-bold text-slate-800 text-lg">Hub Employees ({employees.length})</h3>
                  <p className="text-sm text-slate-500 mt-0.5">Manage and track hub operational personnel and roles</p>
                </div>
                <button
                  onClick={() => {
                    setEditingEmployee(null);
                    setEmployeeForm({
                      name: '',
                      role: 'Staff',
                      email: '',
                      phone: '',
                      status: 'Active',
                      joiningDate: new Date().toISOString().split('T')[0],
                      shift: 'Full-time'
                    });
                    setAddEmployeeModal(true);
                  }}
                  className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium flex items-center gap-2 hover:opacity-90 transition-all shadow-sm self-start md:self-auto"
                >
                  <UserPlus className="w-4 h-4" /> Add Employee
                </button>
              </div>

              {/* Search & Filter Toolbar */}
              <div className="bg-slate-50 p-4 rounded-xl border border-slate-100 flex flex-col md:flex-row gap-3 mb-6">
                <div className="flex-1 relative">
                  <Search className="absolute left-3 top-2.5 w-4 h-4 text-slate-400" />
                  <input
                    type="text"
                    value={employeeSearch}
                    onChange={(e) => setEmployeeSearch(e.target.value)}
                    placeholder="Search by name, email, phone or ID..."
                    className="w-full pl-9 pr-4 py-2 border border-slate-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  />
                </div>
                <div className="flex gap-3">
                  <select
                    value={roleFilter}
                    onChange={(e) => setRoleFilter(e.target.value)}
                    className="py-2 px-3 border border-slate-200 rounded-lg text-sm text-slate-600 bg-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  >
                    <option value="All">All Roles</option>
                    <option value="Manager">Managers</option>
                    <option value="Accountant">Accountants</option>
                    <option value="Staff">Operations Staff</option>
                    <option value="Technician">Technicians</option>
                    <option value="Support">Support Staff</option>
                  </select>
                  <select
                    value={statusFilter}
                    onChange={(e) => setStatusFilter(e.target.value)}
                    className="py-2 px-3 border border-slate-200 rounded-lg text-sm text-slate-600 bg-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  >
                    <option value="All">All Statuses</option>
                    <option value="Active">Active / On Duty</option>
                    <option value="On Leave">On Leave</option>
                    <option value="Inactive">Inactive</option>
                  </select>
                </div>
              </div>

              {/* Roster Cards Grid */}
              {employees.filter(emp => {
                const matchesSearch = 
                  emp.name.toLowerCase().includes(employeeSearch.toLowerCase()) ||
                  emp.email.toLowerCase().includes(employeeSearch.toLowerCase()) ||
                  emp.phone.includes(employeeSearch) ||
                  emp.id.toLowerCase().includes(employeeSearch.toLowerCase());
                const matchesRole = roleFilter === 'All' || emp.role === roleFilter;
                const matchesStatus = statusFilter === 'All' || emp.status === statusFilter;
                return matchesSearch && matchesRole && matchesStatus;
              }).length === 0 ? (
                <div className="text-center py-12 bg-slate-50 rounded-xl border border-slate-100">
                  <Users className="w-12 h-12 text-slate-300 mx-auto mb-3" />
                  <p className="text-slate-500 text-sm">No employees match your search or filter criteria.</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {employees.filter(emp => {
                    const matchesSearch = 
                      emp.name.toLowerCase().includes(employeeSearch.toLowerCase()) ||
                      emp.email.toLowerCase().includes(employeeSearch.toLowerCase()) ||
                      emp.phone.includes(employeeSearch) ||
                      emp.id.toLowerCase().includes(employeeSearch.toLowerCase());
                    const matchesRole = roleFilter === 'All' || emp.role === roleFilter;
                    const matchesStatus = statusFilter === 'All' || emp.status === statusFilter;
                    return matchesSearch && matchesRole && matchesStatus;
                  }).map(emp => {
                    const roleConfig: Record<string, { badge: string; circle: string; text: string }> = {
                      Manager: { badge: 'bg-emerald-100 text-emerald-800 border-emerald-200', circle: 'bg-emerald-50 text-emerald-600', text: 'text-emerald-700' },
                      Accountant: { badge: 'bg-blue-100 text-blue-800 border-blue-200', circle: 'bg-blue-50 text-blue-600', text: 'text-blue-700' },
                      Staff: { badge: 'bg-purple-100 text-purple-800 border-purple-200', circle: 'bg-purple-50 text-purple-600', text: 'text-purple-700' },
                      Technician: { badge: 'bg-amber-100 text-amber-800 border-amber-200', circle: 'bg-amber-50 text-amber-600', text: 'text-amber-700' },
                      Support: { badge: 'bg-orange-100 text-orange-800 border-orange-200', circle: 'bg-orange-50 text-orange-600', text: 'text-orange-700' },
                    };
                    const style = roleConfig[emp.role] || roleConfig.Staff;

                    return (
                      <div key={emp.id} className="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden hover:shadow-md transition-all flex flex-col justify-between">
                        <div className="p-5">
                          <div className="flex items-start justify-between gap-3 mb-4">
                            <div className="flex items-center gap-3">
                              <div className={`w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg ${style.circle}`}>
                                {emp.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()}
                              </div>
                              <div>
                                <h4 className="font-bold text-slate-800 hover:text-accent transition-colors">{emp.name}</h4>
                                <span className="text-xs text-slate-400 font-mono">{emp.id}</span>
                              </div>
                            </div>
                            <span className={`inline-flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full border ${style.badge}`}>
                              {emp.role}
                            </span>
                          </div>

                          <div className="space-y-2.5 my-4 border-t border-b border-slate-50 py-3">
                            <div className="flex items-center gap-2 text-sm text-slate-600">
                              <Mail className="w-4 h-4 text-slate-400 flex-shrink-0" />
                              <a href={`mailto:${emp.email}`} className="truncate hover:text-accent hover:underline">{emp.email}</a>
                            </div>
                            <div className="flex items-center gap-2 text-sm text-slate-600">
                              <Phone className="w-4 h-4 text-slate-400 flex-shrink-0" />
                              <a href={`tel:${emp.phone}`} className="hover:text-accent hover:underline">{emp.phone}</a>
                            </div>
                            <div className="flex items-center gap-2 text-sm text-slate-600">
                              <Clock className="w-4 h-4 text-slate-400 flex-shrink-0" />
                              <span>Shift: <span className="font-medium text-slate-700">{emp.shift}</span></span>
                            </div>
                            <div className="flex items-center gap-2 text-sm text-slate-600">
                              <Calendar className="w-4 h-4 text-slate-400 flex-shrink-0" />
                              <span>Joined: <span className="font-medium text-slate-700">{emp.joiningDate}</span></span>
                            </div>
                          </div>
                        </div>

                        <div className="px-5 pb-5 pt-1 border-t border-slate-50 flex items-center justify-between bg-slate-50/50">
                          <span className={`inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full ${
                            emp.status === 'Active' ? 'bg-green-100 text-green-700' :
                            emp.status === 'On Leave' ? 'bg-amber-100 text-amber-700' :
                            'bg-slate-200 text-slate-600'
                          }`}>
                            <span className={`w-1.5 h-1.5 rounded-full ${
                              emp.status === 'Active' ? 'bg-green-500' :
                              emp.status === 'On Leave' ? 'bg-amber-500' :
                              'bg-slate-500'
                            }`} />
                            {emp.status}
                          </span>

                          <div className="flex gap-2">
                            <button
                              onClick={() => {
                                setEditingEmployee(emp);
                                setEmployeeForm({
                                  name: emp.name,
                                  role: emp.role,
                                  email: emp.email,
                                  phone: emp.phone,
                                  status: emp.status,
                                  joiningDate: emp.joiningDate,
                                  shift: emp.shift
                                });
                                setAddEmployeeModal(true);
                              }}
                              className="px-2.5 py-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 bg-white border border-blue-100 hover:border-blue-200 rounded-lg hover:shadow-sm transition-all"
                            >
                              Edit
                            </button>
                            <button
                              onClick={() => setDeleteEmployeeModal(emp)}
                              className="px-2.5 py-1.5 text-xs font-semibold text-red-600 hover:text-red-700 bg-white border border-red-100 hover:border-red-200 rounded-lg hover:shadow-sm transition-all"
                            >
                              Delete
                            </button>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          )}

          {activeTab === 'bikes' && (
            <div>
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-slate-800">Hub Bikes ({bikes.length})</h3>
                <button onClick={() => { setBikeForm({ model: '', plate: '', status: 'available' }); setAddBikeModal(true); }} className="px-4 py-2 bg-accent text-white rounded-lg text-sm flex items-center gap-2">
                  <Plus className="w-4 h-4" /> Add Bike
                </button>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {bikes.map(bike => (
                  <div key={bike.id} className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                    <div className="flex items-center justify-between mb-2">
                      <Bike className="w-5 h-5 text-slate-400" />
                      <span className={`text-xs font-medium px-2 py-1 rounded-full ${bike.status === 'available' ? 'bg-green-100 text-green-700' :
                        bike.status === 'rented' ? 'bg-amber-100 text-amber-700' :
                          'bg-red-100 text-red-700'
                        }`}>
                        {bike.status}
                      </span>
                    </div>
                    <p className="font-medium text-slate-800">{bike.model}</p>
                    <p className="text-sm text-slate-500">{bike.plate}</p>
                    <p className="text-xs text-slate-400 mt-2">ID: {bike.id}</p>
                    <div className="flex gap-2 mt-3">
                      <button onClick={() => { setEditingBike(bike); setBikeForm({ model: bike.model, plate: bike.plate, status: bike.status }); setAddBikeModal(true); }} className="flex-1 py-1.5 text-xs font-medium text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50">Edit</button>
                      <button onClick={() => setDeleteModal({ type: 'bike', item: bike })} className="flex-1 py-1.5 text-xs font-medium text-red-600 border border-red-200 rounded-lg hover:bg-red-50">Delete</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'batteries' && (
            <div>
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-slate-800">Hub Batteries ({batteries.length})</h3>
                <button onClick={() => { setBatteryForm({ brand: '', model: '', serialNumber: '', chargeLevel: 100, status: 'available' }); setAddBatteryModal(true); }} className="px-4 py-2 bg-accent text-white rounded-lg text-sm flex items-center gap-2">
                  <Plus className="w-4 h-4" /> Add Battery
                </button>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {batteries.map(battery => (
                  <div key={battery.id} className="bg-slate-50 p-4 rounded-xl border border-slate-100">
                    <div className="flex items-center justify-between mb-2">
                      <Battery className="w-5 h-5 text-slate-400" />
                      <span className={`text-xs font-medium px-2 py-1 rounded-full ${battery.status === 'available' ? 'bg-green-100 text-green-700' :
                        battery.status === 'charging' ? 'bg-blue-100 text-blue-700' :
                          battery.status === 'deployed' ? 'bg-amber-100 text-amber-700' :
                            'bg-red-100 text-red-700'
                        }`}>
                        {battery.status}
                      </span>
                    </div>
                    <p className="font-medium text-slate-800">{battery.brand} {battery.model}</p>
                    <p className="text-sm text-slate-500">SN: {battery.serialNumber}</p>
                    <div className="mt-2">
                      <div className="flex items-center justify-between text-xs mb-1">
                        <span className="text-slate-500">Charge</span>
                        <span className={`font-medium ${battery.chargeLevel > 50 ? 'text-green-600' : battery.chargeLevel > 20 ? 'text-amber-600' : 'text-red-600'}`}>
                          {battery.chargeLevel}%
                        </span>
                      </div>
                      <div className="h-1.5 bg-slate-200 rounded-full overflow-hidden">
                        <div className={`h-full rounded-full ${battery.chargeLevel > 50 ? 'bg-green-500' : battery.chargeLevel > 20 ? 'bg-amber-500' : 'bg-red-500'}`} style={{ width: `${battery.chargeLevel}%` }} />
                      </div>
                    </div>
                    {battery.assignedBike && (
                      <p className="text-xs text-slate-400 mt-2">Assigned to: {battery.assignedBike}</p>
                    )}
                    <div className="mt-2 flex gap-2">
                      <button
                        onClick={() => { setAssignModal(battery); setSelectedBike(battery.assignedBike || ''); }}
                        className="flex-1 py-1.5 text-xs font-medium text-accent border border-accent rounded-lg hover:bg-accent hover:text-white transition-colors"
                      >
                        {battery.assignedBike ? 'Reassign' : 'Assign'}
                      </button>
                      {battery.assignedBike && (
                        <button
                          onClick={() => { setBatteries(prev => prev.map(b => b.id === battery.id ? { ...b, assignedBike: undefined, assignedDate: undefined, status: 'available' as const } : b)); }}
                          className="py-1.5 px-2 text-xs font-medium text-orange-600 border border-orange-200 rounded-lg hover:bg-orange-50"
                        >
                          Unassign
                        </button>
                      )}
                    </div>
                    <div className="flex gap-2 mt-2">
                      <button onClick={() => { setEditingBattery(battery); setBatteryForm({ brand: battery.brand, model: battery.model, serialNumber: battery.serialNumber, chargeLevel: battery.chargeLevel, status: battery.status }); setAddBatteryModal(true); }} className="flex-1 py-1.5 text-xs font-medium text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50">Edit</button>
                      <button onClick={() => setDeleteModal({ type: 'battery', item: battery })} className="flex-1 py-1.5 text-xs font-medium text-red-600 border border-red-200 rounded-lg hover:bg-red-50">Delete</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'rentals' && (
            <div>
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold text-slate-800">Hub Rentals ({rentals.length})</h3>
                {/* <button className="px-4 py-2 bg-accent text-white rounded-lg text-sm flex items-center gap-2">
                  <Plus className="w-4 h-4" /> New Rental
                </button> */}
              </div>
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-slate-50">
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Rental ID</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">User</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Bike</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Start Date</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Daily Rate</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Total Paid</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-50">
                    {rentals.map(rental => (
                      <tr key={rental.id} className="hover:bg-slate-50">
                        <td className="px-4 py-3">
                          <span className="text-sm font-medium text-slate-700">{rental.id}</span>
                        </td>
                        <td className="px-4 py-3">
                          <span className="text-sm text-slate-600">{rental.userName}</span>
                        </td>
                        <td className="px-4 py-3">
                          <div>
                            <span className="text-sm text-slate-600">{rental.bike}</span>
                            <p className="text-xs text-slate-400">{rental.plate}</p>
                          </div>
                        </td>
                        <td className="px-4 py-3">
                          <span className="text-sm text-slate-600">{rental.startDate}</span>
                        </td>
                        <td className="px-4 py-3">
                          <span className="text-sm text-slate-600 capitalize">{rental.type}</span>
                        </td>
                        <td className="px-4 py-3">
                          <span className="text-sm text-slate-600">৳{rental.dailyRate}</span>
                        </td>
                        <td className="px-4 py-3">
                          <span className="text-sm font-medium text-green-600">৳{rental.totalPaid.toLocaleString()}</span>
                        </td>
                        <td className="px-4 py-3">
                          <span className={`text-xs font-medium px-2.5 py-1 rounded-full ${rental.status === 'active' ? 'bg-green-100 text-green-700' :
                              rental.status === 'pending' ? 'bg-amber-100 text-amber-700' :
                                'bg-blue-100 text-blue-700'
                            }`}>
                            {rental.status}
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      </div>

      {assignModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">Assign Battery to Bike</h3>
              <button onClick={() => setAssignModal(null)} className="text-slate-400 hover:text-slate-600">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-4 space-y-4">
              <div className="bg-slate-50 p-3 rounded-lg">
                <p className="text-sm text-slate-500">Battery</p>
                <p className="font-medium text-slate-800">{assignModal.brand} {assignModal.model}</p>
                <p className="text-xs text-slate-500">SN: {assignModal.serialNumber}</p>
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Select Bike</label>
                <select
                  value={selectedBike}
                  onChange={(e) => setSelectedBike(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                >
                  <option value="">-- Select a bike --</option>
                  {bikes.filter(b => b.status !== 'maintenance').map(bike => (
                    <option key={bike.id} value={bike.id}>
                      {bike.model} - {bike.plate}
                    </option>
                  ))}
                </select>
              </div>
              {selectedBike && (
                <div className="bg-green-50 p-3 rounded-lg">
                  <p className="text-sm text-green-600">Battery will be assigned to:</p>
                  <p className="font-medium text-green-800">
                    {bikes.find(b => b.id === selectedBike)?.model} ({bikes.find(b => b.id === selectedBike)?.plate})
                  </p>
                </div>
              )}
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setAssignModal(null)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button
                onClick={() => {
                  setBatteries(prev => prev.map(b => b.id === assignModal.id ? {
                    ...b,
                    assignedBike: selectedBike || undefined,
                    assignedDate: selectedBike ? new Date().toISOString().split('T')[0] : undefined,
                    status: selectedBike ? 'deployed' as const : 'available' as const
                  } : b));
                  setAssignModal(null);
                }}
                className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark"
              >
                {assignModal.assignedBike ? 'Update Assignment' : 'Assign Battery'}
              </button>
            </div>
          </div>
        </div>
      )}

      {addBikeModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">{editingBike ? 'Edit Bike' : 'Add New Bike'}</h3>
              <button onClick={() => { setAddBikeModal(false); setEditingBike(null); }} className="text-slate-400 hover:text-slate-600">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-4 space-y-4">
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Model</label>
                <input type="text" value={bikeForm.model} onChange={(e) => setBikeForm(f => ({ ...f, model: e.target.value }))} placeholder="e.g. AIMA Lightning" disabled={!!editingBike} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm disabled:bg-slate-100 disabled:text-slate-500" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">License Plate</label>
                <input type="text" value={bikeForm.plate} onChange={(e) => setBikeForm(f => ({ ...f, plate: e.target.value }))} placeholder="e.g. Dhaka Metro Cha-1234" disabled={!!editingBike} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm disabled:bg-slate-100 disabled:text-slate-500" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Status</label>
                <select value={bikeForm.status} onChange={(e) => setBikeForm(f => ({ ...f, status: e.target.value as any }))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                  <option value="available">Available</option>
                  <option value="rented">Rented</option>
                  <option value="maintenance">Maintenance</option>
                </select>
              </div>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => { setAddBikeModal(false); setEditingBike(null); }} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button
                onClick={() => {
                  if (editingBike) {
                    setBikes(prev => prev.map(b => b.id === editingBike.id ? { ...b, ...bikeForm } : b));
                  } else {
                    const newBike: BikeInfo = { id: `BIKE-${Date.now()}`, ...bikeForm };
                    setBikes(prev => [...prev, newBike]);
                  }
                  setAddBikeModal(false);
                  setEditingBike(null);
                }}
                disabled={!bikeForm.model || !bikeForm.plate}
                className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark disabled:opacity-50"
              >
                {editingBike ? 'Update Bike' : 'Add Bike'}
              </button>
            </div>
          </div>
        </div>
      )}

      {addBatteryModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">{editingBattery ? 'Edit Battery' : 'Add New Battery'}</h3>
              <button onClick={() => { setAddBatteryModal(false); setEditingBattery(null); }} className="text-slate-400 hover:text-slate-600">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-4 space-y-4">
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Brand</label>
                <input type="text" value={batteryForm.brand} onChange={(e) => setBatteryForm(f => ({ ...f, brand: e.target.value }))} placeholder="e.g. Lithium" disabled={!!editingBattery} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm disabled:bg-slate-100 disabled:text-slate-500" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Model</label>
                <input type="text" value={batteryForm.model} onChange={(e) => setBatteryForm(f => ({ ...f, model: e.target.value }))} placeholder="e.g. 60V/30Ah" disabled={!!editingBattery} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm disabled:bg-slate-100 disabled:text-slate-500" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Serial Number</label>
                <input type="text" value={batteryForm.serialNumber} onChange={(e) => setBatteryForm(f => ({ ...f, serialNumber: e.target.value }))} placeholder="e.g. LTH-2024-001" disabled={!!editingBattery} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm disabled:bg-slate-100 disabled:text-slate-500" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Charge Level (%)</label>
                <input type="number" min="0" max="100" value={batteryForm.chargeLevel} onChange={(e) => setBatteryForm(f => ({ ...f, chargeLevel: parseInt(e.target.value) || 0 }))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
              </div>
              <div>
                <label className="text-sm font-medium text-slate-600 mb-1 block">Status</label>
                <select value={batteryForm.status} onChange={(e) => setBatteryForm(f => ({ ...f, status: e.target.value as any }))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                  <option value="available">Available</option>
                  <option value="charging">Charging</option>
                  <option value="deployed">Deployed</option>
                  <option value="maintenance">Maintenance</option>
                </select>
              </div>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => { setAddBatteryModal(false); setEditingBattery(null); }} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button
                onClick={() => {
                  if (editingBattery) {
                    setBatteries(prev => prev.map(b => b.id === editingBattery.id ? { ...b, ...batteryForm } : b));
                  } else {
                    const newBattery: BatteryInfo = { id: `BAT-${Date.now()}`, ...batteryForm, assignedBike: undefined, assignedDate: undefined };
                    setBatteries(prev => [...prev, newBattery]);
                  }
                  setAddBatteryModal(false);
                  setEditingBattery(null);
                }}
                disabled={!batteryForm.brand || !batteryForm.model || !batteryForm.serialNumber}
                className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark disabled:opacity-50"
              >
                {editingBattery ? 'Update Battery' : 'Add Battery'}
              </button>
            </div>
          </div>
        </div>
      )}

      {deleteModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm">
            <div className="p-6 text-center">
              <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <AlertTriangle className="w-6 h-6 text-red-600" />
              </div>
              <h3 className="font-semibold text-slate-800 mb-2">Confirm Delete</h3>
              <p className="text-sm text-slate-500">
                Are you sure you want to delete this {deleteModal.type === 'bike' ? 'bike' : 'battery'}?
                {deleteModal.type === 'bike' && (
                  <span className="block mt-1 font-medium text-slate-700">{(deleteModal.item as BikeInfo).model} - {(deleteModal.item as BikeInfo).plate}</span>
                )}
                {deleteModal.type === 'battery' && (
                  <span className="block mt-1 font-medium text-slate-700">{(deleteModal.item as BatteryInfo).brand} {(deleteModal.item as BatteryInfo).model}</span>
                )}
              </p>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setDeleteModal(null)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button
                onClick={() => {
                  if (deleteModal.type === 'bike') {
                    setBikes(prev => prev.filter(b => b.id !== (deleteModal.item as BikeInfo).id));
                  } else {
                    setBatteries(prev => prev.filter(b => b.id !== (deleteModal.item as BatteryInfo).id));
                  }
                  setDeleteModal(null);
                }}
                className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700"
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}

      {addEmployeeModal && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
              <h3 className="font-bold text-slate-800">{editingEmployee ? 'Edit Employee Details' : 'Register New Employee'}</h3>
              <button onClick={() => { setAddEmployeeModal(false); setEditingEmployee(null); }} className="text-slate-400 hover:text-slate-600">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-4 space-y-4 max-h-[80vh] overflow-y-auto">
              <div>
                <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider block mb-1">Full Name</label>
                <input
                  type="text"
                  value={employeeForm.name}
                  onChange={(e) => setEmployeeForm(f => ({ ...f, name: e.target.value }))}
                  placeholder="e.g. Arif Rahman"
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider block mb-1">Role</label>
                  <select
                    value={employeeForm.role}
                    onChange={(e) => setEmployeeForm(f => ({ ...f, role: e.target.value as any }))}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  >
                    <option value="Manager">Manager</option>
                    <option value="Accountant">Accountant</option>
                    <option value="Staff">Operations Staff</option>
                    <option value="Technician">Technician</option>
                    <option value="Support">Support Staff</option>
                  </select>
                </div>
                <div>
                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider block mb-1">Shift</label>
                  <select
                    value={employeeForm.shift}
                    onChange={(e) => setEmployeeForm(f => ({ ...f, shift: e.target.value as any }))}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  >
                    <option value="Full-time">Full-time</option>
                    <option value="Morning">Morning</option>
                    <option value="Evening">Evening</option>
                    <option value="Night">Night</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider block mb-1">Email Address</label>
                <input
                  type="email"
                  value={employeeForm.email}
                  onChange={(e) => setEmployeeForm(f => ({ ...f, email: e.target.value }))}
                  placeholder="e.g. arif.rahman@jaiben.com"
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                />
              </div>

              <div>
                <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider block mb-1">Phone Number</label>
                <input
                  type="text"
                  value={employeeForm.phone}
                  onChange={(e) => setEmployeeForm(f => ({ ...f, phone: e.target.value }))}
                  placeholder="e.g. +8801711223344"
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider block mb-1">Status</label>
                  <select
                    value={employeeForm.status}
                    onChange={(e) => setEmployeeForm(f => ({ ...f, status: e.target.value as any }))}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  >
                    <option value="Active">Active / On Duty</option>
                    <option value="On Leave">On Leave</option>
                    <option value="Inactive">Inactive</option>
                  </select>
                </div>
                <div>
                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wider block mb-1">Joining Date</label>
                  <input
                    type="date"
                    value={employeeForm.joiningDate}
                    onChange={(e) => setEmployeeForm(f => ({ ...f, joiningDate: e.target.value }))}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  />
                </div>
              </div>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2 bg-slate-50">
              <button
                onClick={() => { setAddEmployeeModal(false); setEditingEmployee(null); }}
                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm font-semibold hover:bg-slate-100 transition-all"
              >
                Cancel
              </button>
              <button
                onClick={() => {
                  if (editingEmployee) {
                    setEmployees(prev => prev.map(emp => emp.id === editingEmployee.id ? { ...emp, ...employeeForm } : emp));
                  } else {
                    const nextIdNum = employees.length > 0 
                      ? Math.max(...employees.map(e => parseInt(e.id.split('-')[1]) || 0)) + 1 
                      : 1;
                    const nextIdStr = `EMP-${nextIdNum.toString().padStart(3, '0')}`;
                    const newEmployee: Employee = {
                      id: nextIdStr,
                      ...employeeForm
                    };
                    setEmployees(prev => [...prev, newEmployee]);
                  }
                  setAddEmployeeModal(false);
                  setEditingEmployee(null);
                }}
                disabled={!employeeForm.name || !employeeForm.email || !employeeForm.phone}
                className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-semibold hover:opacity-90 disabled:opacity-50 transition-all"
              >
                {editingEmployee ? 'Save Changes' : 'Register Employee'}
              </button>
            </div>
          </div>
        </div>
      )}

      {deleteEmployeeModal && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm overflow-hidden">
            <div className="p-6 text-center">
              <div className="w-12 h-12 bg-red-50 border border-red-200 rounded-full flex items-center justify-center mx-auto mb-4">
                <AlertTriangle className="w-6 h-6 text-red-600" />
              </div>
              <h3 className="font-bold text-slate-800 text-lg mb-2">Remove Employee</h3>
              <p className="text-sm text-slate-500">
                Are you sure you want to remove <span className="font-semibold text-slate-700">{deleteEmployeeModal.name}</span> from Gulshan Head Office's operational roster?
              </p>
              <div className="mt-3 bg-slate-50 p-3 rounded-lg border border-slate-100 text-left">
                <p className="text-xs text-slate-400 font-mono">ID: {deleteEmployeeModal.id}</p>
                <p className="text-xs font-semibold text-slate-700 capitalize mt-1">Role: {deleteEmployeeModal.role}</p>
              </div>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2 bg-slate-50">
              <button
                onClick={() => setDeleteEmployeeModal(null)}
                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm font-semibold hover:bg-slate-100 transition-all"
              >
                Cancel
              </button>
              <button
                onClick={() => {
                  setEmployees(prev => prev.filter(emp => emp.id !== deleteEmployeeModal.id));
                  setDeleteEmployeeModal(null);
                }}
                className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-semibold hover:bg-red-700 transition-all"
              >
                Confirm Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}