'use client';

import { useState, use } from 'react';
import Link from 'next/link';
import {
  Bike, Search, Filter, Plus, MoreVertical, MapPin, Battery, User, Wrench,
  Eye, Edit, Trash2, X, Download, Upload, MoreHorizontal, CheckCircle, XCircle,
  AlertTriangle, Calendar, DollarSign, Clock, Navigation, Car, LayoutGrid, List,
  Gauge, FileText, Shield, Zap, GaugeCircle, Map
} from 'lucide-react';

interface Bike {
  id: string;
  model: string;
  brand: string;
  image: string;
  plateNumber: string;
  status: 'available' | 'rented' | 'maintenance' | 'retired';
  batteryLevel: number;
  location: string;
  assignedTo?: string;
  investorId?: string;
  purchaseDate?: string;
  purchasePrice?: number;
  currentRent?: number;
  totalRides?: number;
  totalDistance?: number;
  lastService?: string;
  nextService?: string;
  insuranceExpiry?: string;
  registrationExpiry?: string;
  notes?: string;
}

const mockBikes: Bike[] = [
  { id: 'EV001', model: 'Etron ET50', brand: 'Etron', image: '', plateNumber: 'Dhaka Metro Cha-A-1234', status: 'rented', batteryLevel: 78, location: 'Gulshan 1', assignedTo: 'Rahim Ahmed', investorId: 'inv1', purchaseDate: '2024-01-15', purchasePrice: 125000, currentRent: 350, totalRides: 156, totalDistance: 2340, lastService: '2024-03-01', nextService: '2024-04-01', insuranceExpiry: '2025-01-15', registrationExpiry: '2026-01-15' },
  { id: 'EV002', model: 'Yadea DT3', brand: 'Yadea', image: '', plateNumber: 'Dhaka Metro Cha-A-5678', status: 'available', batteryLevel: 95, location: 'Banani', purchaseDate: '2024-02-01', purchasePrice: 118000, totalRides: 89, totalDistance: 1567, lastService: '2024-03-15', nextService: '2024-04-15', insuranceExpiry: '2025-02-01', registrationExpiry: '2026-02-01' },
  { id: 'EV003', model: 'AIMA Lightning', brand: 'AIMA', image: '', plateNumber: 'Dhaka Metro Cha-A-9012', status: 'rented', batteryLevel: 62, location: 'Uttara', assignedTo: 'Karim Singh', investorId: 'inv1', purchaseDate: '2024-01-20', purchasePrice: 132000, currentRent: 400, totalRides: 203, totalDistance: 3890, lastService: '2024-03-10', nextService: '2024-04-10', insuranceExpiry: '2025-01-20', registrationExpiry: '2026-01-20' },
  { id: 'EV004', model: 'TVS iQube', brand: 'TVS', image: '', plateNumber: 'Dhaka Metro Cha-A-3456', status: 'maintenance', batteryLevel: 45, location: 'Workshop - Banani', purchaseDate: '2023-12-10', purchasePrice: 145000, totalRides: 312, totalDistance: 5670, lastService: '2024-03-20', nextService: '2024-03-25', insuranceExpiry: '2024-12-10', registrationExpiry: '2025-12-10', notes: 'Motor issue - awaiting parts' },
  { id: 'EV005', model: 'Bajaj Chetak', brand: 'Bajaj', image: '', plateNumber: 'Dhaka Metro Cha-A-7890', status: 'available', batteryLevel: 100, location: 'Dhanmondi', purchaseDate: '2024-02-15', purchasePrice: 138000, totalRides: 67, totalDistance: 890, lastService: '2024-03-18', nextService: '2024-04-18', insuranceExpiry: '2025-02-15', registrationExpiry: '2026-02-15' },
  { id: 'EV006', model: 'Hero Eddy', brand: 'Hero', image: '', plateNumber: 'Dhaka Metro Cha-B-1122', status: 'rented', batteryLevel: 88, location: 'Mirpur 1', assignedTo: 'Mahir Khan', investorId: 'inv2', purchaseDate: '2024-01-05', purchasePrice: 115000, currentRent: 320, totalRides: 178, totalDistance: 2890, lastService: '2024-03-05', nextService: '2024-04-05', insuranceExpiry: '2025-01-05', registrationExpiry: '2026-01-05' },
  { id: 'EV007', model: 'Okinawa Ridge', brand: 'Okinawa', image: '', plateNumber: 'Dhaka Metro Cha-B-3344', status: 'available', batteryLevel: 92, location: 'Gulshan 2', purchaseDate: '2024-02-20', purchasePrice: 122000, totalRides: 45, totalDistance: 567, lastService: '2024-03-20', nextService: '2024-04-20', insuranceExpiry: '2025-02-20', registrationExpiry: '2026-02-20' },
  { id: 'EV008', model: 'Ampere Magnus', brand: 'Ampere', image: '', plateNumber: 'Dhaka Metro Cha-B-5566', status: 'maintenance', batteryLevel: 15, location: 'Workshop - Dhanmondi', purchaseDate: '2023-11-01', purchasePrice: 98000, totalRides: 234, totalDistance: 4120, lastService: '2024-03-22', nextService: '2024-03-27', insuranceExpiry: '2024-11-01', registrationExpiry: '2025-11-01', notes: 'Battery replacement needed' },
  { id: 'EV009', model: 'JME Victory', brand: 'JME', image: '', plateNumber: 'Dhaka Metro Cha-B-7788', status: 'retired', batteryLevel: 0, location: 'Warehouse', purchaseDate: '2023-06-15', purchasePrice: 145000, totalRides: 567, totalDistance: 8900, lastService: '2024-01-10', insuranceExpiry: '2024-06-15', registrationExpiry: '2025-06-15', notes: 'Old vehicle - for scrap' },
  { id: 'EV010', model: 'Benling Aura', brand: 'Benling', image: '', plateNumber: 'Dhaka Metro Cha-C-9900', status: 'rented', batteryLevel: 71, location: 'Banani', assignedTo: 'Ovi Rahman', investorId: 'inv1', purchaseDate: '2024-02-10', purchasePrice: 128000, currentRent: 380, totalRides: 112, totalDistance: 1890, lastService: '2024-03-12', nextService: '2024-04-12', insuranceExpiry: '2025-02-10', registrationExpiry: '2026-02-10' },
  { id: 'EV011', model: 'Lectrix LXS', brand: 'Lectrix', image: '', plateNumber: 'Dhaka Metro Cha-C-1235', status: 'available', batteryLevel: 98, location: 'Uttara 11', purchaseDate: '2024-03-01', purchasePrice: 135000, totalRides: 23, totalDistance: 345, lastService: '2024-03-21', nextService: '2024-04-21', insuranceExpiry: '2025-03-01', registrationExpiry: '2026-03-01' },
  { id: 'EV012', model: 'Revolt RV400', brand: 'Revolt', image: '', plateNumber: 'Dhaka Metro Cha-C-5679', status: 'rented', batteryLevel: 55, location: 'Dhanmondi', assignedTo: 'Tashrif Islam', investorId: 'inv2', purchaseDate: '2024-01-25', purchasePrice: 150000, currentRent: 420, totalRides: 198, totalDistance: 3560, lastService: '2024-03-08', nextService: '2024-04-08', insuranceExpiry: '2025-01-25', registrationExpiry: '2026-01-25' },
];

