'use client';

import { useState, use } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import {
  Bike, MapPin, Battery, User, Wrench, Eye, Edit, Trash2, X, ArrowLeft, PhoneCall,
  MessageCircle, Calendar, DollarSign, Clock, Navigation, Car, FileText, Shield, Zap,
  GaugeCircle, CheckCircle, AlertTriangle, Activity, Award, TrendingUp, Wallet,
  MoreHorizontal, Map, Navigation2, Satellite, FileCheck, FileX, Clock3,
  History, CreditCard, User2, Phone, Mail, MapPinned, ExternalLink, Plus,
  AlertCircle, Image as ImageIcon, Camera, Search, ArrowUpDown, ChevronLeft,
  ChevronRight, RefreshCw, CheckCircle2, XCircle
} from 'lucide-react';

interface GPSDevice {
  id: string;
  phone: string;
  imei: string;
  lastActive: string;
  signal: number;
  battery: number;
}

interface BikeDocument {
  type: 'registration' | 'insurance' | 'fitness' | 'permit' | 'other';
  number: string;
  issueDate: string;
  expiryDate: string;
  verified: boolean;
}

interface RentalHistory {
  id: string;
  bikerId: string;
  bikerName: string;
  type: 'single' | 'shared' | 'rent-to-own';
  status: 'active' | 'completed' | 'disputed';
  startDate: string;
  endDate?: string;
  dailyRate: number;
  totalPaid: number;
  rideCount: number;
}

interface ActivityLog {
  id: string;
  action: string;
  details: string;
  date: string;
  by: string;
}

interface BikeAssignment {
  id: string;
  bikeId: string;
  bikerId: string;
  bikerName: string;
  assignedAt: string;
  assignedBy: string;
  unassignedAt?: string;
  unassignedBy?: string;
  reason?: string;
  status: 'active' | 'completed';
  notes?: string;
}

interface DamageRecord {
  id: string;
  date: string;
  type: 'accident' | 'theft' | 'natural' | 'wear_tear' | 'other';
  description: string;
  reportedBy: string;
  reportedAt: string;
  estimatedCost?: number;
  actualCost?: number;
  status: 'reported' | 'under_repair' | 'repaired' | 'claim_rejected';
  hubId?: string;
  hubName?: string;
  images?: string[];
  billImage?: string;
  resolvedAt?: string;
  notes?: string;
}

interface MaintenanceRecord {
  id: string;
  date: string;
  type: 'routine' | 'battery' | 'tire' | 'brake' | 'engine' | 'electrical' | 'other';
  description: string;
  performedBy: string;
  cost: number;
  nextDueDate?: string;
  status: 'scheduled' | 'in_progress' | 'completed';
  hubId?: string;
  hubName?: string;
  notes?: string;
}

interface BatteryHistory {
  id: string;
  batteryId: string;
  brand: string;
  model: string;
  serialNumber: string;
  assignedDate: string;
  returnedDate?: string;
  swappedToBatteryId?: string;
  status: 'active' | 'returned' | 'swapped';
  socStart: number;
  socEnd?: number;
  monthlyRent?: number;
}

interface Bike {
  id: string;
  model: string;
  brand: string;
  image: string;
  plateNumber: string;
  status: 'available' | 'rented' | 'maintenance' | 'retired';
  batteryLevel: number;
  currentBatteryId?: string;
  currentBatteryBrand?: string;
  currentBatteryModel?: string;
  location?: string;
  hubId?: string;
  hubName?: string;
  assignedTo?: string;
  renterPhone?: string;
  renterNid?: string;
  rentalStartDate?: string;
  subscriptionType?: 'daily' | 'weekly' | 'monthly';
  weeklyRent?: number;
  monthlyRent?: number;
  investorId?: string;
  investorName?: string;
  purchaseDate?: string;
  purchasePrice?: number;
  currentRent?: number;
  totalRides?: number;
  totalDistance?: number;
  totalEarnings?: number;
  lastService?: string;
  nextService?: string;
  insuranceExpiry?: string;
  registrationExpiry?: string;
  notes?: string;
  gpsDevice?: GPSDevice;
  documents?: BikeDocument[];
  rentalHistory?: RentalHistory[];
  activityLog?: ActivityLog[];
  assignmentHistory?: BikeAssignment[];
  damageHistory?: DamageRecord[];
  maintenanceHistory?: MaintenanceRecord[];
  batteryHistory?: BatteryHistory[];
  bikeImages?: {
    front?: string;
    back?: string;
    left?: string;
    right?: string;
  };
}

