'use client';

import { useState } from 'react';
import Link from 'next/link';
import {
  Users,
  Search,
  Filter,
  Plus,
  MoreVertical,
  Phone,
  Mail,
  MapPin,
  Clock,
  Shield,
  Bike,
  Eye,
  Edit,
  Trash2,
  X,
  ChevronDown,
  ChevronUp,
  Download,
  Upload,
  MoreHorizontal,
  CheckCircle,
  XCircle,
  AlertTriangle,
  User,
  Calendar,
  FileText,
  CreditCard,
  MessageSquare,
  Bell,
  Activity,
  TrendingUp,
  Wrench,
  Car,
  FileCheck,
  FileX,
  MapPinned,
  Navigation,
  Map,
  Award,
  Heart,
  Briefcase,
  Image,
  Clock3,
  DollarSign,
  Star,
  UsersRound,
  PhoneCall,
  MessageCircle,
  Send,
  RefreshCcw,
  Copy,
  ExternalLink,
  Info,
  AlertCircle,
  CheckSquare,
  Ban,
  LayoutGrid,
  List
} from 'lucide-react';

interface DrivingLicense {
  number: string;
  issueDate: string;
  expiryDate: string;
  class: string;
  status: 'valid' | 'expired' | 'suspended';
  imageUrl?: string;
}

interface Document {
  type: 'nid' | 'passport' | 'driving_license' | 'other';
  number: string;
  imageFront?: string;
  imageBack?: string;
  verified: boolean;
  verifiedAt?: string;
}

interface BikerBattery {
  id: string;
  brand: string;
  model: string;
  voltage: string;
  capacity: string;
  health: number;
  isExtra: boolean;
  isRented: boolean;
  rentPrice?: number;
  addedAt: string;
}

interface Biker {
  id: string;
  name: string;
  profileImage?: string;
  email: string;
  phone: string;
  alternatePhone?: string;
  status: 'active' | 'pending' | 'inactive' | 'blocked';
  createdAt: string;
  location: string;
  address: string;
  dateOfBirth: string;
  gender: 'male' | 'female' | 'other';
  bloodGroup: 'A+' | 'A-' | 'B+' | 'B-' | 'O+' | 'O-' | 'AB+' | 'AB-';
  occupation: string;
  emergencyContact: string;
  emergencyPhone: string;
  emergencyRelation: string;

  drivingLicense: DrivingLicense;
  documents: Document[];

  gpsDeviceId?: string;
  gpsPhone?: string;

  totalRides: number;
  totalDistance: number;
  totalRideHours: number;
  totalSpent: number;
  currentBike?: string;
  bikePlate?: string;
  depositPaid: number;
  walletBalance: number;

  rating: number;
  totalRatings: number;
  responseTime: number;
  cancellationRate: number;

  kycStatus: 'verified' | 'pending' | 'rejected';
  kycRejectReason?: string;
  kycVerifiedAt?: string;

  membershipType: 'free' | 'basic' | 'premium' | 'vip';
  referralCode?: string;
  referredBy?: string;

  insuranceStatus: 'active' | 'expired' | 'none';
  insuranceExpiry?: string;

  notes?: string;
  tags?: string[];

  lastRideAt?: string;
  firstRideAt?: string;
  joinedFrom: string;

  pendingRent?: number;
  pendingRentDays?: number;
  lastRentPaidAt?: string;
  batteries?: BikerBattery[];
}