const statusColors: Record<string, string> = {
  available: 'bg-green-100 text-green-700',
  rented: 'bg-blue-100 text-blue-700',
  maintenance: 'bg-amber-100 text-amber-700',
  retired: 'bg-slate-100 text-slate-500',
};

export default function FleetPage() {
  const [bikes, setBikes] = useState<Bike[]>(mockBikes);
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [locationFilter, setLocationFilter] = useState('all');
  const [selectedBike, setSelectedBike] = useState<Bike | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [showDetailsModal, setShowDetailsModal] = useState(false);
  const [editingBike, setEditingBike] = useState<Bike | null>(null);
  const [viewMode, setViewMode] = useState<'table' | 'cards' | 'map'>('table');
  const [selectedMapBike, setSelectedMapBike] = useState<Bike | null>(null);

  const availableCount = bikes.filter(b => b.status === 'available').length;
  const rentedCount = bikes.filter(b => b.status === 'rented').length;
  const maintenanceCount = bikes.filter(b => b.status === 'maintenance').length;
  const retiredCount = bikes.filter(b => b.status === 'retired').length;

  const locations = [...new Set(bikes.map(b => b.location))];

  const filteredBikes = bikes.filter(bike => {
    const matchesSearch = bike.model.toLowerCase().includes(searchQuery.toLowerCase()) ||
      bike.brand.toLowerCase().includes(searchQuery.toLowerCase()) ||
      bike.plateNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
      bike.id.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesStatus = statusFilter === 'all' || bike.status === statusFilter;
    const matchesLocation = locationFilter === 'all' || bike.location === locationFilter;
    return matchesSearch && matchesStatus && matchesLocation;
  });

  const handleAddBike = () => {
    setEditingBike(null);
    setShowModal(true);
  };

  const handleEditBike = (bike: Bike) => {
    setEditingBike(bike);
    setShowModal(true);
  };

  const handleViewDetails = (bike: Bike) => {
    setSelectedBike(bike);
    setShowDetailsModal(true);
  };

  const handleDeleteBike = (id: string) => {
    if (confirm('Are you sure you want to delete this bike?')) {
      setBikes(bikes.filter(b => b.id !== id));
    }
  };

  const handleSaveBike = (bike: Bike) => {
    if (editingBike) {
      setBikes(bikes.map(b => b.id === editingBike.id ? bike : b));
    } else {
      setBikes([...bikes, { ...bike, id: `EV${String(bikes.length + 1).padStart(3, '0')}` }]);
    }
    setShowModal(false);
  };

  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 className="flex items-center gap-4">
          <div>
            <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Fleet Management</h1>
            <p className="text-sm text-slate-500 mt-1">Manage your EV bike inventory</p>
          </div>
          {/* <div className="hidden lg:block w-80 h-32 rounded-xl overflow-hidden border border-slate-200 relative">
            <FleetMap bikes={filteredBikes} onSelectBike={setSelectedMapBike} selectedBike={selectedMapBike} />
          </div> */}
        </div>
        <div className="flex items-center gap-2">
          <Link
            href="/admin/fleet/map"
            className="py-2.5 px-4 border border-slate-200 text-slate-700 bg-white rounded-lg font-semibold text-sm hover:bg-slate-50 transition-colors flex items-center gap-2"
          >
            <Map className="w-4 h-4" /> Map View
          </Link>
          <button onClick={handleAddBike} 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" /> Register New Bike
          </button>
        </div>
      </div>

      {selectedMapBike && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={() => setSelectedMapBike(null)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm" onClick={e => e.stopPropagation()}>
            <div className="p-4">
              <div className="flex items-start gap-3 mb-4">
                <div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
                  <Bike className="w-6 h-6 text-blue-600" />
                </div>
                <div className="flex-1">
                  <p className="font-semibold text-slate-700">{selectedMapBike.model}</p>
                  <p className="text-xs text-slate-500">{selectedMapBike.brand} • {selectedMapBike.id}</p>
                  <span className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full mt-1 ${selectedMapBike.status === 'available' ? 'bg-green-100 text-green-700' :
                      selectedMapBike.status === 'rented' ? 'bg-blue-100 text-blue-700' :
                        selectedMapBike.status === 'maintenance' ? 'bg-amber-100 text-amber-700' :
                          'bg-slate-100 text-slate-500'
                    }`}>
                    {selectedMapBike.status}
                  </span>
                </div>
                <button onClick={() => setSelectedMapBike(null)} className="p-1 hover:bg-slate-100 rounded-lg">
                  <X className="w-4 h-4 text-slate-400" />
                </button>
              </div>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-500">Plate</span>
                  <span className="font-medium">{selectedMapBike.plateNumber}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Location</span>
                  <span className="font-medium">{selectedMapBike.location}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Battery</span>
                  <span className={`font-medium ${selectedMapBike.batteryLevel > 50 ? 'text-green-600' :
                      selectedMapBike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'
                    }`}>{selectedMapBike.batteryLevel}%</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Daily Rate</span>
                  <span className="font-medium text-green-600">৳{selectedMapBike.currentRent || 0}</span>
                </div>
              </div>
              <Link
                href={`/admin/fleet/${selectedMapBike.id}`}
                className="block w-full mt-4 py-2 bg-accent text-white rounded-lg font-semibold text-sm text-center hover:bg-accent-dark"
              >
                View Details
              </Link>
            </div>
          </div>
        </div>
      )}

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center">
              <Bike className="w-6 h-6 text-green-600" />
            </div>
            <div>
              <p className="text-2xl font-extrabold text-slate-800">{availableCount}</p>
              <p className="text-sm text-slate-500">Available</p>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
              <User className="w-6 h-6 text-blue-600" />
            </div>
            <div>
              <p className="text-2xl font-extrabold text-slate-800">{rentedCount}</p>
              <p className="text-sm text-slate-500">Rented</p>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center">
              <Wrench className="w-6 h-6 text-amber-600" />
            </div>
            <div>
              <p className="text-2xl font-extrabold text-slate-800">{maintenanceCount}</p>
              <p className="text-sm text-slate-500">Maintenance</p>
            </div>
          </div>
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center">
              <GaugeCircle className="w-6 h-6 text-slate-600" />
            </div>
            <div>
              <p className="text-2xl font-extrabold text-slate-800">{retiredCount}</p>
              <p className="text-sm text-slate-500">Retired</p>
            </div>
          </div>
        </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 bikes by model, plate, ID..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-2 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="available">Available</option>
              <option value="rented">Rented</option>
              <option value="maintenance">Maintenance</option>
              <option value="retired">Retired</option>
            </select>
            <select
              value={locationFilter}
              onChange={(e) => setLocationFilter(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 Locations</option>
              {locations.map(loc => (
                <option key={loc} value={loc}>{loc}</option>
              ))}
            </select>
            <div className="flex items-center bg-slate-100 p-1 rounded-lg">
              <button
                onClick={() => setViewMode('table')}
                className={`py-1.5 px-3 rounded-md text-sm font-medium transition-all flex items-center gap-2 ${viewMode === 'table' ? 'bg-white text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
              >
                <List className="w-4 h-4" /> Table
              </button>
              <button
                onClick={() => setViewMode('cards')}
                className={`py-1.5 px-3 rounded-md text-sm font-medium transition-all flex items-center gap-2 ${viewMode === 'cards' ? 'bg-white text-slate-800 shadow-sm' : 'text-slate-500 hover:text-slate-700'}`}
              >
                <LayoutGrid className="w-4 h-4" /> Cards
              </button>
            </div>
            <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 ml-auto">
              <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="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">Bike</th>
                  <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Plate Number</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">Battery</th>
                  <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Metrics</th>
                  <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">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">
                {filteredBikes.map(bike => (
                  <tr key={bike.id} className="hover:bg-slate-50 transition-colors">
                    <td className="px-4 py-3">
                      <Link href={`/admin/fleet/${bike.id}`} className="flex items-center gap-3 hover:bg-slate-50 -m-2 p-2 rounded-lg">
                        <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
                          <Bike className="w-5 h-5 text-blue-600" />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-slate-700">{bike.model}</p>
                          <p className="text-xs text-slate-400">{bike.brand} • {bike.id}</p>
                        </div>
                      </Link>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm font-medium text-slate-600">{bike.plateNumber}</span>
                    </td>
                    <td className="px-4 py-3">
                      <p className="text-sm text-slate-600 flex items-center gap-1">
                        <MapPin className="w-3 h-3" /> {bike.location}
                      </p>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <Battery className={`w-4 h-4 ${bike.batteryLevel > 50 ? 'text-green-600' : bike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'}`} />
                        <span className={`text-sm font-medium ${bike.batteryLevel > 50 ? 'text-green-600' : bike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'}`}>{bike.batteryLevel}%</span>
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <p className="text-xs text-slate-600">{bike.totalRides || 0} rides</p>
                      <p className="text-xs text-slate-400">{(bike.totalDistance || 0).toLocaleString()} km</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 ${statusColors[bike.status]}`}>
                        {bike.status}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-1">
                        <button onClick={() => handleViewDetails(bike)} className="p-2 hover:bg-slate-100 rounded-lg" title="View Details">
                          <Eye className="w-4 h-4 text-blue-500" />
                        </button>
                        <button onClick={() => handleEditBike(bike)} className="p-2 hover:bg-slate-100 rounded-lg" title="Edit">
                          <Edit className="w-4 h-4 text-slate-400" />
                        </button>
                        <button onClick={() => handleDeleteBike(bike.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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
            {filteredBikes.map(bike => (
              <Link key={bike.id} href={`/admin/fleet/${bike.id}`} className="block bg-slate-50 rounded-xl p-4 hover:shadow-md transition-shadow">
                <div className="flex items-start justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-sm">
                      <Bike className="w-6 h-6 text-blue-600" />
                    </div>
                    <div>
                      <p className="font-semibold text-slate-700">{bike.model}</p>
                      <p className="text-xs text-slate-400">{bike.brand} • {bike.id}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-1">
                    <button onClick={(e) => { e.preventDefault(); handleViewDetails(bike); }} className="p-1.5 hover:bg-white rounded-lg">
                      <Eye className="w-4 h-4 text-blue-500" />
                    </button>
                    <button onClick={(e) => { e.preventDefault(); handleEditBike(bike); }} className="p-1.5 hover:bg-white rounded-lg">
                      <Edit className="w-4 h-4 text-slate-400" />
                    </button>
                    <button onClick={(e) => { e.preventDefault(); handleDeleteBike(bike.id); }} className="p-1.5 hover:bg-red-50 rounded-lg">
                      <Trash2 className="w-4 h-4 text-red-400" />
                    </button>
                  </div>
                </div>
                <div className="space-y-2 mb-3">
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-slate-500">Plate</span>
                    <span className="font-medium text-slate-700">{bike.plateNumber}</span>
                  </div>
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-slate-500">Location</span>
                    <span className="font-medium text-slate-700">{bike.location}</span>
                  </div>
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-slate-500">Battery</span>
                    <span className={`font-medium ${bike.batteryLevel > 50 ? 'text-green-600' : bike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'}`}>{bike.batteryLevel}%</span>
                  </div>
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-slate-500">Total Rides</span>
                    <span className="font-medium text-slate-700">{bike.totalRides || 0}</span>
                  </div>
                </div>
                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full w-full justify-center ${statusColors[bike.status]}`}>
                  {bike.status}
                </span>
              </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">{filteredBikes.length}</span> of <span className="font-medium">{bikes.length}</span> bikes
          </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 */}
      {showModal && (
        <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-2xl 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">
                {editingBike ? 'Edit Bike' : 'Register New Bike'}
              </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>
            <BikeForm
              bike={editingBike}
              onSave={handleSaveBike}
              onCancel={() => setShowModal(false)}
            />
          </div>
        </div>
      )}

      {/* Details Modal */}
      {showDetailsModal && selectedBike && (
        <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-2xl 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">Bike Details</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>
            <BikeDetails bike={selectedBike} />
          </div>
        </div>
      )}
    </div>
  );
}

function BikeForm({ bike, onSave, onCancel }: { bike: Bike | null; onSave: (bike: Bike) => void; onCancel: () => void }) {
  const [formData, setFormData] = useState<Bike>(bike || {
    id: '',
    model: '',
    brand: '',
    image: '',
    plateNumber: '',
    status: 'available',
    batteryLevel: 100,
    location: '',
    assignedTo: undefined,
    investorId: undefined,
    purchaseDate: new Date().toISOString().split('T')[0],
    purchasePrice: 0,
    totalRides: 0,
    totalDistance: 0,
    insuranceExpiry: '',
    registrationExpiry: '',
  });

  const handleChange = (field: keyof Bike, value: any) => {
    setFormData({ ...formData, [field]: value });
  };

  return (
    <div className="p-5 overflow-y-auto flex-1">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Bike ID *</label>
          <input
            type="text"
            value={formData.id}
            onChange={(e) => handleChange('id', e.target.value)}
            placeholder="EV001"
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent"
            disabled={!!bike}
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Brand *</label>
          <input
            type="text"
            value={formData.brand}
            onChange={(e) => handleChange('brand', e.target.value)}
            placeholder="Etron"
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Model *</label>
          <input
            type="text"
            value={formData.model}
            onChange={(e) => handleChange('model', e.target.value)}
            placeholder="ET50"
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Plate Number *</label>
          <input
            type="text"
            value={formData.plateNumber}
            onChange={(e) => handleChange('plateNumber', e.target.value)}
            placeholder="Dhaka Metro Cha-A-1234"
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Status *</label>
          <select
            value={formData.status}
            onChange={(e) => handleChange('status', 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"
          >
            <option value="available">Available</option>
            <option value="rented">Rented</option>
            <option value="maintenance">Maintenance</option>
            <option value="retired">Retired</option>
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Battery Level (%)</label>
          <input
            type="number"
            value={formData.batteryLevel}
            onChange={(e) => handleChange('batteryLevel', parseInt(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"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Location *</label>
          <input
            type="text"
            value={formData.location}
            onChange={(e) => handleChange('location', e.target.value)}
            placeholder="Gulshan 1"
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Assigned To</label>
          <input
            type="text"
            value={formData.assignedTo || ''}
            onChange={(e) => handleChange('assignedTo', e.target.value)}
            placeholder="Biker Name"
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-accent"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Purchase Date</label>
          <input
            type="date"
            value={formData.purchaseDate}
            onChange={(e) => handleChange('purchaseDate', 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"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Purchase Price (৳)</label>
          <input
            type="number"
            value={formData.purchasePrice}
            onChange={(e) => handleChange('purchasePrice', parseInt(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"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Insurance Expiry</label>
          <input
            type="date"
            value={formData.insuranceExpiry}
            onChange={(e) => handleChange('insuranceExpiry', 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"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Registration Expiry</label>
          <input
            type="date"
            value={formData.registrationExpiry}
            onChange={(e) => handleChange('registrationExpiry', 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"
          />
        </div>
      </div>
      <div className="flex gap-3 mt-6">
        <button onClick={onCancel} className="flex-1 py-2.5 px-4 border border-slate-200 rounded-lg font-semibold text-sm hover:bg-slate-50">
          Cancel
        </button>
        <button
          onClick={() => onSave(formData)}
          className="flex-1 py-2.5 px-4 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark"
        >
          {bike ? 'Update Bike' : 'Register Bike'}
        </button>
      </div>
    </div>
  );
}

function BikeDetails({ bike }: { bike: Bike }) {
  return (
    <div className="p-5 overflow-y-auto flex-1">
      <div className="flex items-center gap-4 mb-6">
        <div className="w-16 h-16 rounded-xl bg-blue-50 flex items-center justify-center">
          <Bike className="w-8 h-8 text-blue-600" />
        </div>
        <div>
          <h3 className="text-xl font-bold text-slate-800">{bike.model}</h3>
          <p className="text-sm text-slate-500">{bike.brand} • {bike.id}</p>
          <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full mt-1 ${statusColors[bike.status]}`}>
            {bike.status}
          </span>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4 mb-6">
        <div className="bg-slate-50 rounded-lg p-3">
          <p className="text-xs text-slate-500 mb-1">Plate Number</p>
          <p className="font-semibold text-slate-700">{bike.plateNumber}</p>
        </div>
        <div className="bg-slate-50 rounded-lg p-3">
          <p className="text-xs text-slate-500 mb-1">Battery Level</p>
          <p className={`font-semibold ${bike.batteryLevel > 50 ? 'text-green-600' : bike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'}`}>{bike.batteryLevel}%</p>
        </div>
        <div className="bg-slate-50 rounded-lg p-3">
          <p className="text-xs text-slate-500 mb-1">Location</p>
          <p className="font-semibold text-slate-700">{bike.location}</p>
        </div>
        <div className="bg-slate-50 rounded-lg p-3">
          <p className="text-xs text-slate-500 mb-1">Assigned To</p>
          <p className="font-semibold text-slate-700">{bike.assignedTo || 'Unassigned'}</p>
        </div>
      </div>

      <div className="border-t border-slate-100 pt-4 mb-4">
        <h4 className="font-semibold text-slate-700 mb-3">Performance Metrics</h4>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Total Rides</p>
            <p className="text-lg font-bold text-slate-700">{bike.totalRides || 0}</p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Distance</p>
            <p className="text-lg font-bold text-slate-700">{(bike.totalDistance || 0).toLocaleString()} km</p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Daily Rent</p>
            <p className="text-lg font-bold text-green-600">৳{bike.currentRent || 0}</p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Purchase Price</p>
            <p className="text-lg font-bold text-slate-700">৳{bike.purchasePrice?.toLocaleString() || 0}</p>
          </div>
        </div>
      </div>

      <div className="border-t border-slate-100 pt-4 mb-4">
        <h4 className="font-semibold text-slate-700 mb-3">Maintenance Info</h4>
        <div className="grid grid-cols-2 gap-3">
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Last Service</p>
            <p className="font-medium text-slate-700">{bike.lastService || 'N/A'}</p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Next Service</p>
            <p className="font-medium text-slate-700">{bike.nextService || 'N/A'}</p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Insurance Expiry</p>
            <p className="font-medium text-slate-700">{bike.insuranceExpiry || 'N/A'}</p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Registration Expiry</p>
            <p className="font-medium text-slate-700">{bike.registrationExpiry || 'N/A'}</p>
          </div>
        </div>
      </div>

      {bike.notes && (
        <div className="border-t border-slate-100 pt-4">
          <h4 className="font-semibold text-slate-700 mb-2">Notes</h4>
          <p className="text-sm text-slate-600 bg-slate-50 rounded-lg p-3">{bike.notes}</p>
        </div>
      )}

      <button onClick={() => window.location.reload()} className="w-full mt-4 py-2.5 px-4 bg-slate-100 text-slate-600 rounded-lg font-semibold text-sm hover:bg-slate-200">
        Close
      </button>
    </div>
  );
}

function FleetMap({ bikes, onSelectBike, selectedBike, large }: { bikes: Bike[]; onSelectBike: (bike: Bike) => void; selectedBike: Bike | null, large?: boolean }) {
  const locationCounts: Record<string, { bikes: Bike[]; lat: number; lng: number }> = {};

  bikes.forEach(bike => {
    const loc = bike.location;
    if (!locationCounts[loc]) {
      const locations: Record<string, { lat: number; lng: number }> = {
        'Gulshan 1': { lat: 23.7936, lng: 90.4061 },
        'Banani': { lat: 23.7983, lng: 90.4071 },
        'Uttara': { lat: 23.8304, lng: 90.4034 },
        'Uttara 11': { lat: 23.8547, lng: 90.4016 },
        'Dhanmondi': { lat: 23.7465, lng: 90.3762 },
        'Mirpur 1': { lat: 23.8090, lng: 90.3706 },
        'Gulshan 2': { lat: 23.7917, lng: 90.4175 },
        'Workshop - Banani': { lat: 23.7965, lng: 90.4050 },
        'Workshop - Dhanmondi': { lat: 23.7438, lng: 90.3738 },
        'Warehouse': { lat: 23.7880, lng: 90.3900 },
      };
      locationCounts[loc] = { bikes: [], lat: locations[loc]?.lat || 23.7936, lng: locations[loc]?.lng || 90.4061 };
    }
    locationCounts[loc].bikes.push(bike);
  });

  // Simple coordinate mapper for Dhaka-ish area
  const getCoords = (lat: number, lng: number) => {
    // Zoom factor based on whether it's the large view
    const xMultiplier = large ? 700 : 500;
    const yMultiplier = large ? 600 : 400;
    const x = (lng - 90.35) * xMultiplier;
    const y = (23.88 - lat) * yMultiplier;
    return { x, y };
  };

  return (
    <div className={`w-full h-full bg-slate-50 relative ${large ? 'cursor-grab active:cursor-grabbing' : ''}`}>
      <div className="absolute inset-0 overflow-hidden">
        <svg viewBox={large ? "0 0 100 100" : "0 0 100 100"} className="w-full h-full" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="gridLarge" width="10" height="10" patternUnits="userSpaceOnUse">
              <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#e2e8f0" strokeWidth="0.2" />
            </pattern>
            <filter id="shadow">
              <feDropShadow dx="0" dy="1" stdDeviation="0.5" floodOpacity="0.2" />
            </filter>
          </defs>

          {/* Subtle map pattern */}
          <rect width="1000" height="1000" fill="url(#gridLarge)" />

          {/* Simple river-like shapes for "map" look */}
          <path d="M-20,40 Q30,45 60,35 T120,45" fill="none" stroke="#e0f2fe" strokeWidth="8" strokeLinecap="round" />
          <path d="M40,-20 Q45,30 35,60 T45,120" fill="none" stroke="#f1f5f9" strokeWidth="12" strokeLinecap="round" />

          {(Object.entries(locationCounts) as [string, { bikes: Bike[]; lat: number; lng: number }][]).map(([loc, data]) => {
            const { x, y } = getCoords(data.lat, data.lng);
            const isSelected = data.bikes.some(b => b.id === selectedBike?.id);

            return (
              <g key={loc} transform={`translate(${x}, ${y})`} onClick={() => onSelectBike(data.bikes[0])} className="cursor-pointer">
                {/* Glow for selected/multiple */}
                <circle
                  r={large ? 4 : 3}
                  className={`${isSelected ? 'fill-accent animate-pulse' : 'fill-slate-300'} opacity-20`}
                />

                {/* Marker body */}
                <path
                  d={large ? "M0,0 L-3,-6 A3.5,3.5 0 1,1 3,-6 L0,0 Z" : "M0,0 L-2,-4 A2.5,2.5 0 1,1 2,-4 L0,0 Z"}
                  className={`${data.bikes[0].status === 'available' ? 'fill-green-500' :
                      data.bikes[0].status === 'rented' ? 'fill-blue-500' :
                        data.bikes[0].status === 'maintenance' ? 'fill-amber-500' :
                          'fill-slate-400'
                    }`}
                  filter="url(#shadow)"
                />

                {/* Center dot or number */}
                <circle
                  cx="0"
                  cy={large ? -6 : -4}
                  r={large ? 1.5 : 1}
                  fill="white"
                />

                {data.bikes.length > 1 && (
                  <g transform={`translate(${large ? 3 : 2}, ${large ? -8 : -5})`}>
                    <circle r={large ? 2.5 : 1.8} className="fill-slate-800" />
                    <text
                      textAnchor="middle"
                      dominantBaseline="middle"
                      className="fill-white text-[2.5px] font-bold pointer-events-none"
                    >
                      {data.bikes.length}
                    </text>
                  </g>
                )}

                {large && (
                  <text
                    y="4"
                    textAnchor="middle"
                    className="fill-slate-400 text-[1.5px] font-medium tracking-tight pointer-events-none"
                  >
                    {loc}
                  </text>
                )}
              </g>
            );
          })}
        </svg>
      </div>

      {!large && (
        <div className="absolute bottom-2 left-2 flex gap-2">
          <div className="flex items-center gap-1 bg-white/90 rounded px-2 py-1 text-[10px] shadow-sm border border-slate-100">
            <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
            <span className="text-slate-600 font-medium">{bikes.filter(b => b.status === 'available').length}</span>
          </div>
          <div className="flex items-center gap-1 bg-white/90 rounded px-2 py-1 text-[10px] shadow-sm border border-slate-100">
            <div className="w-1.5 h-1.5 rounded-full bg-blue-500" />
            <span className="text-slate-600 font-medium">{bikes.filter(b => b.status === 'rented').length}</span>
          </div>
        </div>
      )}

      {large && (
        <div className="absolute bottom-4 right-4 flex flex-col gap-2">
          <button className="w-8 h-8 bg-white rounded-lg shadow-md border border-slate-200 flex items-center justify-center text-slate-600 hover:bg-slate-50">
            <Plus className="w-4 h-4" />
          </button>
          <button className="w-8 h-8 bg-white rounded-lg shadow-md border border-slate-200 flex items-center justify-center text-slate-600 hover:bg-slate-50">
            <div className="w-4 h-0.5 bg-slate-400 rounded-full" />
          </button>
        </div>
      )}
    </div>
  );
}