const mockBikes: Bike[] = [
  {
    id: 'EV001', model: 'Etron ET50', brand: 'Etron', image: '', plateNumber: 'Dhaka Metro Cha-A-1234', status: 'rented', batteryLevel: 78, currentBatteryId: 'BAT-001', currentBatteryBrand: 'EVE Energy', currentBatteryModel: 'Li-Ion 60V50Ah', location: 'Gulshan 1', assignedTo: 'Rahim Ahmed', renterPhone: '01712345678', renterNid: '1234567890', rentalStartDate: '2024-03-01', subscriptionType: 'weekly', weeklyRent: 2400, hubId: 'HUB-001', hubName: 'JAIBEN Head Office', investorId: 'inv1', investorName: 'Mr. Hasan (Investor)', purchaseDate: '2024-01-15', purchasePrice: 125000, currentRent: 350, totalRides: 156, totalDistance: 2340, totalEarnings: 54600, lastService: '2024-03-01', nextService: '2024-04-01', insuranceExpiry: '2025-01-15', registrationExpiry: '2026-01-15',
    gpsDevice: { id: 'GPS001', phone: '01712345601', imei: '861234567890123', lastActive: '2024-03-21 14:30', signal: 85, battery: 72 },
    documents: [
      { type: 'registration', number: 'REG-EV001-2024', issueDate: '2024-01-15', expiryDate: '2026-01-15', verified: true },
      { type: 'insurance', number: 'INS-EV001-2024', issueDate: '2024-01-15', expiryDate: '2025-01-15', verified: true },
      { type: 'fitness', number: 'FIT-EV001-2024', issueDate: '2024-01-15', expiryDate: '2025-01-15', verified: true },
      { type: 'permit', number: 'PMT-EV001-2024', issueDate: '2024-01-15', expiryDate: '2026-01-15', verified: true },
    ],
    rentalHistory: [
      { id: 'R001', bikerId: 'B001', bikerName: 'Rahim Ahmed', type: 'single', status: 'active', startDate: '2024-03-01', dailyRate: 350, totalPaid: 7350, rideCount: 21 },
      { id: 'R002', bikerId: 'B003', bikerName: 'Jamal Khan', type: 'rent-to-own', status: 'completed', startDate: '2024-02-01', endDate: '2024-02-28', dailyRate: 400, totalPaid: 11200, rideCount: 28 },
      { id: 'R003', bikerId: 'B005', bikerName: 'Mahir Islam', type: 'shared', status: 'completed', startDate: '2024-01-15', endDate: '2024-01-31', dailyRate: 60, totalPaid: 2700, rideCount: 45 },
    ],
    activityLog: [
      { id: 'A001', action: 'Rental Started', details: 'Single rental by Rahim Ahmed', date: '2024-03-01 08:00', by: 'System' },
      { id: 'A002', action: 'Service', details: 'Regular maintenance completed', date: '2024-03-01', by: 'Admin' },
      { id: 'A003', action: 'GPS Update', details: 'New GPS device installed', date: '2024-02-15', by: 'Admin' },
      { id: 'A004', action: 'Rental Completed', details: 'Rent-to-own by Jamal Khan', date: '2024-02-28 23:59', by: 'System' },
      { id: 'A005', action: 'Insurance Renewed', details: 'Insurance renewed for 1 year', date: '2024-01-15', by: 'Admin' },
    ],
    damageHistory: [
      { id: 'DMG001', date: '2024-02-10', type: 'accident', description: 'Minor collision at Mirpur intersection', reportedBy: 'Jamal Khan', reportedAt: '2024-02-10 14:30', estimatedCost: 5000, actualCost: 4500, status: 'repaired', resolvedAt: '2024-02-15', hubId: 'HUB-001', hubName: 'Gulshan Hub' },
      { id: 'DMG002', date: '2024-03-15', type: 'wear_tear', description: 'Front tire wear - replaced', reportedBy: 'Rahim Ahmed', reportedAt: '2024-03-15 09:00', estimatedCost: 2500, actualCost: 2200, status: 'repaired', resolvedAt: '2024-03-16', hubId: 'HUB-002', hubName: 'Banani Hub' },
    ],
    maintenanceHistory: [
      { id: 'MNT001', date: '2024-03-01', type: 'routine', description: 'Full service - oil change, brake check, tire rotation', performedBy: 'Service Center', cost: 1500, nextDueDate: '2024-04-01', status: 'completed', hubId: 'HUB-001', hubName: 'Gulshan Hub' },
      { id: 'MNT002', date: '2024-02-15', type: 'battery', description: 'Battery health check and terminal cleaning', performedBy: 'Service Center', cost: 500, nextDueDate: '2024-05-15', status: 'completed', hubId: 'HUB-003', hubName: 'Uttara Hub' },
      { id: 'MNT003', date: '2024-01-20', type: 'tire', description: 'Tire pressure check and inflation', performedBy: 'Service Center', cost: 300, nextDueDate: '2024-04-20', status: 'completed', hubId: 'HUB-004', hubName: 'Mirpur Hub' },
    ],
    batteryHistory: [
      { id: 'BH001', batteryId: 'BAT-001', brand: 'EVE Energy', model: 'Li-Ion 60V50Ah', serialNumber: 'SN-2024-00001', assignedDate: '2024-03-15', status: 'active', socStart: 85, monthlyRent: 1500 },
      { id: 'BH002', batteryId: 'BAT-005', brand: 'Samsung SDI', model: 'Li-Ion 60V45Ah', serialNumber: 'SN-2023-00045', assignedDate: '2024-01-10', returnedDate: '2024-03-14', status: 'returned', socStart: 80, socEnd: 45, monthlyRent: 1200 },
      { id: 'BH003', batteryId: 'BAT-008', brand: 'LG Chem', model: 'Li-Ion 48V40Ah', serialNumber: 'SN-2023-00012', assignedDate: '2023-11-05', returnedDate: '2024-01-09', status: 'swapped', socStart: 90, socEnd: 60, monthlyRent: 1000 },
      { id: 'BH004', batteryId: 'BAT-003', brand: 'Panasonic', model: 'Li-Ion 60V50Ah', serialNumber: 'SN-2023-00078', assignedDate: '2023-08-20', returnedDate: '2023-11-04', status: 'swapped', socStart: 88, socEnd: 55, monthlyRent: 1500 },
      { id: 'BH005', batteryId: 'BAT-002', brand: 'Sony', model: 'Li-Ion 48V35Ah', serialNumber: 'SN-2023-00034', assignedDate: '2023-05-15', returnedDate: '2023-08-19', status: 'returned', socStart: 75, socEnd: 40, monthlyRent: 900 },
      { id: 'BH006', batteryId: 'BAT-012', brand: 'BYD', model: 'LiFePO4 60V40Ah', serialNumber: 'SN-2023-00056', assignedDate: '2024-04-20', returnedDate: '2024-06-15', status: 'returned', socStart: 92, socEnd: 35, monthlyRent: 1300 },
      { id: 'BH007', batteryId: 'BAT-015', brand: 'CATL', model: 'Li-Ion 72V50Ah', serialNumber: 'SN-2024-00089', assignedDate: '2024-06-20', status: 'active', socStart: 88, monthlyRent: 1800 },
      { id: 'BH008', batteryId: 'BAT-009', brand: 'Tongsheng', model: 'Li-Ion 48V45Ah', serialNumber: 'SN-2023-00023', assignedDate: '2023-02-10', returnedDate: '2023-05-14', status: 'returned', socStart: 82, socEnd: 50, monthlyRent: 1100 },
      { id: 'BH009', batteryId: 'BAT-011', brand: 'Binek', model: 'Li-Ion 60V48Ah', serialNumber: 'SN-2023-00067', assignedDate: '2024-02-01', returnedDate: '2024-04-18', status: 'returned', socStart: 78, socEnd: 42, monthlyRent: 1400 },
      { id: 'BH010', batteryId: 'BAT-007', brand: 'Kexin', model: 'Li-Ion 48V36Ah', serialNumber: 'SN-2022-00045', assignedDate: '2022-12-05', returnedDate: '2023-02-08', status: 'returned', socStart: 85, socEnd: 55, monthlyRent: 850 },
      { id: 'BH011', batteryId: 'BAT-004', brand: 'Faraday', model: 'LiFePO4 48V42Ah', serialNumber: 'SN-2022-00089', assignedDate: '2022-09-15', returnedDate: '2022-12-04', status: 'returned', socStart: 90, socEnd: 48, monthlyRent: 1200 },
      { id: 'BH012', batteryId: 'BAT-006', brand: 'Reliance', model: 'Lead Acid 48V32Ah', serialNumber: 'SN-2022-00034', assignedDate: '2022-06-20', returnedDate: '2022-09-14', status: 'returned', socStart: 95, socEnd: 30, monthlyRent: 600 },
      { id: 'BH013', batteryId: 'BAT-020', brand: 'Maxell', model: 'Li-Ion 60V45Ah', serialNumber: 'SN-2024-00123', assignedDate: '2024-07-10', swappedToBatteryId: 'BAT-025', status: 'swapped', socStart: 75, socEnd: 65, monthlyRent: 1400 },
      { id: 'BH014', batteryId: 'BAT-018', brand: 'Nikola', model: 'LiFePO4 48V40Ah', serialNumber: 'SN-2023-00078', assignedDate: '2024-05-05', swappedToBatteryId: 'BAT-022', status: 'swapped', socStart: 82, socEnd: 55, monthlyRent: 1150 },
    ],
    bikeImages: {
      front: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop',
      back: 'https://images.unsplash.com/photo-1591637333184-19aa84de3fbd?w=400&h=300&fit=crop',
      left: 'https://images.unsplash.com/photo-1622185135505-2d795043906a?w=400&h=300&fit=crop',
      right: 'https://images.unsplash.com/photo-1609630875171-b1321377ee53?w=400&h=300&fit=crop',
    }
  },
  {
    id: 'EV002', model: 'Yadea DT3', brand: 'Yadea', image: '', plateNumber: 'Dhaka Metro Cha-A-5678', status: 'available', batteryLevel: 95, location: 'Banani', hubId: 'HUB-002', hubName: 'Banani Hub', investorId: 'inv1', investorName: 'Mr. Hasan (Investor)', purchaseDate: '2024-02-01', purchasePrice: 118000, totalRides: 89, totalDistance: 1567, totalEarnings: 31150, lastService: '2024-03-15', nextService: '2024-04-15', insuranceExpiry: '2025-02-01', registrationExpiry: '2026-02-01',
    gpsDevice: { id: 'GPS002', phone: '01712345602', imei: '861234567890124', lastActive: '2024-03-21 15:00', signal: 92, battery: 88 },
    documents: [
      { type: 'registration', number: 'REG-EV002-2024', issueDate: '2024-02-01', expiryDate: '2026-02-01', verified: true },
      { type: 'insurance', number: 'INS-EV002-2024', issueDate: '2024-02-01', expiryDate: '2025-02-01', verified: true },
      { type: 'fitness', number: 'FIT-EV002-2024', issueDate: '2024-02-01', expiryDate: '2025-02-01', verified: true },
    ],
    rentalHistory: [
      { id: 'R004', bikerId: 'B002', bikerName: 'Karim Singh', type: 'single', status: 'completed', startDate: '2024-02-15', endDate: '2024-02-28', dailyRate: 350, totalPaid: 4900, rideCount: 14 },
    ],
    activityLog: [
      { id: 'A006', action: 'Service', details: 'Regular maintenance', date: '2024-03-15', by: 'Admin' },
      { id: 'A007', action: 'Added to Fleet', details: 'Bike registered in system', date: '2024-02-01', by: 'Admin' },
    ]
  },
  {
    id: 'EV003', model: 'AIMA Lightning', brand: 'AIMA', image: '', plateNumber: 'Dhaka Metro Cha-A-9012', status: 'rented', batteryLevel: 62, hubId: 'HUB-003', hubName: 'Uttara Hub', investorId: 'inv1', investorName: 'Mr. Hasan (Investor)', purchaseDate: '2024-01-20', purchasePrice: 132000, currentRent: 400, totalRides: 203, totalDistance: 3890, totalEarnings: 71100, lastService: '2024-03-10', nextService: '2024-04-10', insuranceExpiry: '2025-01-20', registrationExpiry: '2026-01-20',
    gpsDevice: { id: 'GPS003', phone: '01712345603', imei: '861234567890125', lastActive: '2024-03-21 14:45', signal: 78, battery: 55 },
    documents: [
      { type: 'registration', number: 'REG-EV003-2024', issueDate: '2024-01-20', expiryDate: '2026-01-20', verified: true },
      { type: 'insurance', number: 'INS-EV003-2024', issueDate: '2024-01-20', expiryDate: '2025-01-20', verified: true },
      { type: 'fitness', number: 'FIT-EV003-2024', issueDate: '2024-01-20', expiryDate: '2025-01-20', verified: true },
    ],
    rentalHistory: [],
    activityLog: []
  },
  {
    id: 'EV004', model: 'TVS iQube', brand: 'TVS', image: '', plateNumber: 'Dhaka Metro Cha-A-3456', status: 'maintenance', batteryLevel: 45, hubId: 'HUB-002', hubName: 'Banani Hub', investorId: 'inv2', investorName: 'Mrs. Rita (Investor)', purchaseDate: '2023-12-10', purchasePrice: 145000, totalRides: 312, totalDistance: 5670, totalEarnings: 98000, lastService: '2024-03-20', nextService: '2024-03-25', insuranceExpiry: '2024-12-10', registrationExpiry: '2025-12-10', notes: 'Motor issue - awaiting parts',
    gpsDevice: { id: 'GPS004', phone: '01712345604', imei: '861234567890126', lastActive: '2024-03-20 10:00', signal: 0, battery: 12 },
    documents: [
      { type: 'registration', number: 'REG-EV004-2023', issueDate: '2023-12-10', expiryDate: '2025-12-10', verified: true },
      { type: 'insurance', number: 'INS-EV004-2023', issueDate: '2023-12-10', expiryDate: '2024-12-10', verified: true },
    ],
    rentalHistory: [],
    activityLog: []
  },
  {
    id: 'EV005', model: 'Bajaj Chetak', brand: 'Bajaj', image: '', plateNumber: 'Dhaka Metro Cha-A-7890', status: 'available', batteryLevel: 100, hubId: 'HUB-001', hubName: 'JAIBEN Head Office', investorId: 'inv2', investorName: 'Mrs. Rita (Investor)', purchaseDate: '2024-02-15', purchasePrice: 138000, totalRides: 67, totalDistance: 890, totalEarnings: 23450, lastService: '2024-03-18', nextService: '2024-04-18', insuranceExpiry: '2025-02-15', registrationExpiry: '2026-02-15',
    gpsDevice: { id: 'GPS005', phone: '01712345605', imei: '861234567890127', lastActive: '2024-03-21 15:30', signal: 95, battery: 92 },
    documents: [
      { type: 'registration', number: 'REG-EV005-2024', issueDate: '2024-02-15', expiryDate: '2026-02-15', verified: true },
      { type: 'insurance', number: 'INS-EV005-2024', issueDate: '2024-02-15', expiryDate: '2025-02-15', verified: true },
    ],
    rentalHistory: [],
    activityLog: []
  },
];