const mockBikers: Biker[] = [
  {
    id: 'B001',
    name: 'Rahim Ahmed',
    profileImage: 'https://picsum.photos/200/200?random=1',
    email: 'rahim@email.com',
    phone: '01712345678',
    alternatePhone: '01912345678',
    status: 'active',
    createdAt: '2024-01-15',
    location: 'Gulshan, Dhaka',
    address: 'House 12, Road 5, Gulshan 1, Dhaka 1212',
    dateOfBirth: '1995-03-15',
    gender: 'male',
    bloodGroup: 'O+',
    occupation: 'Student',
    emergencyContact: 'Karim Ahmed',
    emergencyPhone: '01712345679',
    emergencyRelation: 'Brother',
    drivingLicense: {
      number: 'DL2024001234',
      issueDate: '2023-01-15',
      expiryDate: '2033-01-14',
      class: 'M',
      status: 'valid'
    },
    documents: [
      { type: 'nid', number: '1234567890', verified: true, verifiedAt: '2024-01-15' }
    ],
    gpsDeviceId: 'GP-001234',
    gpsPhone: '01712345678',
    totalRides: 156,
    totalDistance: 2340,
    totalRideHours: 468,
    totalSpent: 54500,
    currentBike: 'Etron ET50',
    bikePlate: 'Dhaka Metro Cha-1234',
    depositPaid: 5000,
    walletBalance: 1250,
    rating: 4.8,
    totalRatings: 156,
    responseTime: 2.5,
    cancellationRate: 2.1,
    kycStatus: 'verified',
    kycVerifiedAt: '2024-01-15',
    membershipType: 'premium',
    referralCode: 'RAHIM50',
    referredBy: 'Ali007',
    insuranceStatus: 'active',
    insuranceExpiry: '2025-01-14',
    tags: ['reliable', 'frequent'],
    lastRideAt: '2024-03-21',
    firstRideAt: '2024-01-15',
    joinedFrom: 'App Store',
    pendingRent: 0,
    pendingRentDays: 0,
    lastRentPaidAt: '2024-03-21',
    batteries: [
      { id: 'BAT-001234', brand: 'PowerMax', model: 'PM-60V-30Ah', voltage: '60V', capacity: '30Ah', health: 92, isExtra: false, isRented: false, addedAt: '2024-01-15' },
      { id: 'BAT-001235', brand: 'PowerMax', model: 'PM-60V-30Ah', voltage: '60V', capacity: '30Ah', health: 88, isExtra: true, isRented: true, rentPrice: 30, addedAt: '2024-02-01' },
    ],
  },
  {
    id: 'B002',
    name: 'Karim Hasan',
    email: 'karim@email.com',
    profileImage: 'https://picsum.photos/200/200?random=1',
    phone: '01712345679',
    status: 'active',
    createdAt: '2024-02-20',
    location: 'Banani, Dhaka',
    address: 'House 5, Road 11, Banani, Dhaka 1213',
    dateOfBirth: '1990-07-22',
    gender: 'male',
    bloodGroup: 'B+',
    occupation: 'Business',
    emergencyContact: 'Rahim Hasan',
    emergencyPhone: '01712345678',
    emergencyRelation: 'Friend',
    drivingLicense: {
      number: 'DL2024005678',
      issueDate: '2023-06-20',
      expiryDate: '2033-06-19',
      class: 'M',
      status: 'valid'
    },
    documents: [
      { type: 'nid', number: '1234567891', verified: true, verifiedAt: '2024-02-20' }
    ],
    gpsDeviceId: 'GP-001235',
    totalRides: 89,
    totalDistance: 1335,
    totalRideHours: 267,
    totalSpent: 31200,
    currentBike: 'Yadea DT3',
    bikePlate: 'Dhaka Metro Cha-5678',
    depositPaid: 5000,
    walletBalance: 800,
    rating: 4.5,
    totalRatings: 89,
    responseTime: 3.2,
    cancellationRate: 4.5,
    kycStatus: 'verified',
    membershipType: 'basic',
    insuranceStatus: 'active',
    insuranceExpiry: '2025-02-19',
    joinedFrom: 'Website',
    batteries: [
      { id: 'BAT-002345', brand: 'Yadea', model: 'YA-48V-20Ah', voltage: '48V', capacity: '20Ah', health: 85, isExtra: false, isRented: false, addedAt: '2024-02-20' },
    ],
  },
  {
    id: 'B003',
    name: 'Jamal Mahmud',
    profileImage: 'https://picsum.photos/200/200?random=3',
    email: 'jamal@email.com',
    phone: '01712345680',
    status: 'pending',
    createdAt: '2024-03-18',
    location: 'Uttara, Dhaka',
    address: 'Sector 10, Uttara, Dhaka 1230',
    dateOfBirth: '1988-11-05',
    gender: 'male',
    bloodGroup: 'A+',
    occupation: 'Job Holder',
    emergencyContact: 'Mahmud Ali',
    emergencyPhone: '01712345681',
    emergencyRelation: 'Father',
    drivingLicense: {
      number: '',
      issueDate: '',
      expiryDate: '',
      class: 'M',
      status: 'valid'
    },
    documents: [
      { type: 'nid', number: '1234567892', verified: false }
    ],
    totalRides: 0,
    totalDistance: 0,
    totalRideHours: 0,
    totalSpent: 0,
    depositPaid: 0,
    walletBalance: 0,
    rating: 0,
    totalRatings: 0,
    responseTime: 0,
    cancellationRate: 0,
    kycStatus: 'pending',
    membershipType: 'free',
    insuranceStatus: 'none',
    joinedFrom: 'Referral',
  },
  {
    id: 'B004',
    name: 'Ali Rahman',
    profileImage: 'https://picsum.photos/200/200?random=4',
    email: 'ali@email.com',
    phone: '01712345681',
    status: 'active',
    createdAt: '2023-12-01',
    location: 'Dhanmondi, Dhaka',
    address: 'House 27, Road 8, Dhanmondi, Dhaka 1205',
    dateOfBirth: '1992-06-10',
    gender: 'male',
    bloodGroup: 'AB+',
    occupation: 'Engineer',
    emergencyContact: 'Rahman Ali',
    emergencyPhone: '01712345682',
    emergencyRelation: 'Brother',
    drivingLicense: {
      number: 'DL202301234',
      issueDate: '2023-05-10',
      expiryDate: '2033-05-09',
      class: 'M',
      status: 'valid'
    },
    documents: [
      { type: 'nid', number: '1234567893', verified: true, verifiedAt: '2023-12-01' }
    ],
    gpsDeviceId: 'GP-001236',
    totalRides: 234,
    totalDistance: 3510,
    totalRideHours: 702,
    totalSpent: 81900,
    currentBike: 'AIMA Lightning',
    bikePlate: 'Dhaka Metro Cha-9012',
    depositPaid: 5000,
    walletBalance: 2100,
    rating: 4.9,
    totalRatings: 234,
    responseTime: 1.8,
    cancellationRate: 1.2,
    kycStatus: 'verified',
    membershipType: 'vip',
    insuranceStatus: 'active',
    insuranceExpiry: '2024-12-01',
    tags: ['top_rider', 'vip'],
    joinedFrom: 'Facebook',
    pendingRent: 150,
    pendingRentDays: 3,
    lastRentPaidAt: '2024-03-18',
    batteries: [
      { id: 'BAT-003456', brand: 'AIMA', model: 'AIMA-60V-40Ah', voltage: '60V', capacity: '40Ah', health: 95, isExtra: false, isRented: false, addedAt: '2023-12-01' },
      { id: 'BAT-003457', brand: 'AIMA', model: 'AIMA-60V-40Ah', voltage: '60V', capacity: '40Ah', health: 90, isExtra: true, isRented: true, rentPrice: 35, addedAt: '2024-01-15' },
      { id: 'BAT-003458', brand: 'AIMA', model: 'AIMA-60V-40Ah', voltage: '60V', capacity: '40Ah', health: 82, isExtra: true, isRented: false, rentPrice: 35, addedAt: '2024-02-20' },
    ],
  },
  {
    id: 'B005',
    name: 'Mostafa Kamal',
    email: 'mostafa@email.com',
    phone: '01712345682',
    status: 'inactive',
    createdAt: '2023-08-15',
    location: 'Mirpur, Dhaka',
    address: 'Mirpur 1, Dhaka 1216',
    dateOfBirth: '1997-02-28',
    gender: 'male',
    bloodGroup: 'O-',
    occupation: 'Teacher',
    emergencyContact: 'Kamal Mostafa',
    emergencyPhone: '01712345683',
    emergencyRelation: 'Father',
    drivingLicense: {
      number: 'DL2022009876',
      issueDate: '2022-08-15',
      expiryDate: '2024-08-14',
      class: 'M',
      status: 'expired'
    },
    documents: [
      { type: 'nid', number: '1234567894', verified: true, verifiedAt: '2023-08-15' }
    ],
    totalRides: 45,
    totalDistance: 675,
    totalRideHours: 135,
    totalSpent: 15750,
    depositPaid: 5000,
    walletBalance: 0,
    rating: 3.8,
    totalRatings: 45,
    responseTime: 4.5,
    cancellationRate: 8.9,
    kycStatus: 'verified',
    membershipType: 'free',
    insuranceStatus: 'expired',
    insuranceExpiry: '2024-01-14',
    joinedFrom: 'App Store',
    batteries: [
      { id: 'BAT-004567', brand: 'Etron', model: 'ET-48V-24Ah', voltage: '48V', capacity: '24Ah', health: 65, isExtra: false, isRented: false, addedAt: '2023-08-15' },
    ],
  },
];

const statusColors: Record<string, string> = {
  active: 'bg-green-100 text-green-700',
  pending: 'bg-amber-100 text-amber-700',
  inactive: 'bg-slate-100 text-slate-500',
  blocked: 'bg-red-100 text-red-700',
};

