'use client';

import { useState, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import {
  ArrowLeft, Bike, User, Calendar, DollarSign, Wallet, Shield, CheckCircle, XCircle,
  Clock, Edit, Save, Plus, Trash2, Image, Upload, Lock, Unlock, AlertTriangle, MessageSquare, MapPin,
  Phone, MessageCircle
} from 'lucide-react';

type RentalStatus = 'active' | 'pending' | 'completed' | 'disputed' | 'cancelled' | 'locked';
type RentalType = 'single' | 'shared' | 'rent-to-own';

interface BikeImage {
  id: string;
  type: 'front' | 'back' | 'left' | 'right';
  url?: string;
}

interface Note {
  id: string;
  text: string;
  createdAt: string;
}

interface Rental {
  id: string;
  bikeId: string;
  userId: string;
  type: RentalType;
  status: RentalStatus;
  startDate: string;
  endDate?: string;
  deposit: number;
  dailyRate: number;
  totalPaid: number;
  dueRental?: number;
  lockedAt?: string;
  lockedReason?: string;
  hubId?: string;
  hubName?: string;
}

const mockRentals: Rental[] = [
  {
    id: 'RNT-001',
    bikeId: 'BIKE-001',
    userId: 'USR-001',
    type: 'single',
    status: 'active',
    startDate: '2024-01-15',
    deposit: 5000,
    dailyRate: 300,
    totalPaid: 81900,
    dueRental: 0,
    hubId: 'HUB-001',
    hubName: 'Gulshan Hub'
  },
  {
    id: 'RNT-002',
    bikeId: 'BIKE-002',
    userId: 'USR-002',
    type: 'shared',
    status: 'pending',
    startDate: '2024-02-01',
    deposit: 3000,
    dailyRate: 200,
    totalPaid: 2000,
    dueRental: 0,
    hubId: 'HUB-002',
    hubName: 'Banani Hub'
  },
  {
    id: 'RNT-003',
    bikeId: 'BIKE-003',
    userId: 'USR-003',
    type: 'rent-to-own',
    status: 'completed',
    startDate: '2023-06-01',
    endDate: '2023-12-01',
    deposit: 10000,
    dailyRate: 500,
    totalPaid: 150000,
    hubId: 'HUB-001',
    hubName: 'Gulshan Hub'
  }
];

const mockBikes: Record<string, {
  id: string;
  model: string;
  plate: string;
  status: string;
  odometer: number;
  batteryHealth: number;
  images: BikeImage[];
}> = {
  'BIKE-001': {
    id: 'BIKE-001',
    model: 'AIMA Lightning',
    plate: 'Dhaka Metro Cha-9012',
    status: 'active',
    odometer: 3510,
    batteryHealth: 85,
    images: [
      { id: 'img1', type: 'front', url: '' },
      { id: 'img2', type: 'back', url: '' },
      { id: 'img3', type: 'left', url: '' },
      { id: 'img4', type: 'right', url: '' }
    ]
  },
  'BIKE-002': {
    id: 'BIKE-002',
    model: 'Yadea DT3',
    plate: 'Dhaka Metro Ba-5521',
    status: 'active',
    odometer: 2100,
    batteryHealth: 92,
    images: []
  }
};

const mockUsers: Record<string, {
  id: string;
  name: string;
  phone: string;
  email: string;
  walletBalance: number;
  membership: string;
  joinedFrom: string;
  kycStatus: 'verified' | 'pending' | 'rejected';
  insurance: 'active' | 'expired' | 'none';
  insuranceExpiry?: string;
}> = {
  'USR-001': {
    id: 'USR-001',
    name: 'Rahim Ahmed',
    phone: '+8801712345678',
    email: 'rahim@example.com',
    walletBalance: 2100,
    membership: 'vip',
    joinedFrom: 'Facebook',
    kycStatus: 'verified',
    insurance: 'active',
    insuranceExpiry: '2024-12-01'
  },
  'USR-002': {
    id: 'USR-002',
    name: 'Karim Hasan',
    phone: '+8801812345678',
    email: 'karim@example.com',
    walletBalance: 500,
    membership: 'standard',
    joinedFrom: 'Referral',
    kycStatus: 'pending',
    insurance: 'none'
  }
};

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

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

  const [rental, setRental] = useState<Rental | null>(null);
  const [user, setUser] = useState<typeof mockUsers['USR-001'] | null>(null);
  const [bike, setBike] = useState<typeof mockBikes['BIKE-001'] | null>(null);
  const [editMode, setEditMode] = useState(false);
  const [notes, setNotes] = useState<Note[]>([
    { id: 'n1', text: 'Initial rental started. Bike in good condition.', createdAt: '2024-01-15' },
    { id: 'n2', text: 'Battery replaced on 2024-01-20.', createdAt: '2024-01-20' }
  ]);
  const [newNote, setNewNote] = useState('');
  const [editForm, setEditForm] = useState<Partial<Rental>>({});
  const [showLockModal, setShowLockModal] = useState(false);
  const [lockReason, setLockReason] = useState('');
  const [dueAmount, setDueAmount] = useState(0);
  const [showDueModal, setShowDueModal] = useState(false);
  const [showImageModal, setShowImageModal] = useState(false);
  const [uploadImageType, setUploadImageType] = useState<string>('');

  useEffect(() => {
    const found = mockRentals.find(r => r.id === id);
    if (found) {
      setRental(found);
      setEditForm(found);
      setUser(mockUsers[found.userId as keyof typeof mockUsers] || null);
      setBike(mockBikes[found.bikeId as keyof typeof mockBikes] || mockBikes['BIKE-001']);
    }
  }, [id]);

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

  const handleSaveEdit = () => {
    setRental(prev => prev ? { ...prev, ...editForm } : null);
    setEditMode(false);
  };

  const handleLockRental = () => {
    if (!lockReason.trim()) return;
    setRental(prev => prev ? { ...prev, status: 'locked', lockedAt: new Date().toISOString(), lockedReason: lockReason } : null);
    setShowLockModal(false);
    setLockReason('');
  };

  const handleUnlockRental = () => {
    setRental(prev => prev ? { ...prev, status: 'active', lockedAt: undefined, lockedReason: undefined } : null);
  };

  const handleCancelRental = () => {
    if (confirm('Are you sure you want to cancel this rental? This action cannot be undone.')) {
      setRental(prev => prev ? { ...prev, status: 'cancelled', endDate: new Date().toISOString() } : null);
    }
  };

  const handleAddDue = () => {
    setRental(prev => prev ? { ...prev, dueRental: (prev.dueRental || 0) + dueAmount } : null);
    setShowDueModal(false);
    setDueAmount(0);
  };

  const handleAddNote = () => {
    if (!newNote.trim()) return;
    setNotes(prev => [...prev, { id: `n${Date.now()}`, text: newNote, createdAt: new Date().toISOString().split('T')[0] }]);
    setNewNote('');
  };

  const handleUpdateOdometer = (value: number) => {
    if (bike) setBike(prev => prev ? { ...prev, odometer: value } : null);
  };

  const handleUpdateBattery = (value: number) => {
    if (bike) setBike(prev => prev ? { ...prev, batteryHealth: value } : null);
  };

  const handleUploadImage = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !bike) return;
    const url = URL.createObjectURL(file);
    setBike(prev => prev ? {
      ...prev,
      images: prev.images.map(img => img.type === uploadImageType ? { ...img, url } : img)
    } : null);
    setShowImageModal(false);
  };

  const statusColors = {
    active: 'bg-green-100 text-green-700',
    pending: 'bg-amber-100 text-amber-700',
    completed: 'bg-blue-100 text-blue-700',
    disputed: 'bg-red-100 text-red-700',
    cancelled: 'bg-slate-100 text-slate-700',
    locked: 'bg-red-100 text-red-700'
  };
  const statusLabels: Record<string, string> = {
    active: 'Active',
    pending: 'Pending',
    completed: 'Completed',
    disputed: 'Disputed',
    cancelled: 'Cancelled',
    locked: 'Locked'
  };

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

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="p-6 border-b border-slate-100">
          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
            <div>
              <div className="flex items-center gap-3">
                <h1 className="text-2xl font-extrabold text-slate-800">{rental.id}</h1>
                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[rental.status]}`}>
                  {statusLabels[rental.status] || rental.status}
                </span>
                {rental.status === 'locked' && (
                  <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-red-100 text-red-700">
                    <Lock className="w-3 h-3" /> Locked
                  </span>
                )}
              </div>
              <p className="text-slate-500 mt-1">Started {rental.startDate} • From {rental.hubName || 'N/A'}</p>
            </div>
            <div className="flex gap-2 flex-wrap">
              {editMode ? (
                <>
                  <button onClick={handleSaveEdit} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
                    <Save className="w-4 h-4" /> Save
                  </button>
                  <button onClick={() => { setEditForm(rental); setEditMode(false); }} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
                    Cancel
                  </button>
                </>
              ) : (
                <>
                  <button onClick={() => setEditMode(true)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
                    <Edit className="w-4 h-4" /> Edit
                  </button>
                  {rental.status === 'active' && (
                    <>
                      <button onClick={() => setShowDueModal(true)} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm hover:bg-amber-700 flex items-center gap-2">
                        <DollarSign className="w-4 h-4" /> Add Due
                      </button>
                      {rental.status === 'active' ? (
                        <button onClick={() => setShowLockModal(true)} className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700 flex items-center gap-2">
                          <Lock className="w-4 h-4" /> Lock Rental
                        </button>
                      ) : rental.status === 'locked' ? (
                        <button onClick={handleUnlockRental} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
                          <Unlock className="w-4 h-4" /> Unlock Rental
                        </button>
                      ) : null}
                    </>
                  )}
                  {rental.status !== 'cancelled' && rental.status !== 'completed' && (
                    <button onClick={handleCancelRental} className="px-4 py-2 bg-slate-600 text-white rounded-lg text-sm hover:bg-slate-700 flex items-center gap-2">
                      <XCircle className="w-4 h-4" /> Cancel Rental
                    </button>
                  )}
                </>
              )}
            </div>
          </div>
        </div>

        <div className="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-6">
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
                <p className="text-sm text-blue-600">Total Spent</p>
                <p className="text-xl font-bold text-blue-800">৳{rental.totalPaid.toLocaleString()}</p>
              </div>
              <div className="bg-green-50 p-4 rounded-xl border border-green-100">
                <p className="text-sm text-green-600">Wallet Balance</p>
                <p className="text-xl font-bold text-green-800">৳{user?.walletBalance.toLocaleString() || 0}</p>
              </div>
              <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
                <p className="text-sm text-purple-600">Deposit Paid</p>
                <p className="text-xl font-bold text-purple-800">৳{rental.deposit.toLocaleString()}</p>
              </div>
              <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
                <p className="text-sm text-amber-600">Due Rental</p>
                <p className="text-xl font-bold text-amber-800">৳{(rental.dueRental || 0).toLocaleString()}</p>
              </div>
            </div>

            <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
              <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
                <Bike className="w-5 h-5" /> Rented Bike Details
              </h3>
              {bike && (
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <div className="flex justify-between"><span className="text-sm text-blue-600">Model</span><span className="text-sm font-medium text-blue-800">{bike.model}</span></div>
                    <div className="flex justify-between"><span className="text-sm text-blue-600">Plate</span><span className="text-sm font-medium text-blue-800">{bike.plate}</span></div>
                    <div className="flex justify-between"><span className="text-sm text-blue-600">Type</span><span className="text-sm font-medium text-blue-800 capitalize">{rental.type}</span></div>
                    <div className="flex justify-between"><span className="text-sm text-blue-600">Daily Rate</span><span className="text-sm font-medium text-blue-800">৳{rental.dailyRate}/day</span></div>
                  </div>
                </div>
              )}
            </div>

            <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
              <h3 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
                <Gauge className="w-5 h-5" /> Mileage Tracking
              </h3>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-amber-600">Current Odometer (km)</label>
                  <input
                    type="number"
                    value={bike?.odometer || 0}
                    onChange={(e) => handleUpdateOdometer(Number(e.target.value))}
                    className="w-full px-3 py-2 border border-amber-200 rounded-lg text-sm mt-1"
                    disabled={rental.status !== 'active'}
                  />
                </div>
                <div>
                  <label className="text-sm text-amber-600">Total Distance</label>
                  <p className="text-lg font-semibold text-amber-800">{(bike?.odometer || 0).toLocaleString()} km</p>
                </div>
              </div>
            </div>

            <div className="bg-green-50 p-4 rounded-xl border border-green-100">
              <h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
                <Battery className="w-5 h-5" /> Battery Health
              </h3>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div>
                  <label className="text-sm text-green-600">Battery Percentage (0-100%)</label>
                  <input
                    type="number"
                    max={100}
                    min={0}
                    value={bike?.batteryHealth || 0}
                    onChange={(e) => handleUpdateBattery(Number(e.target.value))}
                    className="w-full px-3 py-2 border border-green-200 rounded-lg text-sm mt-1"
                    disabled={rental.status !== 'active'}
                  />
                </div>
                <div>
                  <label className="text-sm text-green-600">Health Status</label>
                  <p className={`text-lg font-semibold ${(bike?.batteryHealth || 0) > 70 ? 'text-green-700' : (bike?.batteryHealth || 0) > 40 ? 'text-amber-700' : 'text-red-700'}`}>
                    {(bike?.batteryHealth || 0) > 70 ? 'Good' : (bike?.batteryHealth || 0) > 40 ? 'Fair' : 'Poor'}
                  </p>
                  <p className="text-xs text-green-600">Estimated Range: {Math.round((bike?.batteryHealth || 0) * 1)} km</p>
                </div>
              </div>
            </div>

            <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-purple-800 flex items-center gap-2">
                  <Image className="w-5 h-5" /> Bike Images
                </h3>
                {rental.status === 'active' && (
                  <button
                    onClick={() => setShowImageModal(true)}
                    className="text-xs px-2 py-1 bg-white rounded border border-purple-200 text-purple-700 hover:bg-purple-100 flex items-center gap-1"
                  >
                    <Upload className="w-3 h-3" /> Upload
                  </button>
                )}
              </div>
              <div className="grid grid-cols-4 gap-2">
                {['front', 'back', 'left', 'right'].map(type => {
                  const img = bike?.images.find(i => i.type === type);
                  return (
                    <div key={type} className="aspect-video bg-white rounded-lg border border-purple-200 flex items-center justify-center overflow-hidden">
                      {img?.url ? (
                        <img src={img.url} alt={type} className="w-full h-full object-cover" />
                      ) : (
                        <div className="text-center p-2">
                          <Image className="w-8 h-8 text-purple-300 mx-auto" />
                          <p className="text-xs text-purple-500 capitalize mt-1">{type}</p>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
              <h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
                <MessageSquare className="w-5 h-5" /> Notes ({notes.length})
              </h3>
              {notes.length > 0 ? (
                <div className="space-y-2 mb-3">
                  {notes.map(note => (
                    <div key={note.id} className="bg-white p-3 rounded-lg">
                      <p className="text-sm text-slate-700">{note.text}</p>
                      <p className="text-xs text-slate-400 mt-1">{note.createdAt}</p>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-slate-500 mb-3">No notes yet.</p>
              )}
              {rental.status === 'active' && (
                <div className="flex gap-2">
                  <input
                    type="text"
                    value={newNote}
                    onChange={(e) => setNewNote(e.target.value)}
                    placeholder="Add notes about the bike condition, issues, etc..."
                    className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  />
                  <button onClick={handleAddNote} disabled={!newNote.trim()} className="px-4 py-2 bg-accent text-white rounded-lg text-sm disabled:opacity-50">
                    <Plus className="w-4 h-4" />
                  </button>
                </div>
              )}
            </div>
          </div>

          <div className="space-y-4">
            <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
              <h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
                <User className="w-5 h-5" /> User Info
              </h3>
              <div className="space-y-2">
                <div className="flex justify-between"><span className="text-sm text-blue-600">Name</span><span className="text-sm font-medium text-blue-800">{user?.name}</span></div>
                <div className="flex justify-between"><span className="text-sm text-blue-600">Phone</span><span className="text-sm font-medium text-blue-800">{user?.phone}</span></div>
                <div className="flex justify-between"><span className="text-sm text-blue-600">Email</span><span className="text-sm font-medium text-blue-800">{user?.email || '-'}</span></div>
                {user && (
                  <div className="flex gap-2 mt-2 pt-2 border-t border-blue-100">
                    <a href={`tel:${user.phone}`} className="flex-1 py-2 bg-green-500 text-white rounded-lg text-sm text-center hover:bg-green-600 flex items-center justify-center gap-2">
                      <Phone className="w-4 h-4" /> Call
                    </a>
                    <a href={`sms:${user.phone}`} className="flex-1 py-2 bg-blue-500 text-white rounded-lg text-sm text-center hover:bg-blue-600 flex items-center justify-center gap-2">
                      <MessageCircle className="w-4 h-4" /> Message
                    </a>
                  </div>
                )}
              </div>
            </div>

            <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
              <h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
                <Shield className="w-5 h-5" /> Membership & Insurance
              </h3>
              <div className="space-y-2">
                <div className="flex justify-between"><span className="text-sm text-purple-600">Membership</span><span className="text-sm font-medium text-purple-800 uppercase">{user?.membership}</span></div>
                <div className="flex justify-between"><span className="text-sm text-purple-600">KYC Status</span><span className="text-sm font-medium text-purple-800 capitalize">{user?.kycStatus}</span></div>
                <div className="flex justify-between"><span className="text-sm text-purple-600">Insurance</span><span className="text-sm font-medium text-purple-800 capitalize">{user?.insurance}</span></div>
                {user?.insuranceExpiry && <div className="flex justify-between"><span className="text-sm text-purple-600">Insurance Expiry</span><span className="text-sm font-medium text-purple-800">{user.insuranceExpiry}</span></div>}
              </div>
            </div>

            <div className="bg-green-50 p-4 rounded-xl border border-green-100">
              <h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
                <MapPin className="w-5 h-5" /> Hub Info
              </h3>
              <div className="space-y-2">
                <div className="flex justify-between"><span className="text-sm text-green-600">Hub</span><span className="text-sm font-medium text-green-800">{rental.hubName || '-'}</span></div>
                {editMode ? (
                  <select
                    value={editForm.hubId || ''}
                    onChange={(e) => {
                      const hub = mockHubs.find(h => h.id === e.target.value);
                      setEditForm({ ...editForm, hubId: e.target.value, hubName: hub?.name });
                    }}
                    className="w-full px-3 py-2 border border-green-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 className="flex justify-between"><span className="text-sm text-green-600">Joined From</span><span className="text-sm font-medium text-green-800">{user?.joinedFrom || '-'}</span></div>
                )}
              </div>
            </div>

            {rental.status === 'locked' && (
              <div className="bg-red-50 p-4 rounded-xl border border-red-100">
                <h3 className="font-semibold text-red-800 mb-3 flex items-center gap-2">
                  <Lock className="w-5 h-5" /> Locked Info
                </h3>
                <div className="space-y-2">
                  <div className="flex justify-between"><span className="text-sm text-red-600">Locked At</span><span className="text-sm font-medium text-red-800">{rental.lockedAt?.split('T')[0]}</span></div>
                  <div className="flex justify-between"><span className="text-sm text-red-600">Reason</span><span className="text-sm font-medium text-red-800">{rental.lockedReason}</span></div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {showLockModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800 flex items-center gap-2">
                <Lock className="w-5 h-5" /> Lock Rental
              </h3>
              <button onClick={() => setShowLockModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <label className="text-sm text-slate-600">Reason for locking</label>
              <textarea
                value={lockReason}
                onChange={(e) => setLockReason(e.target.value)}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                rows={3}
                placeholder="Enter reason..."
              />
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowLockModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleLockRental} disabled={!lockReason.trim()} className="px-4 py-2 bg-red-600 text-white rounded-lg disabled:opacity-50">Lock Rental</button>
            </div>
          </div>
        </div>
      )}

      {showDueModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800 flex items-center gap-2">
                <DollarSign className="w-5 h-5" /> Add Due Rental
              </h3>
              <button onClick={() => setShowDueModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <label className="text-sm text-slate-600">Due Amount (৳)</label>
              <input
                type="number"
                min={0}
                value={dueAmount}
                onChange={(e) => setDueAmount(Math.max(0, Number(e.target.value)))}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                placeholder="Enter amount..."
              />
              <p className="text-xs text-slate-500 mt-2">Current Due: ৳{rental.dueRental || 0}</p>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowDueModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleAddDue} disabled={dueAmount <= 0} className="px-4 py-2 bg-amber-600 text-white rounded-lg disabled:opacity-50">Add Due</button>
            </div>
          </div>
        </div>
      )}

      {showImageModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
              <h3 className="font-semibold text-slate-800">Upload Bike Image</h3>
              <button onClick={() => setShowImageModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <label className="text-sm text-slate-600">Select Image Type</label>
              <select
                value={uploadImageType}
                onChange={(e) => setUploadImageType(e.target.value)}
                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
              >
                <option value="">Select type...</option>
                <option value="front">Front</option>
                <option value="back">Back</option>
                <option value="left">Left Side</option>
                <option value="right">Right Side</option>
              </select>
              {uploadImageType && (
                <div className="mt-4">
                  <input
                    type="file"
                    accept="image/*"
                    onChange={handleUploadImage}
                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm file:mr-4 file:px-4 file:py-2 file:bg-accent file:text-white file:rounded-lg file:border-0 cursor-pointer"
                  />
                </div>
              )}
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowImageModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function Gauge({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
      <circle cx="12" cy="12" r="4" />
    </svg>
  );
}

function Battery({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <rect x="1" y="6" width="18" height="12" rx="2" />
      <line x1="23" y1="10" x2="23" y2="14" />
      <line x1="7" y1="10" x2="7" y2="14" />
      <line x1="11" y1="10" x2="11" y2="14" />
    </svg>
  );
}