function getBikeById(id: string): Bike | undefined {
  return mockBikes.find(b => b.id === id);
}

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',
};

const docTypeLabels: Record<string, string> = {
  registration: 'Registration Certificate',
  insurance: 'Insurance',
  fitness: 'Fitness Certificate',
  permit: 'Road Permit',
  other: 'Other',
};

export default function FleetDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const resolvedParams = use(params);
  const router = useRouter();
  const bikeData = getBikeById(resolvedParams.id);

  const [activeTab, setActiveTab] = useState('overview');
  const [bikes, setBikes] = useState<Bike[]>(mockBikes);
  const [showDamageModal, setShowDamageModal] = useState(false);
  const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
  const [editingDamage, setEditingDamage] = useState<DamageRecord | null>(null);
  const [editingMaintenance, setEditingMaintenance] = useState<MaintenanceRecord | null>(null);

  const bike = bikes.find(b => b.id === resolvedParams.id) || bikes[0];

  const damageTypes = [
    { value: 'accident', label: 'Accident' },
    { value: 'theft', label: 'Theft' },
    { value: 'natural', label: 'Natural Disaster' },
    { value: 'wear_tear', label: 'Wear & Tear' },
    { value: 'other', label: 'Other' },
  ];

  const maintenanceTypes = [
    { value: 'routine', label: 'Routine Service' },
    { value: 'battery', label: 'Battery' },
    { value: 'tire', label: 'Tire' },
    { value: 'brake', label: 'Brake' },
    { value: 'engine', label: 'Engine' },
    { value: 'electrical', label: 'Electrical' },
    { value: 'other', label: 'Other' },
  ];

  const mockHubs = [
    { id: 'HUB-001', name: 'Gulshan Hub' },
    { id: 'HUB-002', name: 'Banani Hub' },
    { id: 'HUB-003', name: 'Uttara Hub' },
    { id: 'HUB-004', name: 'Mirpur Hub' },
  ];

  const handleAddDamage = (damage: DamageRecord) => {
    setBikes(bikes.map(b => {
      if (b.id === bike.id) {
        return { ...b, damageHistory: [...(b.damageHistory || []), damage] };
      }
      return b;
    }));
    setShowDamageModal(false);
  };

  const handleUpdateDamage = (damage: DamageRecord) => {
    setBikes(bikes.map(b => {
      if (b.id === bike.id) {
        return {
          ...b,
          damageHistory: (b.damageHistory || []).map(d => d.id === damage.id ? damage : d)
        };
      }
      return b;
    }));
    setShowDamageModal(false);
    setEditingDamage(null);
  };

  const handleDeleteDamage = (damageId: string) => {
    if (confirm('Are you sure you want to delete this damage record?')) {
      setBikes(bikes.map(b => {
        if (b.id === bike.id) {
          return { ...b, damageHistory: (b.damageHistory || []).filter(d => d.id !== damageId) };
        }
        return b;
      }));
    }
  };

  const handleAddMaintenance = (maintenance: MaintenanceRecord) => {
    setBikes(bikes.map(b => {
      if (b.id === bike.id) {
        return { ...b, maintenanceHistory: [...(b.maintenanceHistory || []), maintenance] };
      }
      return b;
    }));
    setShowMaintenanceModal(false);
  };

  const handleUpdateMaintenance = (maintenance: MaintenanceRecord) => {
    setBikes(bikes.map(b => {
      if (b.id === bike.id) {
        return {
          ...b,
          maintenanceHistory: (b.maintenanceHistory || []).map(m => m.id === maintenance.id ? maintenance : m)
        };
      }
      return b;
    }));
    setShowMaintenanceModal(false);
    setEditingMaintenance(null);
  };

  const handleDeleteMaintenance = (maintenanceId: string) => {
    if (confirm('Are you sure you want to delete this maintenance record?')) {
      setBikes(bikes.map(b => {
        if (b.id === bike.id) {
          return { ...b, maintenanceHistory: (b.maintenanceHistory || []).filter(m => m.id !== maintenanceId) };
        }
        return b;
      }));
    }
  };

  if (!bike) {
    return (
      <div className="p-4 lg:p-6">
        <div className="bg-white rounded-xl p-8 text-center">
          <Bike className="w-12 h-12 text-slate-300 mx-auto mb-4" />
          <h2 className="text-lg font-bold text-slate-700">Bike Not Found</h2>
          <p className="text-sm text-slate-500 mb-4">The bike ID "{resolvedParams.id}" was not found.</p>
          <Link href="/admin/fleet" className="text-accent hover:underline">Back to Fleet</Link>
        </div>
      </div>
    );
  }

  const tabs = [
    { id: 'overview', label: 'Overview', icon: Bike },
    // { id: 'biker-assignment', label: 'Assign Bikers', icon: User },
    { id: 'gps', label: 'GPS & Tracking', icon: Navigation2 },
    { id: 'documents', label: 'Documents', icon: FileText },
    { id: 'rental', label: 'Rental History', icon: History },
    { id: 'damage', label: 'Damage History', icon: AlertTriangle },
    { id: 'maintenance', label: 'Maintenance', icon: Wrench },
    { id: 'activity', label: 'Activity Log', icon: Clock3 },
    { id: 'investor', label: 'Investor Info', icon: User2 },
  ];

  return (
    <div className="p-4 lg:p-6 min-h-screen">
      <div className="flex items-center gap-3 mb-4">
        <button onClick={() => router.back()} className="p-2 hover:bg-slate-100 rounded-lg lg:hidden">
          <ArrowLeft className="w-5 h-5 text-slate-600" />
        </button>
        <Link href="/admin/fleet" className="p-2 hover:bg-slate-100 rounded-lg hidden lg:block">
          <ArrowLeft className="w-5 h-5 text-slate-600" />
        </Link>
        <div className="flex-1">
          <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Bike Details</h1>
          <p className="text-sm text-slate-500">ID: {bike.id}</p>
        </div>
      </div>

      <div className="flex flex-wrap gap-2 mb-4 overflow-x-auto pb-2">
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap flex items-center gap-2 ${activeTab === tab.id
              ? 'bg-accent text-white'
              : 'bg-white text-slate-600 border border-slate-200'
              }`}
          >
            <tab.icon className="w-4 h-4" />
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === 'overview' && <OverviewTab bike={bike} />}
      {activeTab === 'biker-assignment' && <BikerAssignmentTab bike={bike} />}
      {activeTab === 'gps' && <GPSTab bike={bike} />}
      {activeTab === 'documents' && <DocumentsTab bike={bike} />}
      {activeTab === 'rental' && <RentalTab bike={bike} />}
      {activeTab === 'activity' && <ActivityTab bike={bike} />}
      {activeTab === 'investor' && <InvestorTab bike={bike} />}

      {activeTab === 'damage' && (
        <div className="space-y-4">
          <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
            <div className="flex items-center justify-between mb-4">
              <h3 className="font-semibold text-slate-700 flex items-center gap-2">
                <AlertTriangle className="w-5 h-5 text-accent" /> Damage History
              </h3>
              <button
                onClick={() => { setEditingDamage(null); setShowDamageModal(true); }}
                className="px-4 py-2 bg-accent text-white text-sm rounded-lg hover:bg-accent-dark flex items-center gap-2"
              >
                <Plus className="w-4 h-4" /> Add Damage
              </button>
            </div>

            {(bike.damageHistory || []).length > 0 ? (
              <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">Date</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Description</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Hub</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Reported By</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Est. Cost</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actual Cost</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {bike.damageHistory?.map(damage => (
                      <tr key={damage.id} className="hover:bg-slate-50">
                        <td className="px-4 py-3 text-sm text-slate-600">{damage.date}</td>
                        <td className="px-4 py-3">
                          <span className="text-sm text-slate-700 capitalize">{damage.type.replace('_', ' ')}</span>
                        </td>
                        <td className="px-4 py-3 text-sm text-slate-600 max-w-xs truncate">{damage.description}</td>
                        <td className="px-4 py-3 text-sm text-slate-600">{damage.hubName || '-'}</td>
                        <td className="px-4 py-3 text-sm text-slate-600">{damage.reportedBy}</td>
                        <td className="px-4 py-3 text-sm text-slate-600">৳{damage.estimatedCost || 0}</td>
                        <td className="px-4 py-3 text-sm font-medium text-slate-700">৳{damage.actualCost || '-'}</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 ${damage.status === 'repaired' ? 'bg-green-100 text-green-700' :
                            damage.status === 'under_repair' ? 'bg-amber-100 text-amber-700' :
                              damage.status === 'claim_rejected' ? 'bg-red-100 text-red-700' :
                                'bg-slate-100 text-slate-700'
                            }`}>
                            {damage.status.replace('_', ' ')}
                          </span>
                        </td>
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-1">
                            <button
                              onClick={() => { setEditingDamage(damage); setShowDamageModal(true); }}
                              className="p-2 hover:bg-slate-100 rounded-lg"
                              title="Edit"
                            >
                              <Edit className="w-4 h-4 text-slate-400" />
                            </button>
                            <button
                              onClick={() => handleDeleteDamage(damage.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="text-center py-12">
                <AlertTriangle className="w-12 h-12 text-slate-300 mx-auto mb-4" />
                <p className="text-slate-500">No damage records found</p>
              </div>
            )}
          </div>
        </div>
      )}

      {activeTab === 'maintenance' && (
        <div className="space-y-4">
          <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
            <div className="flex items-center justify-between mb-4">
              <h3 className="font-semibold text-slate-700 flex items-center gap-2">
                <Wrench className="w-5 h-5 text-accent" /> Maintenance History
              </h3>
              <button
                onClick={() => { setEditingMaintenance(null); setShowMaintenanceModal(true); }}
                className="px-4 py-2 bg-accent text-white text-sm rounded-lg hover:bg-accent-dark flex items-center gap-2"
              >
                <Plus className="w-4 h-4" /> Add Maintenance
              </button>
            </div>

            {(bike.maintenanceHistory || []).length > 0 ? (
              <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">Date</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Description</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Hub</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Performed By</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Cost</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Next Due</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
                      <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {bike.maintenanceHistory?.map(maintenance => (
                      <tr key={maintenance.id} className="hover:bg-slate-50">
                        <td className="px-4 py-3 text-sm text-slate-600">{maintenance.date}</td>
                        <td className="px-4 py-3">
                          <span className="text-sm text-slate-700 capitalize">{maintenance.type}</span>
                        </td>
                        <td className="px-4 py-3 text-sm text-slate-600 max-w-xs truncate">{maintenance.description}</td>
                        <td className="px-4 py-3 text-sm text-slate-600">{maintenance.hubName || '-'}</td>
                        <td className="px-4 py-3 text-sm text-slate-600">{maintenance.performedBy}</td>
                        <td className="px-4 py-3 text-sm font-medium text-slate-700">৳{maintenance.cost}</td>
                        <td className="px-4 py-3 text-sm text-slate-600">{maintenance.nextDueDate || '-'}</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 ${maintenance.status === 'completed' ? 'bg-green-100 text-green-700' :
                            maintenance.status === 'in_progress' ? 'bg-amber-100 text-amber-700' :
                              'bg-slate-100 text-slate-700'
                            }`}>
                            {maintenance.status.replace('_', ' ')}
                          </span>
                        </td>
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-1">
                            <button
                              onClick={() => { setEditingMaintenance(maintenance); setShowMaintenanceModal(true); }}
                              className="p-2 hover:bg-slate-100 rounded-lg"
                              title="Edit"
                            >
                              <Edit className="w-4 h-4 text-slate-400" />
                            </button>
                            <button
                              onClick={() => handleDeleteMaintenance(maintenance.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="text-center py-12">
                <Wrench className="w-12 h-12 text-slate-300 mx-auto mb-4" />
                <p className="text-slate-500">No maintenance records found</p>
              </div>
            )}
          </div>
        </div>
      )}

      {showDamageModal && (
        <DamageModal
          bike={bike}
          damage={editingDamage}
          onClose={() => { setShowDamageModal(false); setEditingDamage(null); }}
          onSave={(damage) => {
            if (editingDamage) {
              handleUpdateDamage(damage);
            } else {
              handleAddDamage(damage);
            }
          }}
        />
      )}

      {showMaintenanceModal && (
        <MaintenanceModal
          bike={bike}
          maintenance={editingMaintenance}
          onClose={() => { setShowMaintenanceModal(false); setEditingMaintenance(null); }}
          onSave={(maintenance) => {
            if (editingMaintenance) {
              handleUpdateMaintenance(maintenance);
            } else {
              handleAddMaintenance(maintenance);
            }
          }}
        />
      )}
    </div>
  );
}

function OverviewTab({ bike }: { bike: Bike }) {
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;
  const batteryHistory = bike.batteryHistory || [];
  const totalPages = Math.ceil(batteryHistory.length / itemsPerPage);
  const paginatedHistory = batteryHistory.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <div className="space-y-4">
      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <div className="flex items-start gap-4 mb-4">
          <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 className="flex-1">
            <h2 className="text-xl font-bold text-slate-800">{bike.model}</h2>
            <p className="text-sm text-slate-500">{bike.brand} • {bike.id}</p>
            <div className="flex flex-wrap gap-2 mt-2">
              <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>
              <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-slate-100 text-slate-600">
                <MapPin className="w-3 h-3" /> {bike.hubName || 'Not Assigned'}
              </span>
            </div>
          </div>
        </div>

        <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">Bike</p>
            <p className="font-semibold text-slate-700">{bike.brand} {bike.model}</p>
            <p className="text-xs text-slate-500 mt-1">{bike.plateNumber}</p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Battery</p>
            <p className={`font-semibold text-lg ${bike.batteryLevel > 50 ? 'text-green-600' : bike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'}`}>{bike.batteryLevel}%</p>
            {bike.currentBatteryId && (
              <p className="text-xs font-medium text-slate-700 mt-1">{bike.currentBatteryId}</p>
            )}
            {bike.currentBatteryBrand && (
              <p className="text-xs text-slate-500">{bike.currentBatteryBrand} {bike.currentBatteryModel}</p>
            )}
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Current Renter</p>
            <p className="font-semibold text-slate-700">{bike.assignedTo || 'Available'}</p>
            {bike.renterPhone && <p className="text-xs text-slate-500 mt-1">{bike.renterPhone}</p>}
            {bike.rentalStartDate && <p className="text-xs text-slate-400 mt-1">Since: {bike.rentalStartDate}</p>}
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Subscription</p>
            <p className="font-semibold text-slate-700 capitalize">{bike.subscriptionType || 'Daily'}</p>
            {bike.subscriptionType === 'weekly' && bike.weeklyRent && (
              <p className="text-xs text-green-600 mt-1">৳{bike.weeklyRent}/week</p>
            )}
            {bike.subscriptionType === 'monthly' && bike.monthlyRent && (
              <p className="text-xs text-green-600 mt-1">৳{bike.monthlyRent}/month</p>
            )}
            {bike.subscriptionType === 'daily' && (
              <p className="text-xs text-green-600 mt-1">৳{bike.currentRent || 0}/day</p>
            )}
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-3">Performance Metrics</h3>
        <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-xl 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-xl 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">Total Earnings</p>
            <p className="text-xl font-bold text-green-600">৳{bike.totalEarnings?.toLocaleString() || 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-xl font-bold text-slate-700">৳{bike.purchasePrice?.toLocaleString() || 0}</p>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-3">Maintenance</h3>
        <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>
        {bike.notes && (
          <div className="mt-3 p-3 bg-amber-50 rounded-lg">
            <p className="text-xs text-amber-600 font-medium">Note</p>
            <p className="text-sm text-amber-800">{bike.notes}</p>
          </div>
        )}
      </div>

      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-4">Battery History</h3>
        {batteryHistory.length > 0 ? (
          <>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-slate-50">
                  <tr>
                    <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Battery ID</th>
                    <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Brand/Model</th>
                    <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Assigned Date</th>
                    <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Returned/Swapped</th>
                    <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Start SOC</th>
                    <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">End SOC</th>
                    <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Monthly Rent</th>
                    <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Status</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {paginatedHistory.map(bh => (
                    <tr key={bh.id} className="hover:bg-slate-50">
                      <td className="px-3 py-2 text-sm text-slate-700 font-medium">{bh.batteryId}</td>
                      <td className="px-3 py-2 text-sm text-slate-600">{bh.brand} {bh.model}</td>
                      <td className="px-3 py-2 text-sm text-slate-600">{bh.assignedDate}</td>
                      <td className="px-3 py-2 text-sm text-slate-600">
                        {bh.status === 'swapped' ? (
                          <>
                            <span className="text-blue-600 block">Swapped to {bh.swappedToBatteryId}</span>
                            <span className="text-blue-600 text-[10px] block opacity-75">{bh.returnedDate}</span>
                          </>
                        ) : bh.returnedDate || '-'}
                      </td>
                      <td className="px-3 py-2 text-sm text-slate-600">{bh.socStart}%</td>
                      <td className="px-3 py-2 text-sm text-slate-600">{bh.socEnd ? `${bh.socEnd}%` : '-'}</td>
                      <td className="px-3 py-2 text-sm text-green-600">৳{bh.monthlyRent}</td>
                      <td className="px-3 py-2">
                        <span className={`text-xs font-medium px-2 py-1 rounded-full ${bh.status === 'active' ? 'bg-green-100 text-green-700' : bh.status === 'swapped' ? 'bg-blue-100 text-blue-700' : 'bg-slate-100 text-slate-500'}`}>
                          {bh.status === 'active' ? 'Active' : bh.status === 'swapped' ? 'Swapped' : 'Returned'}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            {totalPages > 1 && (
              <div className="flex items-center justify-between mt-4 pt-4 border-t border-slate-100">
                <p className="text-sm text-slate-500">
                  Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, batteryHistory.length)} of {batteryHistory.length} batteries
                </p>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                    disabled={currentPage === 1}
                    className="px-3 py-1 text-sm border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    Previous
                  </button>
                  {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
                    <button
                      key={page}
                      onClick={() => setCurrentPage(page)}
                      className={`px-3 py-1 text-sm rounded-lg ${currentPage === page ? 'bg-accent text-white' : 'border border-slate-200 hover:bg-slate-50'}`}
                    >
                      {page}
                    </button>
                  ))}
                  <button
                    onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                    disabled={currentPage === totalPages}
                    className="px-3 py-1 text-sm border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    Next
                  </button>
                </div>
              </div>
            )}
          </>
        ) : (
          <div className="text-center py-8 text-slate-500">
            No battery history found
          </div>
        )}
      </div>
    </div>
  );
}

function GPSTab({ bike }: { bike: Bike }) {
  const gps = bike.gpsDevice;

  if (!gps) {
    return (
      <div className="bg-white rounded-xl p-6 shadow-sm border border-slate-100 text-center">
        <Satellite className="w-12 h-12 text-slate-300 mx-auto mb-4" />
        <h3 className="font-semibold text-slate-700">No GPS Device</h3>
        <p className="text-sm text-slate-500">This bike doesn't have a GPS device installed.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-xl bg-purple-50 flex items-center justify-center">
            <Satellite className="w-6 h-6 text-purple-600" />
          </div>
          <div>
            <h3 className="font-semibold text-slate-700">GPS Device</h3>
            <p className="text-sm text-slate-500">ID: {gps.id}</p>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Phone Number</p>
            <p className="font-semibold text-slate-700 flex items-center gap-2">
              <Phone className="w-4 h-4 text-slate-400" /> {gps.phone}
            </p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">IMEI</p>
            <p className="font-semibold text-slate-700 font-mono text-sm">{gps.imei}</p>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-3">Status</h3>
        <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">Last Active</p>
            <p className="font-medium text-slate-700">{gps.lastActive}</p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Signal Strength</p>
            <p className={`font-semibold ${gps.signal > 70 ? 'text-green-600' : gps.signal > 40 ? 'text-amber-600' : 'text-red-600'}`}>
              {gps.signal}%
            </p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">GPS Battery</p>
            <p className={`font-semibold ${gps.battery > 50 ? 'text-green-600' : gps.battery > 20 ? 'text-amber-600' : 'text-red-600'}`}>
              {gps.battery}%
            </p>
          </div>
          <div className="bg-slate-50 rounded-lg p-3">
            <p className="text-xs text-slate-500">Status</p>
            <p className="font-semibold text-green-600 flex items-center gap-1">
              <CheckCircle className="w-4 h-4" /> Active
            </p>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-3">Live Location</h3>
        <div className="bg-slate-100 rounded-lg h-48 flex items-center justify-center">
          <div className="text-center">
            <MapPinned className="w-8 h-8 text-slate-400 mx-auto mb-2" />
            <p className="text-sm text-slate-500">{bike.location}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function DocumentsTab({ bike }: { bike: Bike }) {
  const docs = bike.documents || [];
  const [images, setImages] = useState(bike.bikeImages || { front: '', back: '', left: '', right: '' });
  const [uploading, setUploading] = useState<string | null>(null);

  const handleImageUpload = (view: 'front' | 'back' | 'left' | 'right', e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setUploading(view);
      const reader = new FileReader();
      reader.onloadend = () => {
        setImages(prev => ({ ...prev, [view]: reader.result as string }));
        setUploading(null);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="space-y-4">
      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-4">Bike Images</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {(['front', 'back', 'left', 'right'] as const).map(view => (
            <div key={view} className="space-y-2">
              <p className="text-xs font-medium text-slate-500 capitalize">{view} View</p>
              <div className="relative aspect-video bg-slate-100 rounded-lg overflow-hidden border border-slate-200">
                {images[view] ? (
                  <img src={images[view]} alt={`${view} view`} className="w-full h-full object-cover" />
                ) : (
                  <div className="w-full h-full flex items-center justify-center">
                    <Camera className="w-8 h-8 text-slate-300" />
                  </div>
                )}
                <label className="absolute inset-0 cursor-pointer hover:bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
                  <span className="bg-white px-3 py-1 rounded-full text-xs font-medium text-slate-700 shadow">
                    {uploading === view ? 'Uploading...' : 'Upload'}
                  </span>
                  <input type="file" accept="image/*" className="hidden" onChange={(e) => handleImageUpload(view, e)} />
                </label>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-4">Bike Documents</h3>
        {docs.length === 0 ? (
          <div className="text-center py-8">
            <FileText className="w-12 h-12 text-slate-300 mx-auto mb-4" />
            <p className="text-sm text-slate-500">No documents uploaded.</p>
          </div>
        ) : (
          <div className="space-y-3">
            {docs.map((doc, idx) => (
              <div key={idx} className="flex items-center justify-between p-4 border border-slate-200 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
                    <FileText className="w-5 h-5 text-blue-600" />
                  </div>
                  <div>
                    <p className="font-medium text-slate-700">{docTypeLabels[doc.type]}</p>
                    <p className="text-xs text-slate-500">Number: {doc.number}</p>
                    <p className="text-xs text-slate-400">Issued: {doc.issueDate} • Expires: {doc.expiryDate}</p>
                  </div>
                </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 ? <CheckCircle className="w-3 h-3" /> : <Clock3 className="w-3 h-3" />}
                  {doc.verified ? 'Verified' : 'Pending'}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-3">Add New Document</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <select className="px-3 py-2 border border-slate-200 rounded-lg text-sm">
            <option value="">Select Document Type</option>
            <option value="registration">Registration Certificate</option>
            <option value="insurance">Insurance</option>
            <option value="fitness">Fitness Certificate</option>
            <option value="permit">Road Permit</option>
            <option value="other">Other</option>
          </select>
          <input type="text" placeholder="Document Number" className="px-3 py-2 border border-slate-200 rounded-lg text-sm" />
          <input type="date" placeholder="Issue Date" className="px-3 py-2 border border-slate-200 rounded-lg text-sm" />
          <input type="date" placeholder="Expiry Date" className="px-3 py-2 border border-slate-200 rounded-lg text-sm" />
        </div>
        <button className="w-full mt-3 py-2 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark">
          Upload Document
        </button>
      </div>
    </div>
  );
}

function RentalTab({ bike }: { bike: Bike }) {
  // Generate highly realistic rent transaction history
  const [transactions] = useState<any[]>(() => {
    const list: any[] = [];
    const riders = [bike.assignedTo || 'Karim Ahmed', 'Sajib Islam', 'Nayeem Chowdhury', 'Rakib Hasan', 'Kamal Hossain'];
    const methods = ['bKash', 'Nagad', 'Rocket', 'Bank Transfer'];
    
    const days = 25;
    const baseDate = new Date();
    
    for (let i = 0; i < days; i++) {
      const date = new Date();
      date.setDate(baseDate.getDate() - i);
      const dateString = date.toISOString().split('T')[0];
      
      const riderIndex = (i) % riders.length;
      const methodIndex = (i + 1) % methods.length;
      
      // status distribution
      let status: 'paid' | 'pending' | 'failed' = 'paid';
      if (i === 1) status = 'pending';
      else if (i === 5) status = 'failed';
      
      const amount = bike.currentRent || 350;

      list.push({
        id: `TX-BK-${10200 + i}`,
        date: dateString,
        riderName: riders[riderIndex],
        duration: '1 Day',
        amount: amount,
        status: status,
        payoutMethod: methods[methodIndex]
      });
    }
    return list;
  });

  // Filter & Sorting State
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [dateFrom, setDateFrom] = useState('');
  const [dateTo, setDateTo] = useState('');
  const [sortBy, setSortBy] = useState<'date' | 'amount' | 'rider'>('date');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
  const [page, setPage] = useState(1);
  const pageSize = 8;

  // Handler functions
  const handleSort = (field: 'date' | 'amount' | 'rider') => {
    if (sortBy === field) {
      setSortOrder(prev => (prev === 'asc' ? 'desc' : 'asc'));
    } else {
      setSortBy(field);
      setSortOrder('desc');
    }
    setPage(1);
  };

  // Filter Logic
  const filteredTransactions = transactions.filter(tx => {
    if (statusFilter !== 'all' && tx.status !== statusFilter) return false;
    if (searchQuery && !tx.riderName.toLowerCase().includes(searchQuery.toLowerCase()) && !tx.id.toLowerCase().includes(searchQuery.toLowerCase())) return false;
    if (dateFrom && new Date(tx.date) < new Date(dateFrom)) return false;
    if (dateTo && new Date(tx.date) > new Date(dateTo)) return false;
    return true;
  });

  // Sort Logic
  const sortedTransactions = [...filteredTransactions].sort((a, b) => {
    let comparison = 0;
    if (sortBy === 'date') {
      comparison = new Date(a.date).getTime() - new Date(b.date).getTime();
    } else if (sortBy === 'amount') {
      comparison = a.amount - b.amount;
    } else if (sortBy === 'rider') {
      comparison = a.riderName.localeCompare(b.riderName);
    }
    return sortOrder === 'desc' ? -comparison : comparison;
  });

  // Pagination
  const totalPages = Math.ceil(sortedTransactions.length / pageSize);
  const paginatedTransactions = sortedTransactions.slice((page - 1) * pageSize, page * pageSize);

  const statusConfig: Record<string, { label: string; bg: string; color: string; icon: any }> = {
    paid: { label: 'Paid', bg: 'bg-green-100', color: 'text-green-700', icon: CheckCircle2 },
    pending: { label: 'Pending', bg: 'bg-amber-100', color: 'text-amber-700', icon: Clock },
    failed: { label: 'Failed', bg: 'bg-red-100', color: 'text-red-700', icon: XCircle },
  };

  const totalCollected = filteredTransactions
    .filter(t => t.status === 'paid')
    .reduce((sum, t) => sum + t.amount, 0);

  const pendingAmount = filteredTransactions
    .filter(t => t.status === 'pending')
    .reduce((sum, t) => sum + t.amount, 0);

  return (
    <div className="space-y-4">
      {/* Dynamic Rental Metrics - Sleek and Responsive */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center shrink-0">
              <DollarSign className="w-5 h-5 text-green-600" />
            </div>
            <div>
              <p className="text-xs text-slate-500">Total Collected</p>
              <p className="text-lg font-bold text-green-600">৳{totalCollected.toLocaleString()}</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center shrink-0">
              <Zap className="w-5 h-5 text-blue-600" />
            </div>
            <div>
              <p className="text-xs text-slate-500">Active Rate</p>
              <p className="text-lg font-bold text-slate-800">৳{bike.currentRent || 350}/day</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center shrink-0">
              <Clock className="w-5 h-5 text-amber-600" />
            </div>
            <div>
              <p className="text-xs text-slate-500">Pending Amount</p>
              <p className="text-lg font-bold text-amber-600">৳{pendingAmount.toLocaleString()}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Main Table Container */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        
        {/* Filters */}
        <div className="p-4 border-b border-slate-100 bg-slate-50/20">
          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
            
            <div className="flex flex-wrap items-center gap-2">
              <div className="relative">
                <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                <input
                  type="text"
                  placeholder="Search by rider or ref..."
                  value={searchQuery}
                  onChange={(e) => { setSearchQuery(e.target.value); setPage(1); }}
                  className="pl-9 pr-4 py-2 border border-slate-200 rounded-lg text-sm w-48 sm:w-64 bg-white focus:outline-none focus:border-slate-400 transition-colors"
                />
              </div>
              
              <select
                value={statusFilter}
                onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
                className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white cursor-pointer"
              >
                <option value="all">All Status</option>
                <option value="paid">Paid</option>
                <option value="pending">Pending</option>
                <option value="failed">Failed</option>
              </select>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <div className="flex items-center gap-1">
                <input
                  type="date"
                  value={dateFrom}
                  onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
                  className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
                />
                <span className="text-slate-400">to</span>
                <input
                  type="date"
                  value={dateTo}
                  onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
                  className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
                />
              </div>
              {(dateFrom || dateTo) && (
                <button
                  onClick={() => { setDateFrom(''); setDateTo(''); setPage(1); }}
                  className="px-2.5 py-1.5 text-xs text-red-500 hover:bg-red-50 rounded font-semibold transition-colors"
                >
                  Clear
                </button>
              )}
              
              <button 
                onClick={() => {
                  setSearchQuery('');
                  setStatusFilter('all');
                  setDateFrom('');
                  setDateTo('');
                  setSortBy('date');
                  setSortOrder('desc');
                  setPage(1);
                }}
                className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 bg-white"
                title="Reset filters"
              >
                <RefreshCw className="w-4 h-4 text-slate-500" />
              </button>
            </div>

          </div>
        </div>

        {/* Desktop Table View */}
        <div className="hidden lg:block overflow-x-auto">
          <table className="w-full text-left">
            <thead className="bg-slate-50 border-b border-slate-100">
              <tr>
                <th 
                  onClick={() => handleSort('date')}
                  className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors"
                >
                  <div className="flex items-center gap-1">
                    Date {sortBy === 'date' && <span className="text-accent">{sortOrder === 'asc' ? '↑' : '↓'}</span>}
                  </div>
                </th>
                <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                  Transaction ID
                </th>
                <th 
                  onClick={() => handleSort('rider')}
                  className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors"
                >
                  <div className="flex items-center gap-1">
                    Rider {sortBy === 'rider' && <span className="text-accent">{sortOrder === 'asc' ? '↑' : '↓'}</span>}
                  </div>
                </th>
                <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                  Duration
                </th>
                <th 
                  onClick={() => handleSort('amount')}
                  className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors text-right"
                >
                  <div className="flex items-center gap-1 justify-end">
                    Amount {sortBy === 'amount' && <span className="text-accent">{sortOrder === 'asc' ? '↑' : '↓'}</span>}
                  </div>
                </th>
                <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                  Method
                </th>
                <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                  Status
                </th>
              </tr>
            </thead>
            
            <tbody className="divide-y divide-slate-100">
              {paginatedTransactions.length > 0 ? (
                paginatedTransactions.map((tx) => {
                  const status = statusConfig[tx.status] || statusConfig.pending;
                  const StatusIcon = status.icon;
                  return (
                    <tr key={tx.id} className="hover:bg-slate-50 transition-colors">
                      <td className="px-4 py-3 text-sm text-slate-800 font-medium">
                        {tx.date}
                      </td>
                      <td className="px-4 py-3 text-xs font-mono font-semibold text-slate-400">
                        {tx.id}
                      </td>
                      <td className="px-4 py-3 text-sm">
                        <div className="flex items-center gap-2">
                          <User className="w-4 h-4 text-slate-400" />
                          <span className="font-semibold text-slate-700">{tx.riderName}</span>
                        </div>
                      </td>
                      <td className="px-4 py-3 text-sm text-slate-500 font-medium">
                        {tx.duration}
                      </td>
                      <td className="px-4 py-3 text-sm font-bold text-slate-800 text-right">
                        ৳{tx.amount.toLocaleString()}
                      </td>
                      <td className="px-4 py-3 text-sm text-slate-600 font-medium capitalize">
                        {tx.payoutMethod}
                      </td>
                      <td className="px-4 py-3">
                        <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold ${status.bg} ${status.color}`}>
                          <StatusIcon className="w-3.5 h-3.5" />
                          {status.label}
                        </span>
                      </td>
                    </tr>
                  );
                })
              ) : (
                <tr>
                  <td colSpan={7} className="px-4 py-12 text-center text-slate-400">
                    <AlertCircle className="w-12 h-12 mx-auto mb-2 text-slate-300" />
                    <p className="text-sm font-semibold">No rental transactions found</p>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

        {/* Mobile View */}
        <div className="lg:hidden divide-y divide-slate-100">
          {paginatedTransactions.length > 0 ? (
            paginatedTransactions.map((tx) => {
              const status = statusConfig[tx.status] || statusConfig.pending;
              const StatusIcon = status.icon;
              return (
                <div key={tx.id} className="p-4 hover:bg-slate-50 transition-colors">
                  <div className="flex items-start justify-between gap-3 mb-2">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <User className="w-4 h-4 text-slate-400 shrink-0" />
                        <p className="text-sm font-semibold text-slate-800 truncate">{tx.riderName}</p>
                      </div>
                      <p className="text-xs text-slate-400 ml-6">Ref: {tx.id}</p>
                    </div>
                    
                    <div className="text-right shrink-0">
                      <p className="text-base font-bold text-slate-800">৳{tx.amount.toLocaleString()}</p>
                      <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-semibold mt-1 ${status.bg} ${status.color}`}>
                        <StatusIcon className="w-3 h-3" /> {status.label}
                      </span>
                    </div>
                  </div>
                  
                  <div className="flex items-center justify-between ml-6 text-xs text-slate-400">
                    <span>{tx.date}</span>
                    <span className="capitalize">{tx.payoutMethod}</span>
                  </div>
                </div>
              );
            })
          ) : (
            <div className="p-8 text-center text-slate-500">
              <AlertCircle className="w-10 h-10 mx-auto mb-2 text-slate-300" />
              <p>No rental payments found</p>
            </div>
          )}
        </div>

        {/* Paginated Footer */}
        {sortedTransactions.length > pageSize && (
          <div className="p-4 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-3 bg-slate-50/10">
            <p className="text-xs sm:text-sm text-slate-500">
              Showing {((page - 1) * pageSize) + 1} to {Math.min(page * pageSize, sortedTransactions.length)} of {sortedTransactions.length} records
            </p>
            
            <div className="flex items-center gap-1">
              <button
                onClick={() => setPage(p => Math.max(1, p - 1))}
                disabled={page === 1}
                className="p-2 border border-slate-200 rounded-lg disabled:opacity-50 hover:bg-slate-50 bg-white"
              >
                <ChevronLeft className="w-4 h-4 text-slate-600" />
              </button>
              
              {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNum => (
                <button
                  key={pageNum}
                  onClick={() => setPage(pageNum)}
                  className={`w-8 h-8 rounded-lg text-sm font-semibold transition-colors ${
                    page === pageNum 
                      ? 'bg-accent text-white' 
                      : 'border border-slate-200 hover:bg-slate-50 bg-white text-slate-600'
                  }`}
                >
                  {pageNum}
                </button>
              ))}

              <button
                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                disabled={page === totalPages}
                className="p-2 border border-slate-200 rounded-lg disabled:opacity-50 hover:bg-slate-50 bg-white"
              >
                <ChevronRight className="w-4 h-4 text-slate-600" />
              </button>
            </div>
          </div>
        )}

      </div>
    </div>
  );
}

function ActivityTab({ bike }: { bike: Bike }) {
  const logs = bike.activityLog || [];

  return (
    <div className="space-y-4">
      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-3">Activity Log</h3>
        {logs.length === 0 ? (
          <div className="text-center py-8">
            <Clock3 className="w-12 h-12 text-slate-300 mx-auto mb-4" />
            <p className="text-sm text-slate-500">No activity yet.</p>
          </div>
        ) : (
          <div className="space-y-3">
            {logs.map(log => (
              <div key={log.id} className="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
                <div className="w-8 h-8 rounded-full bg-white flex items-center justify-center">
                  <Activity className="w-4 h-4 text-slate-400" />
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium text-slate-700">{log.action}</p>
                  <p className="text-xs text-slate-500">{log.details}</p>
                  <p className="text-xs text-slate-400">{log.date} by {log.by}</p>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function BikerAssignmentTab({ bike }: { bike: Bike }) {
  const [showAssignModal, setShowAssignModal] = useState(false);
  const [rentalPlan, setRentalPlan] = useState<'single' | 'shared' | 'rent-to-own'>('single');
  const [assignedBikers, setAssignedBikers] = useState<any[]>([]);
  const [selectedBikerId, setSelectedBikerId] = useState('');
  const [showAddBikerModal, setShowAddBikerModal] = useState(false);
  const [newBikerDetails, setNewBikerDetails] = useState({
    name: '', phone: '', email: '', licenseNumber: '', nidNumber: '', address: '', dailyRate: 0, notes: ''
  });

  const assignmentHistory = bike.assignmentHistory || [];
  const activeAssignments = assignmentHistory.filter(a => a.status === 'active');

  const availableBikers = [
    { id: 'u1', name: 'Karim Ahmed', phone: '01712345678', email: 'karim@email.com', license: 'DL123456', nid: '1234567890' },
    { id: 'u2', name: 'Sofiq Rahman', phone: '01722345678', email: 'sofiq@email.com', license: 'DL234567', nid: '2345678901' },
    { id: 'u3', name: 'Rahim Khan', phone: '01732345678', email: 'rahim@email.com', license: 'DL345678', nid: '3456789012' },
    { id: 'u4', name: 'Jamal Hossain', phone: '01742345678', email: 'jamal@email.com', license: 'DL456789', nid: '4567890123' },
    { id: 'u5', name: 'Ripon Mia', phone: '01752345678', email: 'ripon@email.com', license: 'DL567890', nid: '5678901234' },
    { id: 'u6', name: 'Mizanur Rahman', phone: '01762345678', email: 'mizan@email.com', license: 'DL678901', nid: '6789012345' },
  ];

  const planDetails = {
    single: { name: 'Rental (Single)', price: '৳50/day', maxBikers: 1 },
    shared: { name: 'Rental (2 Person Shared)', price: '৳30+30=৳60/day', maxBikers: 2 },
    'rent-to-own': { name: 'Rent-to-Own', price: '৳45/day', maxBikers: 1 },
  };

  const handleAddBiker = () => {
    if (!selectedBikerId) return;
    const biker = availableBikers.find(b => b.id === selectedBikerId);
    if (biker && assignedBikers.length < planDetails[rentalPlan].maxBikers) {
      setAssignedBikers([...assignedBikers, { ...biker, dailyRate: rentalPlan === 'single' ? 50 : rentalPlan === 'shared' ? 30 : 45 }]);
      setSelectedBikerId('');
    }
  };

  const handleRemoveBiker = (id: string) => {
    setAssignedBikers(assignedBikers.filter(b => b.id !== id));
  };

  const handleSubmitAssignment = () => {
    alert(`Assigned ${assignedBikers.length} biker(s) under ${planDetails[rentalPlan].name}!\nTotal Daily Rate: ৳${assignedBikers.reduce((sum, b) => sum + b.dailyRate, 0)}`);
    setShowAssignModal(false);
    setAssignedBikers([]);
    setRentalPlan('single');
  };

  return (
    <div className="space-y-4">
      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <div className="flex items-center justify-between mb-4">
          <h3 className="font-semibold text-slate-700">Current Biker Assignments</h3>
          <button
            onClick={() => setShowAssignModal(true)}
            className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark flex items-center gap-2"
          >
            <User className="w-4 h-4" /> Assign Bikers
          </button>
        </div>

        {activeAssignments.length > 0 ? (
          <div className="space-y-3">
            {activeAssignments.map((assignment, idx) => (
              <div key={idx} className="p-4 bg-green-50 border border-green-200 rounded-lg">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                      <User className="w-6 h-6 text-green-600" />
                    </div>
                    <div>
                      <p className="font-semibold text-slate-700">{assignment.bikerName}</p>
                      <p className="text-sm text-slate-500">ID: {assignment.bikerId}</p>
                      <p className="text-xs text-slate-400">Assigned: {new Date(assignment.assignedAt).toLocaleString()}</p>
                    </div>
                  </div>
                  <span className="px-3 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">Active</span>
                </div>
                {assignment.notes && <p className="mt-2 text-sm text-slate-600">{assignment.notes}</p>}
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-8 border-2 border-dashed border-slate-200 rounded-lg">
            <User className="w-12 h-12 text-slate-300 mx-auto mb-4" />
            <p className="text-slate-500">No biker currently assigned</p>
            <button onClick={() => setShowAssignModal(true)} className="mt-2 text-accent hover:underline">Assign bikers</button>
          </div>
        )}
      </div>

      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-4">Assignment History</h3>
        {assignmentHistory.length > 0 ? (
          <div className="space-y-3">
            {assignmentHistory.map((assignment, idx) => (
              <div key={idx} className={`p-4 rounded-lg border ${assignment.status === 'active' ? 'bg-green-50 border-green-200' : 'bg-slate-50 border-slate-200'}`}>
                <div className="flex items-start justify-between">
                  <div className="flex items-center gap-3">
                    <div className={`w-10 h-10 rounded-full flex items-center justify-center ${assignment.status === 'active' ? 'bg-green-100' : 'bg-slate-200'}`}>
                      <User className={`w-5 h-5 ${assignment.status === 'active' ? 'text-green-600' : 'text-slate-500'}`} />
                    </div>
                    <div>
                      <p className="font-medium text-slate-700">{assignment.bikerName}</p>
                      <p className="text-sm text-slate-500">ID: {assignment.bikerId}</p>
                    </div>
                  </div>
                  <span className={`px-2 py-1 text-xs font-medium rounded-full ${assignment.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-200 text-slate-600'}`}>
                    {assignment.status === 'active' ? 'Active' : 'Completed'}
                  </span>
                </div>
                <div className="mt-2 text-sm text-slate-500 grid grid-cols-2 gap-2">
                  <p>Assigned: {new Date(assignment.assignedAt).toLocaleString()}</p>
                  {assignment.unassignedAt && <p>Unassigned: {new Date(assignment.unassignedAt).toLocaleString()}</p>}
                </div>
                {assignment.reason && <p className="mt-1 text-sm text-slate-400">Reason: {assignment.reason}</p>}
              </div>
            ))}
          </div>
        ) : (
          <div className="text-center py-8 text-slate-400">
            <History className="w-10 h-10 mx-auto mb-2 opacity-50" />
            <p>No assignment history</p>
          </div>
        )}
      </div>

      {showAssignModal && (
        <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-3xl max-h-[90vh] overflow-hidden">
            <div className="p-5 border-b border-slate-100 flex items-center justify-between">
              <h2 className="text-lg font-bold text-slate-800">Assign Bikers to {bike.id}</h2>
              <button onClick={() => setShowAssignModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
                <X className="w-5 h-5 text-slate-400" />
              </button>
            </div>

            <div className="p-5 overflow-y-auto max-h-[70vh]">
              <div className="mb-6">
                <label className="text-sm font-medium text-slate-600 mb-2 block">Choose Rental Plan</label>
                <div className="grid grid-cols-3 gap-3">
                  {Object.entries(planDetails).map(([key, plan]) => (
                    <button
                      key={key}
                      onClick={() => { setRentalPlan(key as any); setAssignedBikers([]); }}
                      className={`p-4 rounded-lg border text-left transition-all ${rentalPlan === key
                        ? 'border-accent bg-accent/5'
                        : 'border-slate-200 hover:border-accent/50'
                        }`}
                    >
                      <p className="font-semibold text-slate-700">{plan.name}</p>
                      <p className="text-sm text-green-600 font-medium">{plan.price}</p>
                      <p className="text-xs text-slate-500 mt-1">Max {plan.maxBikers} biker{plan.maxBikers > 1 ? 's' : ''}</p>
                    </button>
                  ))}
                </div>
              </div>

              <div className="mb-4">
                <label className="text-sm font-medium text-slate-600 mb-2 block">
                  Add Biker{rentalPlan === 'shared' ? 's (Shared Rental)' : ''} ({assignedBikers.length}/{planDetails[rentalPlan].maxBikers})
                </label>
                {assignedBikers.length < planDetails[rentalPlan].maxBikers ? (
                  <div className="flex gap-2">
                    <select
                      value={selectedBikerId}
                      onChange={(e) => setSelectedBikerId(e.target.value)}
                      className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
                    >
                      <option value="">Select biker</option>
                      {availableBikers.filter(b => !assignedBikers.some(ab => ab.id === b.id)).map(b => (
                        <option key={b.id} value={b.id}>{b.name} - {b.phone}</option>
                      ))}
                    </select>
                    <button
                      onClick={handleAddBiker}
                      disabled={!selectedBikerId}
                      className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark disabled:opacity-50"
                    >
                      Add
                    </button>
                  </div>
                ) : (
                  <p className="text-sm text-green-600">Maximum bikers assigned for this plan</p>
                )}
              </div>

              {assignedBikers.length > 0 && (
                <div className="space-y-3 mb-4">
                  {assignedBikers.map((biker, idx) => (
                    <div key={idx} className="p-4 bg-slate-50 rounded-lg border border-slate-200">
                      <div className="flex items-start justify-between">
                        <div className="flex items-center gap-3">
                          <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                            <User className="w-6 h-6 text-blue-600" />
                          </div>
                          <div>
                            <p className="font-semibold text-slate-700">{biker.name}</p>
                            <p className="text-sm text-slate-500">{biker.phone}</p>
                            <p className="text-xs text-slate-400">{biker.email}</p>
                          </div>
                        </div>
                        <button onClick={() => handleRemoveBiker(biker.id)} className="p-1 hover:bg-red-50 rounded">
                          <X className="w-4 h-4 text-red-500" />
                        </button>
                      </div>
                      <div className="mt-3 grid grid-cols-2 gap-2 text-sm">
                        <div>
                          <label className="text-xs text-slate-400">Daily Rate</label>
                          <input
                            type="number"
                            value={biker.dailyRate}
                            onChange={(e) => {
                              const updated = [...assignedBikers];
                              updated[idx].dailyRate = Number(e.target.value);
                              setAssignedBikers(updated);
                            }}
                            className="w-full px-2 py-1 border border-slate-200 rounded text-sm"
                          />
                        </div>
                        <div>
                          <label className="text-xs text-slate-400">License</label>
                          <p className="text-slate-600">{biker.license}</p>
                        </div>
                      </div>
                      <div className="mt-2">
                        <label className="text-xs text-slate-400 block">Notes</label>
                        <input
                          type="text"
                          placeholder="Additional notes..."
                          className="w-full px-2 py-1 border border-slate-200 rounded text-sm"
                        />
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {assignedBikers.length > 0 && (
                <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                  <div className="flex justify-between items-center">
                    <span className="font-semibold text-slate-700">Total Daily Rate:</span>
                    <span className="text-xl font-bold text-green-600">
                      ৳{assignedBikers.reduce((sum, b) => sum + b.dailyRate, 0)}/day
                    </span>
                  </div>
                </div>
              )}
            </div>

            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
              <button onClick={() => setShowAssignModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
              <button
                onClick={handleSubmitAssignment}
                disabled={assignedBikers.length === 0}
                className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark disabled:opacity-50"
              >
                Assign {assignedBikers.length} Biker{assignedBikers.length !== 1 ? 's' : ''}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function InvestorTab({ bike }: { bike: Bike }) {
  return (
    <div className="space-y-4">
      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-3">Investor Information</h3>
        {!bike.investorId ? (
          <div className="text-center py-8">
            <User2 className="w-12 h-12 text-slate-300 mx-auto mb-4" />
            <p className="text-sm text-slate-500">No investor assigned.</p>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="flex items-center gap-4 p-4 bg-purple-50 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                <User2 className="w-6 h-6 text-purple-600" />
              </div>
              <div className="flex-1">
                <p className="font-semibold text-slate-700">{bike.investorName || 'Investor'}</p>
                <p className="text-sm text-slate-500">ID: {bike.investorId}</p>
              </div>
              <Link
                href={`/admin/investors/${bike.investorId}`}
                className="px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 flex items-center gap-2"
              >
                <ExternalLink className="w-4 h-4" /> View Investor
              </Link>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">Purchase Date</p>
                <p className="font-semibold text-slate-700">{bike.purchaseDate || 'N/A'}</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">Purchase Price</p>
                <p className="font-semibold text-green-600">৳{bike.purchasePrice?.toLocaleString() || 0}</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">Total Earnings</p>
                <p className="font-semibold text-green-600">৳{bike.totalEarnings?.toLocaleString() || 0}</p>
              </div>
              <div className="bg-slate-50 rounded-lg p-3">
                <p className="text-xs text-slate-500">ROI</p>
                <p className="font-semibold text-amber-600">
                  {bike.purchasePrice && bike.totalEarnings
                    ? ((bike.totalEarnings / bike.purchasePrice) * 100).toFixed(1)
                    : 0}%
                </p>
              </div>
            </div>
          </div>
        )}
      </div>

      <div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
        <h3 className="font-semibold text-slate-700 mb-3">Payment Summary</h3>
        <div className="space-y-2">
          <div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
            <span className="text-sm text-slate-600">Total Paid by Renters</span>
            <span className="font-semibold text-green-600">৳{bike.totalEarnings?.toLocaleString() || 0}</span>
          </div>
          <div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
            <span className="text-sm text-slate-600">Investor Share (80%)</span>
            <span className="font-semibold text-purple-600">৳{Math.round((bike.totalEarnings || 0) * 0.8).toLocaleString()}</span>
          </div>
          <div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
            <span className="text-sm text-slate-600">Company Share (20%)</span>
            <span className="font-semibold text-blue-600">৳{Math.round((bike.totalEarnings || 0) * 0.2).toLocaleString()}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function DamageModal({ bike, damage, onClose, onSave }: { bike: Bike; damage: DamageRecord | null; onClose: () => void; onSave: (damage: DamageRecord) => void }) {
  const [formData, setFormData] = useState({
    id: damage?.id || `DMG${Date.now()}`,
    date: damage?.date || new Date().toISOString().split('T')[0],
    type: damage?.type || 'accident',
    description: damage?.description || '',
    reportedBy: damage?.reportedBy || '',
    reportedAt: damage?.reportedAt || new Date().toISOString().replace('T', ' ').slice(0, 16),
    estimatedCost: damage?.estimatedCost || 0,
    actualCost: damage?.actualCost || 0,
    status: damage?.status || 'reported',
    hubId: damage?.hubId || '',
    hubName: damage?.hubName || '',
  });

  const mockHubs = [
    { id: 'HUB-001', name: 'Gulshan Hub' },
    { id: 'HUB-002', name: 'Banani Hub' },
    { id: 'HUB-003', name: 'Uttara Hub' },
    { id: 'HUB-004', name: 'Mirpur Hub' },
  ];

  const damageTypes = [
    { value: 'accident', label: 'Accident' },
    { value: 'theft', label: 'Theft' },
    { value: 'natural', label: 'Natural Disaster' },
    { value: 'wear_tear', label: 'Wear & Tear' },
    { value: 'other', label: 'Other' },
  ];

  const statusOptions = [
    { value: 'reported', label: 'Reported' },
    { value: 'under_repair', label: 'Under Repair' },
    { value: 'repaired', label: 'Repaired' },
    { value: 'claim_rejected', label: 'Claim Rejected' },
  ];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData as DamageRecord);
  };

  return (
    <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-lg max-h-[90vh] overflow-hidden">
        <div className="p-5 border-b border-slate-100 flex items-center justify-between">
          <h2 className="text-lg font-bold text-slate-800">{damage ? 'Edit Damage Record' : 'Add Damage Record'}</h2>
          <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
            <X className="w-5 h-5 text-slate-400" />
          </button>
        </div>
        <form onSubmit={handleSubmit} className="p-5 overflow-y-auto max-h-[70vh] space-y-4">
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Date</label>
            <input
              type="date"
              value={formData.date}
              onChange={(e) => setFormData({ ...formData, date: e.target.value })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
              required
            />
          </div>
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Type</label>
            <select
              value={formData.type}
              onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
            >
              {damageTypes.map(t => (
                <option key={t.value} value={t.value}>{t.label}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Description</label>
            <textarea
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
              rows={3}
              required
            />
          </div>
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Reported By</label>
            <input
              type="text"
              value={formData.reportedBy}
              onChange={(e) => setFormData({ ...formData, reportedBy: e.target.value })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
              required
            />
          </div>
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Hub</label>
            <select
              value={formData.hubId}
              onChange={(e) => setFormData({ ...formData, hubId: e.target.value, hubName: mockHubs.find(h => h.id === e.target.value)?.name || '' })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
            >
              <option value="">Select Hub</option>
              {mockHubs.map(hub => (
                <option key={hub.id} value={hub.id}>{hub.name}</option>
              ))}
            </select>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-sm font-medium text-slate-600 mb-1 block">Estimated Cost (৳)</label>
              <input
                type="number"
                value={formData.estimatedCost}
                onChange={(e) => setFormData({ ...formData, estimatedCost: 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">Actual Cost (৳)</label>
              <input
                type="number"
                value={formData.actualCost}
                onChange={(e) => setFormData({ ...formData, actualCost: Number(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">Status</label>
            <select
              value={formData.status}
              onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
            >
              {statusOptions.map(s => (
                <option key={s.value} value={s.value}>{s.label}</option>
              ))}
            </select>
          </div>
          <div className="flex justify-end gap-3 pt-4">
            <button type="button" onClick={onClose} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
              Cancel
            </button>
            <button type="submit" className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">
              {damage ? 'Update' : 'Add'} Record
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function MaintenanceModal({ bike, maintenance, onClose, onSave }: { bike: Bike; maintenance: MaintenanceRecord | null; onClose: () => void; onSave: (maintenance: MaintenanceRecord) => void }) {
  const [formData, setFormData] = useState({
    id: maintenance?.id || `MNT${Date.now()}`,
    date: maintenance?.date || new Date().toISOString().split('T')[0],
    type: maintenance?.type || 'routine',
    description: maintenance?.description || '',
    performedBy: maintenance?.performedBy || '',
    cost: maintenance?.cost || 0,
    nextDueDate: maintenance?.nextDueDate || '',
    status: maintenance?.status || 'completed',
    hubId: maintenance?.hubId || '',
    hubName: maintenance?.hubName || '',
  });

  const mockHubs = [
    { id: 'HUB-001', name: 'Gulshan Hub' },
    { id: 'HUB-002', name: 'Banani Hub' },
    { id: 'HUB-003', name: 'Uttara Hub' },
    { id: 'HUB-004', name: 'Mirpur Hub' },
  ];

  const maintenanceTypes = [
    { value: 'routine', label: 'Routine Service' },
    { value: 'battery', label: 'Battery' },
    { value: 'tire', label: 'Tire' },
    { value: 'brake', label: 'Brake' },
    { value: 'engine', label: 'Engine' },
    { value: 'electrical', label: 'Electrical' },
    { value: 'other', label: 'Other' },
  ];

  const statusOptions = [
    { value: 'scheduled', label: 'Scheduled' },
    { value: 'in_progress', label: 'In Progress' },
    { value: 'completed', label: 'Completed' },
  ];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData as MaintenanceRecord);
  };

  return (
    <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-lg max-h-[90vh] overflow-hidden">
        <div className="p-5 border-b border-slate-100 flex items-center justify-between">
          <h2 className="text-lg font-bold text-slate-800">{maintenance ? 'Edit Maintenance Record' : 'Add Maintenance Record'}</h2>
          <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
            <X className="w-5 h-5 text-slate-400" />
          </button>
        </div>
        <form onSubmit={handleSubmit} className="p-5 overflow-y-auto max-h-[70vh] space-y-4">
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Date</label>
            <input
              type="date"
              value={formData.date}
              onChange={(e) => setFormData({ ...formData, date: e.target.value })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
              required
            />
          </div>
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Type</label>
            <select
              value={formData.type}
              onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
            >
              {maintenanceTypes.map(t => (
                <option key={t.value} value={t.value}>{t.label}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Description</label>
            <textarea
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
              rows={3}
              required
            />
          </div>
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Performed By</label>
            <input
              type="text"
              value={formData.performedBy}
              onChange={(e) => setFormData({ ...formData, performedBy: e.target.value })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
              required
            />
          </div>
          <div>
            <label className="text-sm font-medium text-slate-600 mb-1 block">Hub</label>
            <select
              value={formData.hubId}
              onChange={(e) => setFormData({ ...formData, hubId: e.target.value, hubName: mockHubs.find(h => h.id === e.target.value)?.name || '' })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
            >
              <option value="">Select Hub</option>
              {mockHubs.map(hub => (
                <option key={hub.id} value={hub.id}>{hub.name}</option>
              ))}
            </select>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-sm font-medium text-slate-600 mb-1 block">Cost (৳)</label>
              <input
                type="number"
                value={formData.cost}
                onChange={(e) => setFormData({ ...formData, cost: Number(e.target.value) })}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                required
              />
            </div>
            <div>
              <label className="text-sm font-medium text-slate-600 mb-1 block">Next Due Date</label>
              <input
                type="date"
                value={formData.nextDueDate}
                onChange={(e) => setFormData({ ...formData, nextDueDate: 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">Status</label>
            <select
              value={formData.status}
              onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
            >
              {statusOptions.map(s => (
                <option key={s.value} value={s.value}>{s.label}</option>
              ))}
            </select>
          </div>
          <div className="flex justify-end gap-3 pt-4">
            <button type="button" onClick={onClose} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
              Cancel
            </button>
            <button type="submit" className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">
              {maintenance ? 'Update' : 'Add'} Record
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}