const statusLabels: Record<string, string> = {
  active: 'Active',
  pending: 'Pending',
  inactive: 'Inactive',
  blocked: 'Blocked',
};

const kycColors: Record<string, string> = {
  verified: 'bg-green-100 text-green-700',
  pending: 'bg-amber-100 text-amber-700',
  rejected: 'bg-red-100 text-red-700',
};

const membershipColors: Record<string, string> = {
  free: 'bg-slate-100 text-slate-600',
  basic: 'bg-blue-100 text-blue-700',
  premium: 'bg-purple-100 text-purple-700',
  vip: 'bg-amber-100 text-amber-700',
};

export default function BikersPage() {
  const [bikers, setBikers] = useState<Biker[]>(mockBikers);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [kycFilter, setKycFilter] = useState('all');
  const [selectedBiker, setSelectedBiker] = useState<Biker | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [showDetailsModal, setShowDetailsModal] = useState(false);
  const [editingBiker, setEditingBiker] = useState<Biker | null>(null);
  const [activeTab, setActiveTab] = useState('personal');
  const [sortField, setSortField] = useState<string>('name');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
  const [viewMode, setViewMode] = useState<'table' | 'cards'>('table');

  const filteredBikers = bikers.filter(biker => {
    const matchesSearch = biker.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      biker.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      biker.phone.includes(searchQuery) ||
      biker.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      biker.drivingLicense.number.toLowerCase().includes(searchQuery.toLowerCase()) ||
      biker.gpsDeviceId?.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesStatus = statusFilter === 'all' || biker.status === statusFilter;
    const matchesKyc = kycFilter === 'all' || biker.kycStatus === kycFilter;
    const matchesRent = (statusFilter === 'rent_pending')
      ? (biker.pendingRent && biker.pendingRent > 0)
      : true;
    return matchesSearch && matchesStatus && matchesKyc && matchesRent;
  });

  const sortedBikers = [...filteredBikers].sort((a, b) => {
    const aVal = String(a[sortField as keyof Biker] || '');
    const bVal = String(b[sortField as keyof Biker] || '');
    if (sortOrder === 'asc') return aVal.localeCompare(bVal);
    return bVal.localeCompare(aVal);
  });

  const handleSort = (field: string) => {
    if (sortField === field) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortOrder('asc');
    }
  };

  const handleAddBiker = () => {
    setEditingBiker({
      id: `B${String(bikers.length + 1).padStart(3, '0')}`,
      name: '',
      email: '',
      phone: '',
      status: 'pending',
      createdAt: new Date().toISOString().split('T')[0],
      location: '',
      address: '',
      dateOfBirth: '',
      gender: 'male',
      bloodGroup: 'O+',
      occupation: '',
      emergencyContact: '',
      emergencyPhone: '',
      emergencyRelation: '',
      drivingLicense: { number: '', issueDate: '', expiryDate: '', class: 'M', status: 'valid' },
      documents: [{ type: 'nid', number: '', verified: false }],
      totalRides: 0,
      totalDistance: 0,
      totalRideHours: 0,
      totalSpent: 0,
      depositPaid: 0,
      walletBalance: 0,
      rating: 0,
      totalRatings: 0,
      responseTime: 0,
      cancellationRate: 0,
      kycStatus: 'pending',
      membershipType: 'free',
      insuranceStatus: 'none',
      joinedFrom: 'Direct',
    });
    setShowModal(true);
  };

  const handleEditBiker = (biker: Biker) => {
    setEditingBiker(JSON.parse(JSON.stringify(biker)));
    setShowModal(true);
  };

  const handleDeleteBiker = (id: string) => {
    if (confirm('Are you sure you want to delete this biker?')) {
      setBikers(bikers.filter(b => b.id !== id));
    }
  };

  const handleSaveBiker = () => {
    if (editingBiker) {
      const existingIndex = bikers.findIndex(b => b.id === editingBiker.id);
      if (existingIndex >= 0) {
        const newBikers = [...bikers];
        newBikers[existingIndex] = editingBiker;
        setBikers(newBikers);
      } else {
        setBikers([...bikers, editingBiker]);
      }
    }
    setShowModal(false);
    setEditingBiker(null);
  };

  const handleViewDetails = (biker: Biker) => {
    setSelectedBiker(biker);
    setShowDetailsModal(true);
    setActiveTab('personal');
  };

  const activeCount = bikers.filter(b => b.status === 'active').length;
  const pendingCount = bikers.filter(b => b.status === 'pending').length;
  const blockedCount = bikers.filter(b => b.status === 'blocked').length;
  const verifiedKyc = bikers.filter(b => b.kycStatus === 'verified').length;

  return (
    <div className="p-4 lg:p-6">
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Bikers Management</h1>
          <p className="text-sm text-slate-500 mt-1">Manage registered biker accounts with full details</p>
        </div>
        {/* <button
          onClick={handleAddBiker}
          className="py-2.5 px-4 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark transition-colors flex items-center gap-2"
        >
          <Plus className="w-4 h-4" /> Add New Biker
        </button> */}
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-6 gap-4 mb-6">
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <div className="flex items-center gap-2 mb-1">
            <Users className="w-4 h-4 text-blue-600" />
            <span className="text-xs text-slate-500">Total</span>
          </div>
          <p className="text-2xl font-extrabold text-slate-800">{bikers.length}</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <div className="flex items-center gap-2 mb-1">
            <Activity className="w-4 h-4 text-green-600" />
            <span className="text-xs text-slate-500">Active</span>
          </div>
          <p className="text-2xl font-extrabold text-green-600">{activeCount}</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <div className="flex items-center gap-2 mb-1">
            <Clock className="w-4 h-4 text-amber-600" />
            <span className="text-xs text-slate-500">Pending</span>
          </div>
          <p className="text-2xl font-extrabold text-amber-600">{pendingCount}</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <div className="flex items-center gap-2 mb-1">
            <Ban className="w-4 h-4 text-red-600" />
            <span className="text-xs text-slate-500">Blocked</span>
          </div>
          <p className="text-2xl font-extrabold text-red-600">{blockedCount}</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <div className="flex items-center gap-2 mb-1">
            <Shield className="w-4 h-4 text-purple-600" />
            <span className="text-xs text-slate-500">Verified KYC</span>
          </div>
          <p className="text-2xl font-extrabold text-purple-600">{verifiedKyc}</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <div className="flex items-center gap-2 mb-1">
            <Navigation className="w-4 h-4 text-slate-600" />
            <span className="text-xs text-slate-500">GPS Devices</span>
          </div>
          <p className="text-2xl font-extrabold text-slate-600">{bikers.filter(b => b.gpsDeviceId).length}</p>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100">
        <div className="p-4 border-b border-slate-100 flex flex-col lg:flex-row lg:items-center gap-3">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
            <input
              type="text"
              placeholder="Search by name, email, phone, ID, license number, GPS device ID..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
            />
          </div>
          <div className="flex items-center gap-2 flex-wrap">
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="py-2 px-3 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 bg-white"
            >
              <option value="all">All Status</option>
              <option value="active">Active</option>
              <option value="pending">Pending</option>
              <option value="inactive">Inactive</option>
              <option value="blocked">Blocked</option>
              <option value="rent_pending" className="text-amber-600">Rent Pending</option>
            </select>
            <select
              value={kycFilter}
              onChange={(e) => setKycFilter(e.target.value)}
              className="py-2 px-3 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 bg-white"
            >
              <option value="all">All KYC</option>
              <option value="verified">Verified</option>
              <option value="pending">Pending</option>
              <option value="rejected">Rejected</option>
            </select>
            <button
              onClick={() => setViewMode(viewMode === 'table' ? 'cards' : 'table')}
              className="py-2 px-3 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2"
            >
              {viewMode === 'table' ? <LayoutGrid className="w-4 h-4" /> : <List className="w-4 h-4" />}
              {viewMode === 'table' ? 'Cards' : 'Table'}
            </button>
            <button className="py-2 px-3 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2">
              <Download className="w-4 h-4" /> Export
            </button>
            <button className="py-2 px-3 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2">
              <Upload className="w-4 h-4" /> Import
            </button>
          </div>
        </div>

        {viewMode === 'table' ? (
          <>
            <div className="hidden md:block 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 tracking-wider">Biker</th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">License & GPS</th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Location</th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rides & Distance</th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Financial</th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Member</th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">KYC</th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rent Status</th>
                    <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-50">
                  {sortedBikers.map(biker => (
                    <tr key={biker.id} className="hover:bg-slate-50 transition-colors">
                      <td className="px-4 py-3">
                        <Link href={`/admin/bikers/${biker.id}`} className="flex items-center gap-3">
                          {biker.profileImage ? (
                            <img src={biker.profileImage} alt={biker.name} className="w-10 h-10 rounded-full object-cover" />
                          ) : (
                            <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                              <span className="text-sm font-bold text-blue-600">{biker.name.charAt(0)}</span>
                            </div>
                          )}
                          <div>
                            <p className="text-sm font-medium text-slate-700">{biker.name}</p>
                            <p className="text-xs text-slate-400">{biker.phone}</p>
                          </div>
                        </Link>
                      </td>
                      <td className="px-4 py-3">
                        <p className="text-xs text-slate-600 flex items-center gap-1">
                          <Car className="w-3 h-3" /> {biker.drivingLicense.number || 'No License'}
                        </p>
                        <p className="text-xs text-slate-400 flex items-center gap-1">
                          <Navigation className="w-3 h-3" /> GPS: {biker.gpsDeviceId || 'No GPS'}
                        </p>
                        <p className="text-xs text-slate-400">Class: {biker.drivingLicense.class || 'N/A'}</p>
                      </td>
                      <td className="px-4 py-3">
                        <p className="text-sm text-slate-600 text-xs">{biker.location}</p>
                      </td>
                      <td className="px-4 py-3">
                        <p className="text-sm font-medium text-slate-700">{biker.totalRides} rides</p>
                        <p className="text-xs text-slate-400">{biker.totalDistance.toLocaleString()} km</p>
                      </td>
                      <td className="px-4 py-3">
                        <p className="text-sm font-semibold text-green-600">৳{biker.totalSpent.toLocaleString()}</p>
                        <p className="text-xs text-slate-400">Wallet: ৳{biker.walletBalance}</p>
                      </td>
                      <td className="px-4 py-3">
                        <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${membershipColors[biker.membershipType]}`}>
                          {biker.membershipType}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${kycColors[biker.kycStatus]}`}>
                          {biker.kycStatus === 'verified' && <CheckCircle className="w-3 h-3" />}
                          {biker.kycStatus === 'pending' && <Clock className="w-3 h-3" />}
                          {biker.kycStatus === 'rejected' && <XCircle className="w-3 h-3" />}
                          {biker.kycStatus}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        {(biker.pendingRent && biker.pendingRent > 0) ? (
                          <div>
                            <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
                              <AlertTriangle className="w-3 h-3" /> Pending
                            </span>
                            <p className="text-xs text-amber-600 mt-1">৳{biker.pendingRent} ({biker.pendingRentDays}d)</p>
                          </div>
                        ) : (
                          <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-green-100 text-green-700">
                            <CheckCircle className="w-3 h-3" /> Clear
                          </span>
                        )}
                      </td>
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-1">
                          <a href={`tel:${biker.phone}`} className="p-2 hover:bg-green-50 rounded-lg" title="Call">
                            <PhoneCall className="w-4 h-4 text-green-600" />
                          </a>
                          <a href={`sms:${biker.phone}`} className="p-2 hover:bg-blue-50 rounded-lg" title="Message">
                            <MessageCircle className="w-4 h-4 text-blue-500" />
                          </a>
                          <Link href={`/admin/bikers/${biker.id}`} className="p-2 hover:bg-slate-100 rounded-lg" title="View Details">
                            <Eye className="w-4 h-4 text-blue-500" />
                          </Link>
                          <Link href={`/admin/bikers/${biker.id}`} className="p-2 hover:bg-slate-100 rounded-lg" title="Edit">
                            <Edit className="w-4 h-4 text-slate-400" />
                          </Link>
                          <button onClick={() => handleDeleteBiker(biker.id)} className="p-2 hover:bg-red-50 rounded-lg" title="Delete">
                            <Trash2 className="w-4 h-4 text-red-400" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="md:hidden p-4">
              <div className="grid grid-cols-1 gap-4">
                {sortedBikers.map(biker => (
                  <Link key={biker.id} href={`/admin/bikers/${biker.id}`} className="block bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center gap-3">
                        {biker.profileImage ? (
                          <img src={biker.profileImage} alt={biker.name} className="w-12 h-12 rounded-full object-cover" />
                        ) : (
                          <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                            <span className="text-lg font-bold text-blue-600">{biker.name.charAt(0)}</span>
                          </div>
                        )}
                        <div>
                          <p className="font-semibold text-slate-700">{biker.name}</p>
                          <p className="text-sm text-slate-400">{biker.phone}</p>
                        </div>
                      </div>
                    </div>
                    <div className="flex flex-wrap gap-2 mb-3">
                      <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[biker.status]}`}>
                        {statusLabels[biker.status] || biker.status}
                      </span>
                      <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${kycColors[biker.kycStatus]}`}>
                        {biker.kycStatus}
                      </span>
                      <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${membershipColors[biker.membershipType]}`}>
                        {biker.membershipType}
                      </span>
                      {biker.rating > 0 && (
                        <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
                          ★ {biker.rating}
                        </span>
                      )}
                    </div>
                    <div className="grid grid-cols-2 gap-2 text-xs mb-3">
                      <div className="bg-slate-50 rounded-lg p-2">
                        <p className="text-slate-400">Total Rides</p>
                        <p className="font-medium text-slate-700">{biker.totalRides}</p>
                      </div>
                      <div className="bg-slate-50 rounded-lg p-2">
                        <p className="text-slate-400">Distance</p>
                        <p className="font-medium text-slate-700">{biker.totalDistance.toLocaleString()} km</p>
                      </div>
                      <div className="bg-slate-50 rounded-lg p-2">
                        <p className="text-slate-400">Active Rentals</p>
                        <p className="font-medium text-slate-700">-</p>
                      </div>
                      <div className="bg-slate-50 rounded-lg p-2">
                        <p className="text-slate-400">Completed</p>
                        <p className="font-medium text-slate-700">{biker.totalRides}</p>
                      </div>
                    </div>
                    <div className="grid grid-cols-2 gap-2 text-xs mb-3">
                      <div className="bg-slate-50 rounded-lg p-2">
                        <p className="text-slate-400">License</p>
                        <p className="font-medium text-slate-700 truncate">{biker.drivingLicense.number || 'N/A'}</p>
                      </div>
                      <div className="bg-slate-50 rounded-lg p-2">
                        <p className="text-slate-400">Location</p>
                        <p className="font-medium text-slate-700 truncate">{biker.location}</p>
                      </div>
                    </div>
                    <div className="flex items-center justify-between pt-3 border-t border-slate-100">
                      <div>
                        <p className="text-sm font-semibold text-green-600">৳{biker.walletBalance.toLocaleString()}</p>
                        <p className="text-xs text-slate-400">Wallet</p>
                      </div>
                      <span className="text-xs text-blue-600 font-medium">View Details →</span>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          </>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
            {sortedBikers.map(biker => (
              <Link key={biker.id} href={`/admin/bikers/${biker.id}`} className="block bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow">
                <div className="flex items-start justify-between mb-3">
                  <div className="flex items-center gap-3">
                    {biker.profileImage ? (
                      <img src={biker.profileImage} alt={biker.name} className="w-12 h-12 rounded-full object-cover" />
                    ) : (
                      <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                        <span className="text-lg font-bold text-blue-600">{biker.name.charAt(0)}</span>
                      </div>
                    )}
                    <div>
                      <p className="font-semibold text-slate-700">{biker.name}</p>
                      <p className="text-sm text-slate-400">{biker.phone}</p>
                    </div>
                  </div>
                  <button onClick={(e) => { e.preventDefault(); handleViewDetails(biker); }} className="p-1.5 hover:bg-slate-100 rounded-lg">
                    <Eye className="w-4 h-4 text-blue-500" />
                  </button>
                </div>
                <div className="flex flex-wrap gap-2 mb-3">
                  <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[biker.status]}`}>
                    {statusLabels[biker.status] || biker.status}
                  </span>
                  <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${kycColors[biker.kycStatus]}`}>
                    {biker.kycStatus}
                  </span>
                  <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${membershipColors[biker.membershipType]}`}>
                    {biker.membershipType}
                  </span>
                  {biker.rating > 0 && (
                    <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
                      ★ {biker.rating}
                    </span>
                  )}
                </div>
                <div className="grid grid-cols-2 gap-2 text-xs">
                  <div className="bg-slate-50 rounded-lg p-2">
                    <p className="text-slate-400">Rides</p>
                    <p className="font-medium text-slate-700">{biker.totalRides}</p>
                  </div>
                  <div className="bg-slate-50 rounded-lg p-2">
                    <p className="text-slate-400">Distance</p>
                    <p className="font-medium text-slate-700">{biker.totalDistance.toLocaleString()} km</p>
                  </div>
                  <div className="bg-slate-50 rounded-lg p-2">
                    <p className="text-slate-400">Wallet</p>
                    <p className="font-medium text-green-600">৳{biker.walletBalance}</p>
                  </div>
                  <div className="bg-slate-50 rounded-lg p-2">
                    <p className="text-slate-400">Location</p>
                    <p className="font-medium text-slate-700 truncate">{biker.location}</p>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}

        <div className="p-4 border-t border-slate-100 flex items-center justify-between">
          <p className="text-sm text-slate-500">
            Showing <span className="font-medium">1</span> to <span className="font-medium">{sortedBikers.length}</span> of <span className="font-medium">{sortedBikers.length}</span> results
          </p>
          <div className="flex items-center gap-2">
            <button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Previous</button>
            <button className="px-3 py-1.5 bg-accent text-white rounded-lg text-sm font-medium">1</button>
            <button className="px-3 py-1.5 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Next</button>
          </div>
        </div>
      </div>

      {/* Add/Edit Modal with Tabs */}
      {showModal && editingBiker && (
        <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-4xl max-h-[90vh] overflow-hidden flex flex-col">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">
                {bikers.find(b => b.id === editingBiker.id) ? 'Edit Biker' : 'Add New Biker'}
              </h2>
              <button onClick={() => setShowModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>

            <div className="border-b border-slate-100 flex overflow-x-auto">
              <button
                onClick={() => setActiveTab('personal')}
                className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'personal' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}
              >
                <User className="w-4 h-4 inline mr-1" /> Personal
              </button>
              <button
                onClick={() => setActiveTab('license')}
                className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'license' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}
              >
                <Car className="w-4 h-4 inline mr-1" /> License & GPS
              </button>
              <button
                onClick={() => setActiveTab('documents')}
                className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'documents' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}
              >
                <FileText className="w-4 h-4 inline mr-1" /> Documents
              </button>
              <button
                onClick={() => setActiveTab('stats')}
                className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'stats' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}
              >
                <TrendingUp className="w-4 h-4 inline mr-1" /> Statistics
              </button>
              <button
                onClick={() => setActiveTab('account')}
                className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'account' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}
              >
                <CreditCard className="w-4 h-4 inline mr-1" /> Account
              </button>
            </div>

            <div className="p-5 overflow-y-auto flex-1">
              {activeTab === 'personal' && (
                <div className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Full Name *</label>
                      <input type="text" value={editingBiker.name} onChange={(e) => setEditingBiker({ ...editingBiker, name: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Enter full name" />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Phone Number *</label>
                      <input type="text" value={editingBiker.phone} onChange={(e) => setEditingBiker({ ...editingBiker, phone: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="01XXXXXXXXX" />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Alternate Phone</label>
                      <input type="text" value={editingBiker.alternatePhone || ''} onChange={(e) => setEditingBiker({ ...editingBiker, alternatePhone: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Optional" />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Email *</label>
                      <input type="email" value={editingBiker.email} onChange={(e) => setEditingBiker({ ...editingBiker, email: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="email@example.com" />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Date of Birth</label>
                      <input type="date" value={editingBiker.dateOfBirth} onChange={(e) => setEditingBiker({ ...editingBiker, dateOfBirth: e.target.value })} 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">Gender</label>
                      <select value={editingBiker.gender} onChange={(e) => setEditingBiker({ ...editingBiker, gender: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                        <option value="other">Other</option>
                      </select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Blood Group</label>
                      <select value={editingBiker.bloodGroup} onChange={(e) => setEditingBiker({ ...editingBiker, bloodGroup: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                        <option value="A+">A+</option>
                        <option value="A-">A-</option>
                        <option value="B+">B+</option>
                        <option value="B-">B-</option>
                        <option value="O+">O+</option>
                        <option value="O-">O-</option>
                        <option value="AB+">AB+</option>
                        <option value="AB-">AB-</option>
                      </select>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Occupation</label>
                      <input type="text" value={editingBiker.occupation} onChange={(e) => setEditingBiker({ ...editingBiker, occupation: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Job title" />
                    </div>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-slate-600 mb-1 block">Address</label>
                    <input type="text" value={editingBiker.address} onChange={(e) => setEditingBiker({ ...editingBiker, address: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Full address" />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Emergency Contact Name</label>
                      <input type="text" value={editingBiker.emergencyContact} onChange={(e) => setEditingBiker({ ...editingBiker, emergencyContact: e.target.value })} 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">Emergency Phone</label>
                      <input type="text" value={editingBiker.emergencyPhone} onChange={(e) => setEditingBiker({ ...editingBiker, emergencyPhone: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Relation</label>
                      <input type="text" value={editingBiker.emergencyRelation} onChange={(e) => setEditingBiker({ ...editingBiker, emergencyRelation: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="e.g. Brother, Father" />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Status</label>
                      <select value={editingBiker.status} onChange={(e) => setEditingBiker({ ...editingBiker, status: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                        <option value="active">Active</option>
                        <option value="pending">Pending</option>
                        <option value="inactive">Inactive</option>
                        <option value="blocked">Blocked</option>
                      </select>
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'license' && (
                <div className="space-y-4">
                  <h3 className="font-semibold text-slate-800 mb-3">Driving License</h3>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">License Number</label>
                      <input type="text" value={editingBiker.drivingLicense.number} onChange={(e) => setEditingBiker({ ...editingBiker, drivingLicense: { ...editingBiker.drivingLicense, number: e.target.value } })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="DL2024XXXXXX" />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">License Class</label>
                      <select value={editingBiker.drivingLicense.class} onChange={(e) => setEditingBiker({ ...editingBiker, drivingLicense: { ...editingBiker.drivingLicense, class: e.target.value } })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                        <option value="M">Class M - Motorcycle</option>
                        <option value="M1">Class M1 - Light Motorcycle</option>
                        <option value="M2">Class M2 - Heavy Motorcycle</option>
                      </select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Issue Date</label>
                      <input type="date" value={editingBiker.drivingLicense.issueDate} onChange={(e) => setEditingBiker({ ...editingBiker, drivingLicense: { ...editingBiker.drivingLicense, issueDate: e.target.value } })} 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">Expiry Date</label>
                      <input type="date" value={editingBiker.drivingLicense.expiryDate} onChange={(e) => setEditingBiker({ ...editingBiker, drivingLicense: { ...editingBiker.drivingLicense, expiryDate: e.target.value } })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                    </div>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-slate-600 mb-1 block">License Status</label>
                    <select value={editingBiker.drivingLicense.status} onChange={(e) => setEditingBiker({ ...editingBiker, drivingLicense: { ...editingBiker.drivingLicense, status: e.target.value as any } })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                      <option value="valid">Valid</option>
                      <option value="expired">Expired</option>
                      <option value="suspended">Suspended</option>
                    </select>
                  </div>

                  <h3 className="font-semibold text-slate-800 mt-6 mb-3">GPS Tracking Device</h3>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">GPS Device ID</label>
                      <input type="text" value={editingBiker.gpsDeviceId || ''} onChange={(e) => setEditingBiker({ ...editingBiker, gpsDeviceId: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="GP-XXXXXX" />
                    </div>
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">GPS Phone Number</label>
                      <input type="text" value={editingBiker.gpsPhone || ''} onChange={(e) => setEditingBiker({ ...editingBiker, gpsPhone: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Linked phone number" />
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'documents' && (
                <div className="space-y-4">
                  <h3 className="font-semibold text-slate-800 mb-3">Documents</h3>
                  {editingBiker.documents.map((doc, index) => (
                    <div key={index} className="p-4 bg-slate-50 rounded-lg">
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <label className="text-sm font-medium text-slate-600 mb-1 block">Document Type</label>
                          <select value={doc.type} onChange={(e) => {
                            const newDocs = [...editingBiker.documents];
                            newDocs[index] = { ...newDocs[index], type: e.target.value as any };
                            setEditingBiker({ ...editingBiker, documents: newDocs });
                          }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                            <option value="nid">National ID (NID)</option>
                            <option value="passport">Passport</option>
                            <option value="driving_license">Driving License</option>
                            <option value="other">Other</option>
                          </select>
                        </div>
                        <div>
                          <label className="text-sm font-medium text-slate-600 mb-1 block">Document Number</label>
                          <input type="text" value={doc.number} onChange={(e) => {
                            const newDocs = [...editingBiker.documents];
                            newDocs[index] = { ...newDocs[index], number: e.target.value };
                            setEditingBiker({ ...editingBiker, documents: newDocs });
                          }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Document number" />
                        </div>
                      </div>
                      <div className="mt-3 flex items-center justify-between">
                        <span className={`inline-flex items-center gap-1 text-sm font-medium px-2.5 py-1 rounded-full ${doc.verified ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
                          {doc.verified ? <CheckCircle className="w-4 h-4" /> : <Clock className="w-4 h-4" />}
                          {doc.verified ? 'Verified' : 'Pending Verification'}
                        </span>
                        <button className="text-sm text-blue-600 hover:underline">Upload Document Images</button>
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {activeTab === 'stats' && (
                <div className="space-y-4">
                  <div className="grid grid-cols-3 gap-4">
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-sm text-slate-500">Total Rides</p>
                      <input type="number" value={editingBiker.totalRides} onChange={(e) => setEditingBiker({ ...editingBiker, totalRides: Number(e.target.value) })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                    </div>
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-sm text-slate-500">Total Distance (km)</p>
                      <input type="number" value={editingBiker.totalDistance} onChange={(e) => setEditingBiker({ ...editingBiker, totalDistance: Number(e.target.value) })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                    </div>
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-sm text-slate-500">Total Ride Hours</p>
                      <input type="number" value={editingBiker.totalRideHours} onChange={(e) => setEditingBiker({ ...editingBiker, totalRideHours: Number(e.target.value) })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-sm text-slate-500">Rating</p>
                      <input type="number" step="0.1" max="5" value={editingBiker.rating} onChange={(e) => setEditingBiker({ ...editingBiker, rating: Number(e.target.value) })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                    </div>
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-sm text-slate-500">Total Ratings</p>
                      <input type="number" value={editingBiker.totalRatings} onChange={(e) => setEditingBiker({ ...editingBiker, totalRatings: Number(e.target.value) })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                    </div>
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-sm text-slate-500">Response Time (min)</p>
                      <input type="number" step="0.1" value={editingBiker.responseTime} onChange={(e) => setEditingBiker({ ...editingBiker, responseTime: Number(e.target.value) })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                    </div>
                  </div>
                  <div className="p-4 bg-slate-50 rounded-lg">
                    <p className="text-sm text-slate-500">Cancellation Rate (%)</p>
                    <input type="number" step="0.1" value={editingBiker.cancellationRate} onChange={(e) => setEditingBiker({ ...editingBiker, cancellationRate: Number(e.target.value) })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
                  </div>
                </div>
              )}

              {activeTab === 'account' && (
                <div className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">KYC Status</label>
                      <select value={editingBiker.kycStatus} onChange={(e) => setEditingBiker({ ...editingBiker, kycStatus: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                        <option value="verified">Verified</option>
                        <option value="pending">Pending</option>
                        <option value="rejected">Rejected</option>
                      </select>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Membership Type</label>
                      <select value={editingBiker.membershipType} onChange={(e) => setEditingBiker({ ...editingBiker, membershipType: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                        <option value="free">Free</option>
                        <option value="basic">Basic</option>
                        <option value="premium">Premium</option>
                        <option value="vip">VIP</option>
                      </select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Total Spent (৳)</label>
                      <input type="number" value={editingBiker.totalSpent} onChange={(e) => setEditingBiker({ ...editingBiker, totalSpent: Number(e.target.value) })} 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">Wallet Balance (৳)</label>
                      <input type="number" value={editingBiker.walletBalance} onChange={(e) => setEditingBiker({ ...editingBiker, walletBalance: Number(e.target.value) })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Deposit Paid (৳)</label>
                      <input type="number" value={editingBiker.depositPaid} onChange={(e) => setEditingBiker({ ...editingBiker, depositPaid: Number(e.target.value) })} 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">Insurance Status</label>
                      <select value={editingBiker.insuranceStatus} onChange={(e) => setEditingBiker({ ...editingBiker, insuranceStatus: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
                        <option value="active">Active</option>
                        <option value="expired">Expired</option>
                        <option value="none">None</option>
                      </select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-slate-600 mb-1 block">Referral Code</label>
                      <input type="text" value={editingBiker.referralCode || ''} onChange={(e) => setEditingBiker({ ...editingBiker, referralCode: e.target.value })} 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">Referred By</label>
                      <input type="text" value={editingBiker.referredBy || ''} onChange={(e) => setEditingBiker({ ...editingBiker, referredBy: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
                    </div>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-slate-600 mb-1 block">Notes</label>
                    <textarea value={editingBiker.notes || ''} onChange={(e) => setEditingBiker({ ...editingBiker, notes: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" rows={3} placeholder="Additional notes about this biker..." />
                  </div>
                </div>
              )}
            </div>

            <div className="p-5 border-t border-slate-100 flex items-center justify-end gap-3">
              <button onClick={() => setShowModal(false)} className="px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">Cancel</button>
              <button onClick={handleSaveBiker} className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-semibold hover:bg-accent-dark">Save Biker</button>
            </div>
          </div>
        </div>
      )}

      {/* View Details Modal */}
      {showDetailsModal && selectedBiker && (
        <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-5xl max-h-[90vh] overflow-hidden flex flex-col">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">Biker Full Profile</h2>
              <button onClick={() => setShowDetailsModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>

            <div className="border-b border-slate-100 flex overflow-x-auto">
              <button onClick={() => setActiveTab('personal')} className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'personal' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}>Personal</button>
              <button onClick={() => setActiveTab('license')} className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'license' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}>License & GPS</button>
              <button onClick={() => setActiveTab('documents')} className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'documents' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}>Documents</button>
              <button onClick={() => setActiveTab('stats')} className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'stats' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}>Statistics</button>
              <button onClick={() => setActiveTab('account')} className={`px-4 py-3 text-sm font-medium whitespace-nowrap ${activeTab === 'account' ? 'border-b-2 border-accent text-accent' : 'text-slate-500'}`}>Account</button>
            </div>

            <div className="p-5 overflow-y-auto flex-1">
              {activeTab === 'personal' && (
                <div className="grid grid-cols-2 gap-6">
                  <div>
                    <div className="flex items-center gap-4 mb-4">
                      {selectedBiker.profileImage ? (
                        <img src={selectedBiker.profileImage} alt={selectedBiker.name} className="w-20 h-20 rounded-full object-cover" />
                      ) : (
                        <div className="w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center">
                          <span className="text-3xl font-bold text-blue-600">{selectedBiker.name.charAt(0)}</span>
                        </div>
                      )}
                      <div>
                        <h3 className="text-xl font-bold text-slate-800">{selectedBiker.name}</h3>
                        <p className="text-sm text-slate-500">ID: {selectedBiker.id}</p>
                        <span className={`inline-flex mt-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[selectedBiker.status]}`}>{statusLabels[selectedBiker.status] || selectedBiker.status}</span>
                      </div>
                    </div>
                    <div className="space-y-3">
                      <p className="flex items-center gap-2 text-sm"><Phone className="w-4 h-4 text-slate-400" /> {selectedBiker.phone}</p>
                      <p className="flex items-center gap-2 text-sm"><Mail className="w-4 h-4 text-slate-400" /> {selectedBiker.email}</p>
                      <p className="flex items-center gap-2 text-sm"><MapPin className="w-4 h-4 text-slate-400" /> {selectedBiker.location}</p>
                      <p className="flex items-center gap-2 text-sm"><Calendar className="w-4 h-4 text-slate-400" /> DOB: {selectedBiker.dateOfBirth}</p>
                      <p className="flex items-center gap-2 text-sm"><Heart className="w-4 h-4 text-slate-400" /> Blood: {selectedBiker.bloodGroup}</p>
                      <p className="flex items-center gap-2 text-sm"><Briefcase className="w-4 h-4 text-slate-400" /> {selectedBiker.occupation}</p>
                    </div>
                  </div>
                  <div>
                    <h4 className="font-semibold text-slate-800 mb-3">Emergency Contact</h4>
                    <div className="p-4 bg-slate-50 rounded-lg space-y-3 mb-4">
                      <p className="flex items-center gap-2 text-sm"><User className="w-4 h-4 text-slate-400" /> {selectedBiker.emergencyContact} ({selectedBiker.emergencyRelation})</p>
                      <p className="flex items-center gap-2 text-sm"><PhoneCall className="w-4 h-4 text-slate-400" /> {selectedBiker.emergencyPhone}</p>
                    </div>
                    <h4 className="font-semibold text-slate-800 mb-3">Address</h4>
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-sm text-slate-600">{selectedBiker.address}</p>
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'license' && (
                <div className="space-y-6">
                  <div className="p-4 bg-slate-50 rounded-lg">
                    <h4 className="font-semibold text-slate-800 mb-3">Driving License</h4>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <p className="text-xs text-slate-500">License Number</p>
                        <p className="text-sm font-medium">{selectedBiker.drivingLicense.number || 'Not provided'}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Class</p>
                        <p className="text-sm font-medium">{selectedBiker.drivingLicense.class || 'N/A'}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Issue Date</p>
                        <p className="text-sm font-medium">{selectedBiker.drivingLicense.issueDate || 'N/A'}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Expiry Date</p>
                        <p className="text-sm font-medium">{selectedBiker.drivingLicense.expiryDate || 'N/A'}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Status</p>
                        <span className={`inline-flex text-xs font-medium px-2.5 py-1 rounded-full ${selectedBiker.drivingLicense.status === 'valid' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                          {selectedBiker.drivingLicense.status}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className="p-4 bg-slate-50 rounded-lg">
                    <h4 className="font-semibold text-slate-800 mb-3">GPS Tracking Device</h4>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <p className="text-xs text-slate-500">Device ID</p>
                        <p className="text-sm font-medium">{selectedBiker.gpsDeviceId || 'Not assigned'}</p>
                      </div>
                      <div>
                        <p className="text-xs text-slate-500">Linked Phone</p>
                        <p className="text-sm font-medium">{selectedBiker.gpsPhone || 'Not linked'}</p>
                      </div>
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'documents' && (
                <div className="space-y-4">
                  <h4 className="font-semibold text-slate-800 mb-3">Uploaded Documents</h4>
                  {selectedBiker.documents.map((doc, index) => (
                    <div key={index} className="p-4 border border-slate-200 rounded-lg">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-sm font-medium text-slate-700 uppercase">{doc.type}</p>
                          <p className="text-sm text-slate-500">Number: {doc.number || 'N/A'}</p>
                        </div>
                        <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${doc.verified ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
                          {doc.verified ? 'Verified' : 'Pending'}
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {activeTab === 'stats' && (
                <div className="grid grid-cols-4 gap-4">
                  <div className="p-4 bg-blue-50 rounded-lg text-center">
                    <p className="text-2xl font-bold text-blue-600">{selectedBiker.totalRides}</p>
                    <p className="text-xs text-slate-500">Total Rides</p>
                  </div>
                  <div className="p-4 bg-green-50 rounded-lg text-center">
                    <p className="text-2xl font-bold text-green-600">{selectedBiker.totalDistance.toLocaleString()}</p>
                    <p className="text-xs text-slate-500">km Traveled</p>
                  </div>
                  <div className="p-4 bg-purple-50 rounded-lg text-center">
                    <p className="text-2xl font-bold text-purple-600">{selectedBiker.totalRideHours}</p>
                    <p className="text-xs text-slate-500">Ride Hours</p>
                  </div>
                  <div className="p-4 bg-amber-50 rounded-lg text-center">
                    <p className="text-2xl font-bold text-amber-600">★ {selectedBiker.rating}</p>
                    <p className="text-xs text-slate-500">Rating ({selectedBiker.totalRatings} reviews)</p>
                  </div>
                </div>
              )}

              {activeTab === 'account' && (
                <div className="grid grid-cols-2 gap-6">
                  <div className="space-y-4">
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-xs text-slate-500">KYC Status</p>
                      <span className={`inline-flex text-xs font-medium px-2.5 py-1 rounded-full ${kycColors[selectedBiker.kycStatus]}`}>{selectedBiker.kycStatus}</span>
                    </div>
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-xs text-slate-500">Membership</p>
                      <span className={`inline-flex text-xs font-medium px-2.5 py-1 rounded-full ${membershipColors[selectedBiker.membershipType]}`}>{selectedBiker.membershipType}</span>
                    </div>
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-xs text-slate-500">Insurance</p>
                      <span className={`inline-flex text-xs font-medium px-2.5 py-1 rounded-full ${selectedBiker.insuranceStatus === 'active' ? 'bg-green-100 text-green-700' : selectedBiker.insuranceStatus === 'expired' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500'}`}>{selectedBiker.insuranceStatus}</span>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <div className="p-4 bg-green-50 rounded-lg">
                      <p className="text-xs text-slate-500">Total Spent</p>
                      <p className="text-xl font-bold text-green-600">৳{selectedBiker.totalSpent.toLocaleString()}</p>
                    </div>
                    <div className="p-4 bg-blue-50 rounded-lg">
                      <p className="text-xs text-slate-500">Wallet Balance</p>
                      <p className="text-xl font-bold text-blue-600">৳{selectedBiker.walletBalance}</p>
                    </div>
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <p className="text-xs text-slate-500">Deposit Paid</p>
                      <p className="text-xl font-bold text-slate-700">৳{selectedBiker.depositPaid}</p>
                    </div>
                  </div>
                </div>
              )}
            </div>

            <div className="p-5 border-t border-slate-100 flex items-center justify-end gap-3">
              <button onClick={() => { setShowDetailsModal(false); handleEditBiker(selectedBiker); }} className="px-4 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 flex items-center gap-2">
                <Edit className="w-4 h-4" /> Edit
              </button>
              <button onClick={() => handleDeleteBiker(selectedBiker.id)} className="px-4 py-2 border border-red-200 text-red-600 rounded-lg text-sm font-medium hover:bg-red-50 flex items-center gap-2">
                <Trash2 className="w-4 h-4" /> Delete
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}