'use client';

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import {
  ArrowLeft, Bike, User, Calendar, DollarSign, Wallet, Shield, CheckCircle, XCircle,
  Clock, Edit, Save, Plus, Trash2, Image, Upload, Lock, Unlock, AlertTriangle, MessageSquare, MapPin,
  Phone, MessageCircle, Play, Check, X, FileText, Download, Battery, Printer
} from 'lucide-react';
import {
  canRentalAccept, canRentalReject, canRentalCancel, canRentalEdit,
  canRentalImageApprove, canRentalLock, canRentalUnlock
} from '../../../../lib/auth';

type RentalStatus = 'pending' | 'accepted' | 'active' | 'completed' | 'cancelled' | 'locked' | 'disputed';
type RentalType = 'single' | 'shared' | 'rent-to-own';
type PaymentMethod = 'cash' | 'bank' | 'wallet';
type PaymentStatus = 'paid' | 'partial' | 'overdue' | 'unpaid';
type PenaltyLevel = 'none' | 'day1' | 'day2' | 'day3';

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

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

interface Rental {
  id: string;
  bikeId: string;
  userId: string;
  userName: string;
  userPhone: string;
  bikeModel: string;
  bikePlate: string;
  bikeBattery: number;
  batteryId?: string;
  batteryName?: string;
  batteryRent?: number;
  type: RentalType;
  status: RentalStatus;
  startDate: string;
  endDate?: string;
  contractMonths?: number;
  subscriptionType: 'daily' | 'weekly' | 'monthly';
  deposit: number;
  depositPaymentMethod: PaymentMethod;
  depositPaid: boolean;
  dailyRate: number;
  weeklyRate: number;
  monthlyRate: number;
  totalPaid: number;
  dueRental: number;
  pendingRent?: number;
  pendingRentDays?: number;
  paymentStatus: PaymentStatus;
  penaltyLevel: PenaltyLevel;
  penaltyAmount: number;
  lockedAt?: string;
  lockedReason?: string;
  hubId: string;
  hubName: string;
  initialImages?: BikeImage[];
  imagesApproved: boolean;
  bikerNote?: string;
  rejectNote?: string;
  createdAt: string;
  acceptedAt?: string;
  activatedAt?: string;
  lockHistory?: LockEvent[];
  paymentHistory?: PaymentHistory[];
  batteryHistory?: BatteryRentalHistory[];
}

interface BatteryRentalHistory {
  id: string;
  batteryId: string;
  batteryName: string;
  assignedAt: string;
  returnedAt?: string;
  monthlyRent: number;
  deposit: number;
  depositMethod: 'cash' | 'bank' | 'bkash' | 'nagad';
  invoiceId: string;
  invoiceGeneratedAt: string;
  status: 'active' | 'returned';
}

interface Invoice {
  id: string;
  type: 'ev_rental' | 'battery_rental';
  relatedId: string; // rental id or battery history id
  amount: number;
  deposit?: number;
  generatedAt: string;
  status: 'paid' | 'unpaid';
  description: string;
}

interface JournalEntry {
  id: string;
  date: string;
  description: string;
  debit: string;
  credit: string;
  amount: number;
  referenceId: string;
  type: 'battery_deposit' | 'battery_rent' | 'ev_deposit' | 'ev_rent';
}

interface LockEvent {
  id: string;
  action: 'locked' | 'unlocked';
  reason?: string;
  performedBy: string;
  performedAt: string;
}

interface PaymentHistory {
  id: string;
  amount: number;
  type: 'daily' | 'weekly' | 'monthly' | 'deposit' | 'penalty';
  date: string;
  method: 'cash' | 'bank' | 'wallet' | 'bkash' | 'nagad';
  status: 'paid' | 'pending' | 'failed';
  note?: string;
}

const mockRentals: Rental[] = [
  {
    id: 'RNT-001',
    bikeId: 'BIKE-001',
    userId: 'USR-003',
    userName: 'Jamal Uddin',
    userPhone: '+8801912345678',
    bikeModel: 'AIMA Lightning',
    bikePlate: 'Dhaka Metro Cha-9012',
    bikeBattery: 87,
    type: 'single',
    status: 'active',
    startDate: '2024-01-15',
    contractMonths: 12,
    subscriptionType: 'monthly',
    deposit: 3000,
    depositPaymentMethod: 'cash',
    depositPaid: true,
    dailyRate: 150,
    weeklyRate: 900,
    monthlyRate: 3500,
    batteryRent: 1500,
    totalPaid: 38500,
    dueRental: 0,
    pendingRent: 0,
    pendingRentDays: 0,
    paymentStatus: 'paid',
    penaltyLevel: 'none',
    penaltyAmount: 0,
    hubId: 'HUB-001',
    hubName: 'Gulshan Hub',
    imagesApproved: true,
    initialImages: [
      { id: 'img1', type: 'front', url: 'https://picsum.photos/seed/bike-front/400/300', approved: true },
      { id: 'img2', type: 'back', url: 'https://picsum.photos/seed/bike-back/400/300', approved: true },
      { id: 'img3', type: 'left', url: 'https://picsum.photos/seed/bike-left/400/300', approved: true },
      { id: 'img4', type: 'right', url: 'https://picsum.photos/seed/bike-right/400/300', approved: true },
      { id: 'img5', type: 'battery', url: 'https://picsum.photos/seed/bike-battery/400/300', approved: true },
    ],
    createdAt: '2024-01-15',
    acceptedAt: '2024-01-15',
    activatedAt: '2024-01-16',
    paymentHistory: [
      { id: 'PAY-001', amount: 3000, type: 'deposit', date: '2024-01-15', method: 'bkash', status: 'paid', note: 'Deposit payment' },
      { id: 'PAY-002', amount: 12000, type: 'monthly', date: '2024-02-15', method: 'bank', status: 'paid', note: 'February rent' },
      { id: 'PAY-003', amount: 12000, type: 'monthly', date: '2024-03-15', method: 'bank', status: 'paid', note: 'March rent' },
      { id: 'PAY-004', amount: 12000, type: 'monthly', date: '2024-04-15', method: 'bank', status: 'pending', note: 'April rent - pending' },
    ],
    lockHistory: [
      { id: 'lh1', action: 'locked', reason: 'First payment overdue - Day 1 penalty', performedBy: 'System', performedAt: '2024-02-01' },
      { id: 'lh2', action: 'unlocked', reason: 'Payment received', performedBy: 'Admin Manager', performedAt: '2024-02-03' },
      { id: 'lh3', action: 'locked', reason: 'Second payment overdue - Day 2 penalty', performedBy: 'System', performedAt: '2024-03-01' },
      { id: 'lh4', action: 'unlocked', reason: 'Payment cleared', performedBy: 'Admin Manager', performedAt: '2024-03-02' },
    ],
    batteryHistory: [
      { id: 'BAT-RENT-001', batteryId: 'BAT-DH-001', batteryName: 'Galaxy 72V 45Ah', assignedAt: '2024-01-16', monthlyRent: 1500, deposit: 3000, depositMethod: 'bkash' as const, invoiceId: 'INV-BAT-001', invoiceGeneratedAt: '2024-01-16', status: 'active' as const },
      { id: 'BAT-RENT-002', batteryId: 'BAT-DH-002', batteryName: 'Titan 72V 50Ah', assignedAt: '2024-02-20', returnedAt: '2024-03-15', monthlyRent: 1800, deposit: 3500, depositMethod: 'cash' as const, invoiceId: 'INV-BAT-002', invoiceGeneratedAt: '2024-02-20', status: 'returned' as const },
    ],
  },
  {
    id: 'RNT-002',
    bikeId: 'BIKE-002',
    userId: 'USR-002',
    userName: 'Karim Hasan',
    userPhone: '+8801812345678',
    bikeModel: 'Yadea DT3',
    bikePlate: 'Dhaka Metro Ba-5521',
    bikeBattery: 65,
    type: 'single',
    status: 'pending',
    startDate: '2024-02-10',
    contractMonths: 3,
    subscriptionType: 'monthly',
    deposit: 3000,
    depositPaymentMethod: 'bank',
    depositPaid: true,
    dailyRate: 150,
    weeklyRate: 900,
    monthlyRate: 3500,
    totalPaid: 3000,
    dueRental: 3500,
    pendingRent: 3500,
    pendingRentDays: 5,
    paymentStatus: 'partial',
    penaltyLevel: 'none',
    penaltyAmount: 0,
    hubId: 'HUB-002',
    hubName: 'Banani Hub',
    imagesApproved: false,
    initialImages: [
      { id: 'img1', type: 'front', url: '', approved: false },
      { id: 'img2', type: 'back', url: '', approved: false },
      { id: 'img3', type: 'left', url: '', approved: false },
      { id: 'img4', type: 'right', url: '', approved: false },
      { id: 'img5', type: 'battery', url: '', approved: false },
    ],
    createdAt: '2024-02-10',
  },
  {
    id: 'RNT-003',
    bikeId: 'BIKE-003',
    userId: 'USR-001',
    userName: 'Rahim Ahmed',
    userPhone: '+8801712345678',
    bikeModel: 'AIMA EM5',
    bikePlate: 'Dhaka Metro Ko-1234',
    bikeBattery: 92,
    type: 'rent-to-own',
    status: 'completed',
    startDate: '2023-06-01',
    endDate: '2023-12-01',
    contractMonths: 6,
    subscriptionType: 'monthly',
    deposit: 10000,
    depositPaymentMethod: 'wallet',
    depositPaid: true,
    dailyRate: 500,
    weeklyRate: 3000,
    monthlyRate: 12000,
    totalPaid: 82000,
    dueRental: 0,
    pendingRent: 0,
    pendingRentDays: 0,
    paymentStatus: 'paid',
    penaltyLevel: 'none',
    penaltyAmount: 0,
    hubId: 'HUB-001',
    hubName: 'Gulshan Hub',
    imagesApproved: true,
    createdAt: '2023-06-01',
    acceptedAt: '2023-06-01',
    activatedAt: '2023-06-02',
  },
  {
    id: 'RNT-004',
    bikeId: 'BIKE-005',
    userId: 'USR-005',
    userName: 'Farid Ahmed',
    userPhone: '+8801612345678',
    bikeModel: 'Yadea G5',
    bikePlate: 'Dhaka Metro Ha-5678',
    bikeBattery: 45,
    type: 'shared',
    status: 'locked',
    startDate: '2024-01-20',
    contractMonths: 1,
    subscriptionType: 'weekly',
    deposit: 2000,
    depositPaymentMethod: 'cash',
    depositPaid: true,
    dailyRate: 100,
    weeklyRate: 600,
    monthlyRate: 2200,
    totalPaid: 2600,
    dueRental: 600,
    pendingRent: 600,
    pendingRentDays: 3,
    paymentStatus: 'overdue',
    penaltyLevel: 'day3',
    penaltyAmount: 1000,
    lockedAt: '2024-02-05',
    lockedReason: 'Payment overdue - bike locked',
    hubId: 'HUB-003',
    hubName: 'Uttara Hub',
    imagesApproved: true,
    createdAt: '2024-01-20',
    acceptedAt: '2024-01-20',
    activatedAt: '2024-01-21',
    lockHistory: [
      { id: 'lh1', action: 'locked', reason: 'Weekly payment overdue', performedBy: 'System', performedAt: '2024-02-05' },
    ],
  },
];

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

interface BatteryOption {
  id: string;
  brand: string;
  model: string;
  soc: number;
  monthlyRent: number;
  status: 'available' | 'in-use';
}

const mockBatteries: BatteryOption[] = [
  { id: 'BAT-DH-001', brand: 'Galaxy', model: '72V 45Ah', soc: 85, monthlyRent: 1500, status: 'available' },
  { id: 'BAT-DH-002', brand: 'Titan', model: '72V 50Ah', soc: 92, monthlyRent: 1800, status: 'available' },
  { id: 'BAT-DH-003', brand: 'PowerMax', model: '60V 40Ah', soc: 78, monthlyRent: 1200, status: 'available' },
  { id: 'BAT-DH-004', brand: 'UltraCell', model: '72V 55Ah', soc: 88, monthlyRent: 2000, status: 'available' },
  { id: 'BAT-DH-005', brand: 'EcoVolt', model: '48V 30Ah', soc: 65, monthlyRent: 800, status: 'available' },
];

const mockDamageHistory = [
  { id: 'DMG-001', date: '2024-02-10', description: 'Minor scratch on left mirror', severity: 'minor', status: 'resolved' },
  { id: 'DMG-002', date: '2024-03-05', description: 'Front fender dented', severity: 'moderate', status: 'reported' },
  { id: 'DMG-003', date: '2024-03-15', description: 'Rear tire puncture', severity: 'minor', status: 'resolved' },
];

const mockDocuments = [
  { id: 'DOC-001', name: 'Rental Agreement', type: 'agreement', uploadedAt: '2024-01-15', downloaded: true },
  { id: 'DOC-002', name: 'Bike Delivery Form', type: 'form', uploadedAt: '2024-01-16', downloaded: true },
  { id: 'DOC-003', name: 'KYC Documents', type: 'kyc', uploadedAt: '2024-01-14', downloaded: true },
  { id: 'DOC-004', name: 'Insurance Policy', type: 'insurance', uploadedAt: '2024-01-15', downloaded: false },
];

const mockMessages = [
  { id: 'MSG-001', date: '2024-03-15', text: 'Payment reminder sent', type: 'system' },
  { id: 'MSG-002', date: '2024-03-10', text: 'Bike inspection scheduled', type: 'system' },
  { id: 'MSG-003', date: '2024-02-20', text: 'User requested repair', type: 'user' },
];

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

  const [rental, setRental] = useState<Rental | null>(null);
  const [editMode, setEditMode] = useState(false);
  const [notes, setNotes] = useState<Note[]>([
    { id: 'n1', text: 'Rental started successfully. Bike in good condition.', createdAt: '2024-01-15' },
    { id: 'n2', text: 'First monthly payment received.', createdAt: '2024-02-15' },
  ]);
  const [newNote, setNewNote] = useState('');
  const [paymentPage, setPaymentPage] = useState(0);
  const [editForm, setEditForm] = useState<Partial<Rental>>({});
  const [showLockModal, setShowLockModal] = useState(false);
  const [showUnlockModal, setShowUnlockModal] = useState(false);
  const [showCancelModal, setShowCancelModal] = useState(false);
  const [lockReason, setLockReason] = useState('');
  const [rejectNote, setRejectNote] = useState('');
  const [showRejectModal, setShowRejectModal] = useState(false);
  const [showDamageModal, setShowDamageModal] = useState(false);
  const [showSmsModal, setShowSmsModal] = useState(false);
  const [damageDesc, setDamageDesc] = useState('');
  const [damageSeverity, setDamageSeverity] = useState<'minor' | 'moderate' | 'severe'>('minor');
  const [smsText, setSmsText] = useState('');
  const [damages, setDamages] = useState(mockDamageHistory);
  const [documents, setDocuments] = useState(mockDocuments);
  const [showUploadModal, setShowUploadModal] = useState(false);
  const [uploadDocName, setUploadDocName] = useState('');
  const [showAddBatteryModal, setShowAddBatteryModal] = useState(false);
  const [selectedBatteryId, setSelectedBatteryId] = useState('');
  const [batteryDeposit, setBatteryDeposit] = useState(0);
  const [batteryDepositMethod, setBatteryDepositMethod] = useState<'cash' | 'bank' | 'bkash' | 'nagad'>('cash');
  const [showBatteryInvoicePreview, setShowBatteryInvoicePreview] = useState<Invoice | null>(null);
  const [isDownloadingPDF, setIsDownloadingPDF] = useState(false);
  const [downloadSuccess, setDownloadSuccess] = useState(false);
  const [invoices, setInvoices] = useState<Invoice[]>([
    { id: 'INV-EV-001', type: 'ev_rental', relatedId: 'RNT-001', amount: 3000, deposit: 3000, generatedAt: '2024-01-15', status: 'paid', description: 'EV Rental Deposit — Jamal Uddin (AIMA Lightning)' },
    { id: 'INV-BAT-001', type: 'battery_rental', relatedId: 'BAT-RENT-001', amount: 1500, deposit: 3000, generatedAt: '2024-01-16', status: 'paid', description: 'Battery Rental — Galaxy 72V 45Ah (Deposit + 1st Month)' },
    { id: 'INV-BAT-002', type: 'battery_rental', relatedId: 'BAT-RENT-002', amount: 1800, deposit: 3500, generatedAt: '2024-02-20', status: 'paid', description: 'Battery Rental — Titan 72V 50Ah (Deposit + 1st Month)' },
  ]);
  const [journalEntries, setJournalEntries] = useState<JournalEntry[]>([
    { id: 'JRN-001', date: '2024-01-15', description: 'EV Rental Deposit received from Jamal Uddin', debit: 'Cash / Bank', credit: 'Rental Deposit Liability', amount: 3000, referenceId: 'INV-EV-001', type: 'ev_deposit' },
    { id: 'JRN-002', date: '2024-01-16', description: 'Battery Deposit received — Galaxy 72V 45Ah', debit: 'Cash / Bank', credit: 'Battery Deposit Liability', amount: 3000, referenceId: 'INV-BAT-001', type: 'battery_deposit' },
    { id: 'JRN-003', date: '2024-02-20', description: 'Battery Deposit received — Titan 72V 50Ah', debit: 'Cash / Bank', credit: 'Battery Deposit Liability', amount: 3500, referenceId: 'INV-BAT-002', type: 'battery_deposit' },
  ]);

  const [acceptPermission, setAcceptPermission] = useState(false);
  const [rejectPermission, setRejectPermission] = useState(false);
  const [cancelPermission, setCancelPermission] = useState(false);
  const [editPermission, setEditPermission] = useState(false);
  const [imageApprovePermission, setImageApprovePermission] = useState(false);
  const [lockPermission, setLockPermission] = useState(false);
  const [unlockPermission, setUnlockPermission] = useState(false);

  useEffect(() => {
    setAcceptPermission(canRentalAccept());
    setRejectPermission(canRentalReject());
    setCancelPermission(canRentalCancel());
    setEditPermission(canRentalEdit());
    setImageApprovePermission(canRentalImageApprove());
    setLockPermission(canRentalLock());
    setUnlockPermission(canRentalUnlock());
  }, []);

  useEffect(() => {
    const found = mockRentals.find(r => r.id === id);
    if (found) {
      setRental(found);
      setEditForm(found);
    }
  }, [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>
          <Link href="/admin/rentals" className="mt-4 px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm inline-block">
            Back to Rentals
          </Link>
        </div>
      </div>
    );
  }

  const getStatusBadge = (status: RentalStatus) => {
    const styles: Record<RentalStatus, string> = {
      active: 'bg-green-100 text-green-700',
      pending: 'bg-amber-100 text-amber-700',
      accepted: 'bg-blue-100 text-blue-700',
      completed: 'bg-indigo-100 text-indigo-700',
      cancelled: 'bg-slate-100 text-slate-600',
      locked: 'bg-red-100 text-red-700',
      disputed: 'bg-orange-100 text-orange-700',
    };
    const labels: Record<RentalStatus, string> = {
      active: 'Active',
      pending: 'Pending',
      accepted: 'Accepted',
      completed: 'Completed',
      cancelled: 'Cancelled',
      locked: 'Locked',
      disputed: 'Disputed',
    };
    return { style: styles[status], label: labels[status] || status };
  };

  const getTypeBadge = (type: RentalType) => {
    const styles: Record<RentalType, string> = {
      single: 'bg-blue-100 text-blue-700',
      shared: 'bg-purple-100 text-purple-700',
      'rent-to-own': 'bg-emerald-100 text-emerald-700',
    };
    const labels: Record<RentalType, string> = {
      single: 'Single Rent',
      shared: 'Share EV',
      'rent-to-own': 'Rent to Own',
    };
    return { style: styles[type], label: labels[type] || type };
  };

  const getPaymentStatusBadge = (status: PaymentStatus) => {
    const styles: Record<PaymentStatus, string> = {
      paid: 'bg-green-100 text-green-700',
      partial: 'bg-amber-100 text-amber-700',
      overdue: 'bg-red-100 text-red-700',
      unpaid: 'bg-slate-100 text-slate-600',
    };
    const labels: Record<PaymentStatus, string> = {
      paid: 'Paid',
      partial: 'Partial',
      overdue: 'Overdue',
      unpaid: 'Unpaid',
    };
    return { style: styles[status], label: labels[status] || status };
  };

  const getPenaltyBadge = (level: PenaltyLevel) => {
    const styles: Record<PenaltyLevel, string> = {
      none: 'bg-slate-100 text-slate-500',
      day1: 'bg-amber-100 text-amber-700',
      day2: 'bg-orange-100 text-orange-700',
      day3: 'bg-red-100 text-red-700',
    };
    const labels: Record<PenaltyLevel, string> = {
      none: 'None',
      day1: '1st Day',
      day2: '2nd Day',
      day3: 'Bike Lock',
    };
    return { style: styles[level], label: labels[level] || level };
  };

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

  const handleLockRental = () => {
    if (!lockReason.trim()) return;
    const newEvent: LockEvent = { id: `lh${Date.now()}`, action: 'locked', reason: lockReason, performedBy: 'Admin', performedAt: new Date().toISOString().split('T')[0] };
    setRental(prev => prev ? { ...prev, status: 'locked', lockedAt: new Date().toISOString().split('T')[0], lockedReason: lockReason, lockHistory: [...(prev.lockHistory || []), newEvent] } : null);
    setShowLockModal(false);
    setLockReason('');
  };

  const handleUnlockRental = () => {
    const newEvent: LockEvent = { id: `lh${Date.now()}`, action: 'unlocked', performedBy: 'Admin', performedAt: new Date().toISOString().split('T')[0] };
    setRental(prev => prev ? { ...prev, status: 'active', lockedAt: undefined, lockedReason: undefined, lockHistory: [...(prev.lockHistory || []), newEvent] } : null);
    setShowUnlockModal(false);
  };

  const handleCancelRental = () => {
    setRental(prev => prev ? { ...prev, status: 'cancelled', endDate: new Date().toISOString().split('T')[0] } : null);
    setShowCancelModal(false);
  };

  const handleAcceptRental = () => {
    setRental(prev => prev ? { ...prev, status: 'accepted', acceptedAt: new Date().toISOString().split('T')[0] } : null);
  };

  const handleRejectRental = () => {
    if (!rejectNote.trim()) return;
    setRental(prev => prev ? { ...prev, status: 'cancelled', rejectNote } : null);
    setShowRejectModal(false);
    setRejectNote('');
  };

  const handleApproveImages = () => {
    setRental(prev => prev ? { ...prev, imagesApproved: true } : null);
  };

  const handleActivateRental = () => {
    setRental(prev => prev ? { ...prev, status: 'active', activatedAt: new Date().toISOString().split('T')[0] } : null);
  };

  const handleAddBattery = () => {
    if (!selectedBatteryId || !rental) return;
    const battery = mockBatteries.find(b => b.id === selectedBatteryId);
    if (!battery) return;

    const today = new Date().toISOString().split('T')[0];
    const newInvId = `INV-BAT-${Date.now().toString().slice(-6)}`;
    const newBatHistId = `BAT-RENT-${Date.now()}`;

    // 1. Create battery rental history entry
    const newBatteryHistory: BatteryRentalHistory = {
      id: newBatHistId,
      batteryId: battery.id,
      batteryName: `${battery.brand} ${battery.model}`,
      assignedAt: today,
      monthlyRent: battery.monthlyRent,
      deposit: batteryDeposit,
      depositMethod: batteryDepositMethod,
      invoiceId: newInvId,
      invoiceGeneratedAt: today,
      status: 'active',
    };

    // 2. Generate invoice
    const newInvoice: Invoice = {
      id: newInvId,
      type: 'battery_rental',
      relatedId: newBatHistId,
      amount: battery.monthlyRent,
      deposit: batteryDeposit,
      generatedAt: today,
      status: 'paid',
      description: `Battery Rental — ${battery.brand} ${battery.model} (Deposit ৳${batteryDeposit} + 1st Month ৳${battery.monthlyRent})`,
    };

    // 3. Auto journal entries
    const journalDeposit: JournalEntry = {
      id: `JRN-${Date.now()}-DEP`,
      date: today,
      description: `Battery Deposit received — ${battery.brand} ${battery.model}`,
      debit: 'Cash / Bank',
      credit: 'Battery Deposit Liability',
      amount: batteryDeposit,
      referenceId: newInvId,
      type: 'battery_deposit',
    };
    const journalRent: JournalEntry = {
      id: `JRN-${Date.now()}-RENT`,
      date: today,
      description: `1st Month Battery Rent — ${battery.brand} ${battery.model}`,
      debit: 'Cash / Bank',
      credit: 'Battery Rent Revenue',
      amount: battery.monthlyRent,
      referenceId: newInvId,
      type: 'battery_rent',
    };

    setInvoices(prev => [...prev, newInvoice]);
    setJournalEntries(prev => [...prev, journalDeposit, journalRent]);
    setRental(prev => prev ? {
      ...prev,
      batteryId: battery.id,
      batteryName: `${battery.brand} ${battery.model}`,
      batteryRent: (prev.batteryRent || 0) + battery.monthlyRent,
      batteryHistory: [...(prev.batteryHistory || []), newBatteryHistory],
    } : null);

    setShowBatteryInvoicePreview(newInvoice);
    setShowAddBatteryModal(false);
    setSelectedBatteryId('');
    setBatteryDeposit(0);
    setBatteryDepositMethod('cash');
  };

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

  const handleReportDamage = () => {
    if (!damageDesc.trim()) return;
    setDamages(prev => [...prev, { id: `DMG-${Date.now()}`, date: new Date().toISOString().split('T')[0], description: damageDesc, severity: damageSeverity, status: 'reported' }]);
    setDamageDesc('');
    setDamageSeverity('minor');
    setShowDamageModal(false);
  };

  const handleUploadDocument = () => {
    if (!uploadDocName.trim()) return;
    setDocuments(prev => [...prev, { id: `DOC-${Date.now()}`, name: uploadDocName, type: 'other', uploadedAt: new Date().toISOString().split('T')[0], downloaded: false }]);
    setUploadDocName('');
    setShowUploadModal(false);
  };

  const handleSendSms = () => {
    if (!smsText.trim()) return;
    alert(`SMS sent to ${rental.userPhone}: ${smsText}`);
    setSmsText('');
    setShowSmsModal(false);
  };

  const handlePrintInvoiceDirect = (inv: Invoice) => {
    setShowBatteryInvoicePreview(inv);
    setTimeout(() => {
      window.print();
    }, 150);
  };

  const handleSimulatedPDFDownload = (invId: string) => {
    setIsDownloadingPDF(true);
    setDownloadSuccess(false);
    setTimeout(() => {
      setIsDownloadingPDF(false);
      setDownloadSuccess(true);
      setTimeout(() => {
        setDownloadSuccess(false);
      }, 2000);
    }, 1500);
  };

  const statusBadge = getStatusBadge(rental.status);
  const typeBadge = getTypeBadge(rental.type);
  const paymentBadge = getPaymentStatusBadge(rental.paymentStatus);
  const penaltyBadge = getPenaltyBadge(rental.penaltyLevel);

  const getBatteryColor = (level: number) => {
    if (level > 70) return 'text-green-600';
    if (level > 40) return 'text-amber-600';
    return 'text-red-600';
  };

  const timelineSteps = [
    { key: 'created', label: 'Created', date: rental.createdAt, completed: true },
    { key: 'accepted', label: 'Accepted', date: rental.acceptedAt, completed: !!rental.acceptedAt },
    { key: 'imagesApproved', label: 'Images Approved', date: rental.imagesApproved ? rental.acceptedAt : undefined, completed: rental.imagesApproved },
    { key: 'activated', label: 'Activated', date: rental.activatedAt, completed: !!rental.activatedAt },
  ];

  return (
    <div className="p-4 lg:p-6 max-w-8xl mx-auto">
      {/* Global `@media print` style sheet overrides */}
      <style dangerouslySetInnerHTML={{
        __html: `
        @media print {
          /* Hide the screen scrollbar and all default content layout wrapper */
          body, html {
            background-color: white !important;
            color: black !important;
            overflow: visible !important;
            height: auto !important;
          }
          
          /* Hide standard layout wrapper tags */
          body * {
            visibility: hidden !important;
          }
          
          /* Show exclusively our paper canvas sheet */
          #printable-invoice-modal, #printable-invoice-modal * {
            visibility: visible !important;
          }
          
          #printable-invoice-modal {
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 40px !important;
            box-shadow: none !important;
            border: none !important;
            background: white !important;
            color: black !important;
          }
          
          /* Suppress all interactive controls from printouts */
          .no-print {
            display: none !important;
          }
        }
      `}} />
      <Link href="/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
      </Link>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="p-6 bg-gradient-to-r from-emerald-600 to-emerald-700 text-white">
          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
            <div>
              <div className="flex items-center gap-3 flex-wrap">
                <h1 className="text-2xl font-extrabold">{rental.id}</h1>
                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusBadge.style}`}>
                  {statusBadge.label}
                </span>
                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${typeBadge.style}`}>
                  {typeBadge.label}
                </span>
              </div>
              <p className="text-emerald-100 mt-1">Created: {rental.createdAt}</p>
            </div>
            <div className="flex gap-2 flex-wrap">
              {editMode ? (
                <>
                  <button onClick={handleSaveEdit} className="px-4 py-2 bg-white text-emerald-700 rounded-lg text-sm hover:bg-emerald-50 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-white/30 text-white rounded-lg text-sm hover:bg-white/10">
                    Cancel
                  </button>
                </>
              ) : (
                <>
                  {/* {editPermission && (
                    <button onClick={() => setEditMode(true)} className="px-4 py-2 bg-white text-emerald-700 rounded-lg text-sm hover:bg-emerald-50 flex items-center gap-2">
                      <Edit className="w-4 h-4" /> Edit
                    </button>
                  )} */}
                  {cancelPermission && rental.status !== 'cancelled' && rental.status !== 'completed' && (
                    <button onClick={() => setShowCancelModal(true)} className="px-4 py-2 bg-red-500 text-white rounded-lg text-sm hover:bg-red-600 flex items-center gap-2">
                      <XCircle className="w-4 h-4" /> Cancel
                    </button>
                  )}
                  {lockPermission && 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
                    </button>
                  )}
                  {unlockPermission && rental.status === 'locked' && (
                    <button onClick={() => setShowUnlockModal(true)} className="px-4 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600 flex items-center gap-2">
                      <Unlock className="w-4 h-4" /> Unlock
                    </button>
                  )}
                  {rental.status === 'accepted' && (
                    <button onClick={handleActivateRental} className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 flex items-center gap-2">
                      <Play className="w-4 h-4" /> Activate
                    </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-3 gap-4">
              <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
                <p className="text-sm text-blue-600 font-medium">Total Paid</p>
                <p className="text-xl font-bold text-blue-800">৳{rental.totalPaid.toLocaleString()}</p>
              </div>
              <div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
                <p className="text-sm text-amber-600 font-medium">Due Rental</p>
                <p className="text-xl font-bold text-amber-800">৳{rental.dueRental.toLocaleString()}</p>
              </div>
              <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
                <p className="text-sm text-purple-600 font-medium">Payment Status</p>
                <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${paymentBadge.style}`}>
                  {paymentBadge.label}
                </span>
              </div>
            </div>

            {rental.penaltyLevel !== 'none' && (
              <div className="bg-red-50 p-4 rounded-xl border border-red-100">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-red-600 font-medium">Penalty</p>
                    <p className="text-lg font-bold text-red-800">৳{rental.penaltyAmount.toLocaleString()}</p>
                  </div>
                  <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${penaltyBadge.style}`}>
                    {penaltyBadge.label}
                  </span>
                </div>
              </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <h3 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
                  <Bike className="w-5 h-5 text-blue-500" /> Bike Info
                </h3>
                <div className="space-y-2">
                  {editMode ? (
                    <input
                      type="text"
                      value={editForm.bikeModel || ''}
                      onChange={(e) => setEditForm({ ...editForm, bikeModel: e.target.value })}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                      placeholder="Bike Model"
                    />
                  ) : (
                    <div className="flex justify-between"><span className="text-sm text-slate-600">Model</span><span className="text-sm font-medium text-slate-800">{rental.bikeModel}</span></div>
                  )}
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Plate</span><span className="text-sm font-medium text-slate-800">{rental.bikePlate}</span></div>
                  <div className="flex justify-between">
                    <span className="text-sm text-slate-600">Battery</span>
                    <span className={`text-sm font-medium ${getBatteryColor(rental.bikeBattery)}`}>{rental.bikeBattery}%</span>
                  </div>
                </div>
              </div>

              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <h3 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
                  <User className="w-5 h-5 text-green-500" /> User Info
                </h3>
                <div className="space-y-2">
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Name</span><span className="text-sm font-medium text-slate-800">{rental.userName}</span></div>
                  <div className="flex justify-between items-center"><span className="text-sm text-slate-600">Phone</span><a href={`tel:${rental.userPhone}`} className="text-sm font-medium text-emerald-600 hover:text-emerald-700">{rental.userPhone}</a></div>
                  <div className="flex gap-2 mt-2 pt-2 border-t border-slate-100">
                    <a href={`tel:${rental.userPhone}`} className="flex-1 py-1.5 bg-green-500 text-white rounded-lg text-xs text-center hover:bg-green-600 flex items-center justify-center gap-1">
                      <Phone className="w-3 h-3" /> Call
                    </a>
                    <a href={`sms:${rental.userPhone}`} className="flex-1 py-1.5 bg-blue-500 text-white rounded-lg text-xs text-center hover:bg-blue-600 flex items-center justify-center gap-1">
                      <MessageCircle className="w-3 h-3" /> SMS
                    </a>
                    <button onClick={() => setShowSmsModal(true)} className="flex-1 py-1.5 bg-indigo-500 text-white rounded-lg text-xs text-center hover:bg-indigo-600 flex items-center justify-center gap-1">
                      <MessageSquare className="w-3 h-3" /> In-App SMS
                    </button>
                  </div>
                </div>
              </div>

              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <h3 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
                  <MapPin className="w-5 h-5 text-purple-500" /> Hub Info
                </h3>
                <div className="space-y-2">
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Hub</span><span className="text-sm font-medium text-slate-800">{rental.hubName}</span></div>
                </div>
              </div>

              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <h3 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
                  <Calendar className="w-5 h-5 text-amber-500" /> Duration
                </h3>
                <div className="space-y-2">
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Start Date</span><span className="text-sm font-medium text-slate-800">{rental.startDate}</span></div>
                  {rental.endDate && <div className="flex justify-between"><span className="text-sm text-slate-600">End Date</span><span className="text-sm font-medium text-slate-800">{rental.endDate}</span></div>}
                  {rental.contractMonths && <div className="flex justify-between"><span className="text-sm text-slate-600">Contract</span><span className="text-sm font-medium text-slate-800">{rental.contractMonths} Months</span></div>}
                </div>
              </div>

              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <h3 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
                  <Clock className="w-5 h-5 text-indigo-500" /> Subscription
                </h3>
                <div className="space-y-2">
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Type</span><span className="text-sm font-medium text-slate-800 capitalize">{rental.subscriptionType}</span></div>
                  <div className="flex justify-between">
                    <span className="text-sm text-slate-600">Bike Rate</span>
                    <span className="text-sm font-medium text-slate-800">
                      ৳{rental.subscriptionType === 'daily' ? rental.dailyRate : rental.subscriptionType === 'weekly' ? rental.weeklyRate : rental.monthlyRate}/
                      {rental.subscriptionType === 'daily' ? 'day' : rental.subscriptionType === 'weekly' ? 'week' : 'month'}
                    </span>
                  </div>
                  {rental.batteryRent && rental.batteryRent > 0 && (
                    <>
                      <div className="flex justify-between">
                        <span className="text-sm text-amber-600">Battery Rate</span>
                        <span className="text-sm font-medium text-amber-700">
                          ৳{Math.round(rental.batteryRent / (rental.subscriptionType === 'daily' ? 30 : rental.subscriptionType === 'weekly' ? 4 : 1))}/
                          {rental.subscriptionType === 'daily' ? 'day' : rental.subscriptionType === 'weekly' ? 'week' : 'month'}
                        </span>
                      </div>
                      <div className="pt-2 mt-2 border-t border-slate-100">
                        <div className="flex justify-between">
                          <span className="text-sm font-medium text-emerald-700">Total (Bike + Battery)</span>
                          <span className="text-sm font-bold text-emerald-700">
                            ৳{rental.subscriptionType === 'daily'
                              ? rental.dailyRate + Math.round(rental.batteryRent / 30)
                              : rental.subscriptionType === 'weekly'
                                ? rental.weeklyRate + Math.round(rental.batteryRent / 4)
                                : rental.monthlyRate + rental.batteryRent}/
                            {rental.subscriptionType === 'daily' ? 'day' : rental.subscriptionType === 'weekly' ? 'week' : 'month'}
                          </span>
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>

              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <h3 className="font-semibold text-slate-700 mb-3 flex items-center gap-2">
                  <Wallet className="w-5 h-5 text-emerald-500" /> Deposit
                </h3>
                <div className="space-y-2">
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Amount</span><span className="text-sm font-medium text-slate-800">৳{rental.deposit.toLocaleString()}</span></div>
                  <div className="flex justify-between"><span className="text-sm text-slate-600">Method</span><span className="text-sm font-medium text-slate-800 capitalize">{rental.depositPaymentMethod}</span></div>
                  <div className="flex justify-between">
                    <span className="text-sm text-slate-600">Status</span>
                    <span className={`text-xs px-2 py-0.5 rounded ${rental.depositPaid ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                      {rental.depositPaid ? 'Paid' : 'Unpaid'}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* Battery Rental History */}
            <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
              <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100 bg-amber-50">
                <h3 className="font-semibold text-amber-800 flex items-center gap-2">
                  <Battery className="w-5 h-5 text-amber-500" /> Battery Rental History
                </h3>
                <button onClick={() => setShowAddBatteryModal(true)} className="px-3 py-1.5 bg-amber-600 text-white rounded-lg text-xs font-medium hover:bg-amber-700 flex items-center gap-1">
                  <Plus className="w-3 h-3" /> Add Battery
                </button>
              </div>
              {rental.batteryHistory && rental.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</th>
                        <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Assigned</th>
                        <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Returned</th>
                        <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Deposit</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">Invoice</th>
                        <th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Status</th>
                        <th className="px-3 py-2"></th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-100">
                      {rental.batteryHistory.map(bat => (
                        <tr key={bat.id} className="hover:bg-slate-50">
                          <td className="px-3 py-2">
                            <p className="text-sm font-medium text-slate-800">{bat.batteryName}</p>
                            <p className="text-xs text-slate-400 font-mono">{bat.batteryId}</p>
                          </td>
                          <td className="px-3 py-2 text-sm text-slate-600">{bat.assignedAt}</td>
                          <td className="px-3 py-2 text-sm text-slate-600">{bat.returnedAt || <span className="text-slate-300">—</span>}</td>
                          <td className="px-3 py-2">
                            <p className="text-sm font-medium text-purple-700">৳{bat.deposit?.toLocaleString() ?? '—'}</p>
                            <p className="text-xs text-slate-400 capitalize">{bat.depositMethod}</p>
                          </td>
                          <td className="px-3 py-2 text-sm font-semibold text-emerald-600">৳{bat.monthlyRent}/mo</td>
                          <td className="px-3 py-2">
                            <button
                              onClick={() => {
                                const inv = invoices.find(i => i.id === bat.invoiceId);
                                if (inv) setShowBatteryInvoicePreview(inv);
                              }}
                              className="text-xs text-blue-600 hover:underline font-mono flex items-center gap-1"
                            >
                              <FileText className="w-3 h-3" />{bat.invoiceId}
                            </button>
                          </td>
                          <td className="px-3 py-2">
                            <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${bat.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-600'}`}>
                              {bat.status === 'active' ? 'Active' : 'Returned'}
                            </span>
                          </td>
                          <td className="px-3 py-2">
                            {bat.status === 'active' && (
                              <button
                                onClick={() => {
                                  const today = new Date().toISOString().split('T')[0];
                                  setRental(prev => prev ? {
                                    ...prev,
                                    batteryHistory: prev.batteryHistory?.map(b =>
                                      b.id === bat.id ? { ...b, status: 'returned' as const, returnedAt: today } : b
                                    ),
                                  } : null);
                                }}
                                className="px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs hover:bg-slate-200"
                              >
                                Return
                              </button>
                            )}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : (
                <div className="px-4 py-6 text-center">
                  <Battery className="w-8 h-8 text-slate-200 mx-auto mb-2" />
                  <p className="text-sm text-slate-400">No battery assigned yet.</p>
                </div>
              )}
              {rental.batteryHistory?.some(b => b.status === 'active') && (
                <div className="m-3 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-center justify-between">
                  <p className="text-sm text-amber-700">
                    <span className="font-semibold">Active Battery Rent: </span>
                    ৳{rental.batteryHistory.filter(b => b.status === 'active').reduce((sum, b) => sum + b.monthlyRent, 0).toLocaleString()}/month
                  </p>
                  <span className="text-xs text-amber-500">{rental.batteryHistory.filter(b => b.status === 'active').length} active</span>
                </div>
              )}
            </div>

            {/* Add Battery Modal */}
            {showAddBatteryModal && (
              <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
                <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
                  <div className="p-5 border-b border-slate-100 flex justify-between items-center bg-amber-50 rounded-t-2xl">
                    <div className="flex items-center gap-2">
                      <Battery className="w-5 h-5 text-amber-600" />
                      <h3 className="font-bold text-amber-900">Add Battery to Rental</h3>
                    </div>
                    <button onClick={() => { setShowAddBatteryModal(false); setSelectedBatteryId(''); setBatteryDeposit(0); }} className="text-slate-400 hover:text-slate-600">
                      <X className="w-5 h-5" />
                    </button>
                  </div>
                  <div className="p-5 space-y-4">
                    {/* Battery Select */}
                    <div>
                      <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5 block">Select Battery</label>
                      <select
                        value={selectedBatteryId}
                        onChange={(e) => setSelectedBatteryId(e.target.value)}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                      >
                        <option value="">Choose a battery...</option>
                        {mockBatteries.map(bat => (
                          <option key={bat.id} value={bat.id}>{bat.brand} {bat.model} — SOC: {bat.soc}% — ৳{bat.monthlyRent}/month</option>
                        ))}
                      </select>
                    </div>

                    {/* Deposit */}
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5 block">Deposit Amount (৳)</label>
                        <input
                          type="number"
                          min={0}
                          value={batteryDeposit}
                          onChange={(e) => setBatteryDeposit(parseInt(e.target.value) || 0)}
                          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                          placeholder="e.g. 3000"
                        />
                      </div>
                      <div>
                        <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5 block">Payment Method</label>
                        <select
                          value={batteryDepositMethod}
                          onChange={(e) => setBatteryDepositMethod(e.target.value as 'cash' | 'bank' | 'bkash' | 'nagad')}
                          className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                        >
                          <option value="cash">Cash</option>
                          <option value="bank">Bank Transfer</option>
                          <option value="bkash">bKash</option>
                          <option value="nagad">Nagad</option>
                        </select>
                      </div>
                    </div>

                    {/* Rate preview */}
                    {selectedBatteryId && (() => {
                      const bat = mockBatteries.find(b => b.id === selectedBatteryId);
                      if (!bat) return null;
                      const rate = rental.subscriptionType === 'daily'
                        ? Math.round(bat.monthlyRent / 30)
                        : rental.subscriptionType === 'weekly'
                          ? Math.round(bat.monthlyRent / 4)
                          : bat.monthlyRent;
                      return (
                        <div className="p-4 bg-amber-50 border border-amber-200 rounded-xl space-y-3">
                          <div className="flex items-center justify-between">
                            <span className="text-sm text-amber-700 font-medium">Monthly Rent</span>
                            <span className="text-sm font-bold text-amber-800">৳{bat.monthlyRent.toLocaleString()}</span>
                          </div>
                          <div className="flex items-center justify-between">
                            <span className="text-sm text-amber-700 font-medium">Deposit</span>
                            <span className="text-sm font-bold text-purple-700">৳{batteryDeposit.toLocaleString()}</span>
                          </div>
                          <div className="border-t border-amber-200 pt-2 flex items-center justify-between">
                            <span className="text-sm text-amber-800 font-semibold">Total Due Today</span>
                            <span className="text-base font-extrabold text-amber-900">৳{(batteryDeposit + rate).toLocaleString()}</span>
                          </div>
                          <div className="bg-white rounded-lg p-2 border border-amber-100">
                            <p className="text-xs text-amber-600 font-medium mb-1">Rate by Subscription ({rental.subscriptionType})</p>
                            <p className="text-sm font-bold text-amber-800">৳{rate}/{rental.subscriptionType === 'daily' ? 'day' : rental.subscriptionType === 'weekly' ? 'week' : 'month'}</p>
                          </div>
                          <div className="text-xs text-amber-500 bg-amber-50 p-2 rounded border border-amber-100">
                            <p className="font-semibold mb-0.5">📋 Invoice will be auto-generated</p>
                            <p>• Debit: Cash/Bank (৳{(batteryDeposit + rate).toLocaleString()})</p>
                            <p>• Credit: Battery Deposit Liability (৳{batteryDeposit.toLocaleString()}) + Battery Rent Revenue (৳{rate.toLocaleString()})</p>
                          </div>
                        </div>
                      );
                    })()}

                    <div className="flex gap-2 pt-2">
                      <button onClick={() => { setShowAddBatteryModal(false); setSelectedBatteryId(''); setBatteryDeposit(0); }} className="flex-1 py-2.5 px-4 border border-slate-200 text-slate-600 rounded-xl text-sm hover:bg-slate-50">
                        Cancel
                      </button>
                      <button
                        onClick={handleAddBattery}
                        disabled={!selectedBatteryId}
                        className="flex-1 py-2.5 px-4 bg-amber-600 text-white rounded-xl text-sm font-semibold hover:bg-amber-700 disabled:opacity-50 flex items-center justify-center gap-2"
                      >
                        <FileText className="w-4 h-4" /> Assign & Generate Invoice
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Unified Printable Invoice Viewer Modal */}
            {showBatteryInvoicePreview && (
              <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 overflow-y-auto no-print">
                <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden border border-slate-100 flex flex-col my-8 transform transition-all animate-fadeIn">

                  {/* Modal Title bar (no-print) */}
                  <div className={`p-5 border-b border-slate-100 flex justify-between items-center text-white ${showBatteryInvoicePreview.type === 'battery_rental'
                      ? 'bg-gradient-to-r from-amber-500 to-amber-600'
                      : 'bg-gradient-to-r from-blue-600 to-indigo-600'
                    }`}>
                    <div className="flex items-center gap-2">
                      {showBatteryInvoicePreview.type === 'battery_rental' ? (
                        <Battery className="w-5 h-5" />
                      ) : (
                        <Bike className="w-5 h-5" />
                      )}
                      <div>
                        <h3 className="font-bold text-lg">Invoice Details</h3>
                        <p className="text-xs opacity-90">Manage, print and download client invoice</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-3">
                      <span className="text-xs font-bold px-3 py-1 rounded-full bg-white/20 border border-white/30 tracking-wide uppercase">
                        {showBatteryInvoicePreview.status}
                      </span>
                      <button onClick={() => setShowBatteryInvoicePreview(null)} className="p-1.5 text-white/80 hover:text-white transition bg-white/10 hover:bg-white/20 rounded-full">
                        <X className="w-5 h-5" />
                      </button>
                    </div>
                  </div>

                  {/* Physical Invoice Paper (Rendered to PDF/Printer) */}
                  <div className="p-8 space-y-6 overflow-y-auto max-h-[60vh] bg-slate-50/50" id="printable-invoice-modal">

                    {/* Invoice Banner & Branding */}
                    <div className="flex justify-between items-start border-b border-slate-200 pb-6">
                      <div>
                        <div className="flex items-center gap-2 text-slate-800 font-extrabold text-xl tracking-tight">
                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-white ${showBatteryInvoicePreview.type === 'battery_rental' ? 'bg-amber-500' : 'bg-blue-600'
                            }`}>
                            ⚡
                          </div>
                          <span>JAIBEN <span className="text-xs font-light text-slate-400">by JML Group</span></span>
                        </div>
                        <p className="text-xs text-slate-500 mt-2 font-medium">Gulshan Hub, House 12, Road 5</p>
                        <p className="text-xs text-slate-500">Gulshan-1, Dhaka 1212, Bangladesh</p>
                        <p className="text-xs text-slate-400">billing@jaiben.com | +880 9612-JAIBEN</p>
                      </div>

                      <div className="text-right">
                        <h2 className="text-2xl font-black text-slate-800 uppercase tracking-widest">INVOICE</h2>
                        <div className="text-sm font-bold text-slate-700 font-mono mt-1">{showBatteryInvoicePreview.id}</div>

                        <div className="mt-3 text-xs text-slate-500 space-y-0.5">
                          <p><span className="font-semibold text-slate-700">Date:</span> {showBatteryInvoicePreview.generatedAt}</p>
                          <p><span className="font-semibold text-slate-700">Due Date:</span> {showBatteryInvoicePreview.generatedAt}</p>
                          <p><span className="font-semibold text-slate-700">Status:</span> <span className="text-emerald-600 font-bold uppercase">{showBatteryInvoicePreview.status}</span></p>
                        </div>
                      </div>
                    </div>

                    {/* Client & Billing Info */}
                    <div className="grid grid-cols-2 gap-6 bg-white p-4 rounded-xl border border-slate-100">
                      <div>
                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Billed To</p>
                        <p className="text-sm font-bold text-slate-800">{rental.userName}</p>
                        <p className="text-xs text-slate-600 mt-1">{rental.userPhone}</p>
                        <p className="text-xs text-slate-500 mt-0.5">Hub: {rental.hubName}</p>
                      </div>
                      <div>
                        <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Details</p>
                        <p className="text-xs text-slate-700"><span className="font-semibold text-slate-600">Rental Type:</span> <span className="capitalize">{rental.type}</span></p>
                        {showBatteryInvoicePreview.type === 'battery_rental' ? (
                          <p className="text-xs text-slate-700 mt-1"><span className="font-semibold text-slate-600">Product:</span> Battery Rent ({rental.batteryName || 'Galaxy 72V 45Ah'})</p>
                        ) : (
                          <p className="text-xs text-slate-700 mt-1"><span className="font-semibold text-slate-600">Product:</span> EV Ride Rent ({rental.bikeModel})</p>
                        )}
                        <p className="text-xs text-slate-700 mt-1"><span className="font-semibold text-slate-600">Contract ID:</span> <span className="font-mono">{rental.id}</span></p>
                      </div>
                    </div>

                    {/* Invoice Items Table */}
                    <div className="overflow-hidden border border-slate-200 rounded-xl bg-white">
                      <table className="w-full text-left border-collapse">
                        <thead>
                          <tr className="bg-slate-50 border-b border-slate-200">
                            <th className="p-3 text-xs font-bold text-slate-600 uppercase">Item Description</th>
                            <th className="p-3 text-xs font-bold text-slate-600 uppercase text-center">Qty</th>
                            <th className="p-3 text-xs font-bold text-slate-600 uppercase text-right">Price</th>
                            <th className="p-3 text-xs font-bold text-slate-600 uppercase text-right">Amount</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100">
                          {/* Deposit Line Item */}
                          {(showBatteryInvoicePreview.deposit ?? 0) > 0 && (
                            <tr>
                              <td className="p-3">
                                <p className="text-sm font-semibold text-slate-800">
                                  {showBatteryInvoicePreview.type === 'battery_rental' ? 'Battery Security Deposit' : 'EV Rental Security Deposit'}
                                </p>
                                <p className="text-xs text-slate-400">Refundable security deposit held for hardware safety</p>
                              </td>
                              <td className="p-3 text-sm text-slate-600 text-center font-semibold">1</td>
                              <td className="p-3 text-sm text-slate-700 text-right font-medium">৳{showBatteryInvoicePreview.deposit?.toLocaleString()}</td>
                              <td className="p-3 text-sm text-slate-800 text-right font-bold">৳{showBatteryInvoicePreview.deposit?.toLocaleString()}</td>
                            </tr>
                          )}
                          {/* Rent Line Item */}
                          {showBatteryInvoicePreview.amount > 0 && (
                            <tr>
                              <td className="p-3">
                                <p className="text-sm font-semibold text-slate-800">
                                  {showBatteryInvoicePreview.type === 'battery_rental' ? 'Battery Subscription Service Fee' : 'EV Rent Service Advance'}
                                </p>
                                <p className="text-xs text-slate-400">Initial cycle subscription fee ({rental.subscriptionType} billing rate)</p>
                              </td>
                              <td className="p-3 text-sm text-slate-600 text-center font-semibold">1</td>
                              <td className="p-3 text-sm text-slate-700 text-right font-medium">৳{showBatteryInvoicePreview.amount.toLocaleString()}</td>
                              <td className="p-3 text-sm text-slate-800 text-right font-bold">৳{showBatteryInvoicePreview.amount.toLocaleString()}</td>
                            </tr>
                          )}
                        </tbody>
                      </table>
                    </div>

                    {/* Summary and Payment Breakdown */}
                    <div className="flex flex-col md:flex-row justify-between items-start gap-4 pt-2">
                      <div className="text-xs text-slate-500 max-w-sm">
                        <p className="font-bold text-slate-700 mb-1">Terms & Conditions</p>
                        <p className="leading-relaxed">This invoice confirms receipt of payment. Security deposits are refundable upon lease completion and inspection approval of the hardware. Rent fees are non-refundable.</p>
                      </div>

                      <div className="w-full md:w-64 bg-slate-50 border border-slate-200 rounded-xl p-4 space-y-2">
                        <div className="flex justify-between text-sm text-slate-600">
                          <span>Subtotal:</span>
                          <span className="font-semibold">৳{((showBatteryInvoicePreview.deposit ?? 0) + showBatteryInvoicePreview.amount).toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between text-sm text-slate-600">
                          <span>Tax/VAT (0%):</span>
                          <span>৳0</span>
                        </div>
                        <div className="border-t border-slate-200 pt-2 flex justify-between text-base font-bold text-slate-800">
                          <span>Total Paid:</span>
                          <span className="text-emerald-700">৳{((showBatteryInvoicePreview.deposit ?? 0) + showBatteryInvoicePreview.amount).toLocaleString()}</span>
                        </div>
                        <div className="flex justify-between text-xs text-slate-500 font-medium">
                          <span>Total Due:</span>
                          <span>৳0 (Fully Settled)</span>
                        </div>
                      </div>
                    </div>

                    {/* Auto Journal Entry / Accounting Ledger (no-print) */}
                    <div className="bg-emerald-50/50 border border-emerald-100 rounded-xl p-4 space-y-3 no-print">
                      <div className="flex justify-between items-center">
                        <p className="text-xs font-bold text-emerald-800 uppercase tracking-wide flex items-center gap-1.5">
                          System Ledger (Auto Journal Entry)
                        </p>
                        <span className="text-[10px] bg-emerald-100 text-emerald-800 font-semibold px-2 py-0.5 rounded-full">Balanced</span>
                      </div>

                      <div className="space-y-1.5 divide-y divide-emerald-100/50 text-xs">
                        <div className="flex justify-between pb-1.5 font-bold text-emerald-900">
                          <span>Debit Account</span>
                          <span>Amount</span>
                        </div>
                        <div className="flex justify-between py-1.5 text-emerald-800">
                          <span className="flex items-center gap-1">🟢 Dr: Cash / Bank Account</span>
                          <span className="font-semibold">৳{((showBatteryInvoicePreview.deposit ?? 0) + showBatteryInvoicePreview.amount).toLocaleString()}</span>
                        </div>

                        <div className="flex justify-between pt-1.5 pb-1 font-bold text-slate-800">
                          <span>Credit Account(s)</span>
                          <span>Amount</span>
                        </div>
                        {(showBatteryInvoicePreview.deposit ?? 0) > 0 && (
                          <div className="flex justify-between py-1 text-slate-600">
                            <span>⚪ Cr: {showBatteryInvoicePreview.type === 'battery_rental' ? 'Battery Security Deposit Liability' : 'EV Rental Security Deposit Liability'}</span>
                            <span>৳{showBatteryInvoicePreview.deposit?.toLocaleString()}</span>
                          </div>
                        )}
                        {showBatteryInvoicePreview.amount > 0 && (
                          <div className="flex justify-between py-1 text-slate-600">
                            <span>⚪ Cr: {showBatteryInvoicePreview.type === 'battery_rental' ? 'Battery Rental Revenue Account' : 'EV Rental Revenue Account'}</span>
                            <span>৳{showBatteryInvoicePreview.amount.toLocaleString()}</span>
                          </div>
                        )}
                      </div>
                    </div>

                  </div>

                  {/* Actions footer (no-print) */}
                  <div className="p-5 bg-slate-50 border-t border-slate-100 flex flex-col sm:flex-row gap-2 justify-end no-print">
                    <button
                      onClick={() => setShowBatteryInvoicePreview(null)}
                      className="py-2.5 px-4 border border-slate-200 text-slate-600 rounded-xl text-sm font-semibold hover:bg-slate-100 transition order-2 sm:order-1"
                    >
                      Close
                    </button>

                    <button
                      onClick={() => handleSimulatedPDFDownload(showBatteryInvoicePreview.id)}
                      disabled={isDownloadingPDF || downloadSuccess}
                      className="py-2.5 px-4 bg-indigo-600 text-white rounded-xl text-sm font-semibold hover:bg-indigo-700 flex items-center justify-center gap-2 transition disabled:opacity-75 order-1 sm:order-2"
                    >
                      {isDownloadingPDF ? (
                        <>
                          <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                          Generating PDF...
                        </>
                      ) : downloadSuccess ? (
                        <>
                          <CheckCircle className="w-4 h-4 text-white" />
                          Downloaded!
                        </>
                      ) : (
                        <>
                          <Download className="w-4 h-4" />
                          Download PDF
                        </>
                      )}
                    </button>

                    <button
                      onClick={() => window.print()}
                      className="py-2.5 px-5 bg-emerald-600 text-white rounded-xl text-sm font-semibold hover:bg-emerald-700 flex items-center justify-center gap-2 transition order-1 sm:order-3"
                    >
                      <Printer className="w-4 h-4" />
                      Print Invoice
                    </button>
                  </div>

                </div>
              </div>
            )}

            {/* Initial Condition Images */}
            {/* {(rental.status === 'pending' || rental.status === 'accepted') && rental.initialImages && ( */}
            {rental.initialImages && (
              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-slate-700 flex items-center gap-2">
                    <Image className="w-5 h-5 text-purple-500" /> Initial Condition Images
                  </h3>
                  {imageApprovePermission && !rental.imagesApproved && (
                    <button onClick={handleApproveImages} className="px-3 py-1.5 bg-emerald-600 text-white rounded-lg text-sm hover:bg-emerald-700 flex items-center gap-2">
                      <Check className="w-4 h-4" /> Approve Images
                    </button>
                  )}
                  {rental.imagesApproved && (
                    <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-green-100 text-green-700">
                      <CheckCircle className="w-3 h-3" /> Approved
                    </span>
                  )}
                </div>
                <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
                  {(['front', 'back', 'left', 'right', 'battery'] as const).map(type => {
                    const img = rental.initialImages?.find(i => i.type === type);
                    return (
                      <div key={type} className="aspect-video bg-slate-50 rounded-lg border border-slate-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-6 h-6 text-slate-300 mx-auto" />
                            <p className="text-xs text-slate-500 capitalize mt-1">{type}</p>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Notes */}
            <div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
              <h3 className="font-semibold text-slate-700 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>
              )}
              <div className="flex gap-2">
                <input
                  type="text"
                  value={newNote}
                  onChange={(e) => setNewNote(e.target.value)}
                  placeholder="Add a note..."
                  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-emerald-600 text-white rounded-lg text-sm disabled:opacity-50">
                  <Plus className="w-4 h-4" />
                </button>
              </div>
            </div>

            {/* Rental Payment History */}
            {rental.paymentHistory && rental.paymentHistory.length > 0 && (
              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="font-semibold text-slate-700 flex items-center gap-2">
                    <DollarSign className="w-5 h-5 text-emerald-500" /> Rental Payment History
                  </h3>
                  <span className="text-xs text-slate-500">{rental.paymentHistory.length} payments</span>
                </div>
                <div className="space-y-3">
                  {rental.paymentHistory.slice(paymentPage, paymentPage + 10).map(payment => (
                    <div key={payment.id} className="p-3 bg-slate-50 rounded-lg border border-slate-100">
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center gap-2">
                          <span className={`text-xs font-semibold px-2 py-1 rounded-full ${payment.type === 'deposit' ? 'bg-purple-100 text-purple-700' : payment.type === 'penalty' ? 'bg-red-100 text-red-700' : 'bg-emerald-100 text-emerald-700'}`}>
                            {payment.type.charAt(0).toUpperCase() + payment.type.slice(1)}
                          </span>
                          <span className={`text-xs font-medium px-2 py-1 rounded-full ${payment.status === 'paid' ? 'bg-green-100 text-green-700' : payment.status === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700'}`}>
                            {payment.status.charAt(0).toUpperCase() + payment.status.slice(1)}
                          </span>
                        </div>
                        <span className="text-lg font-bold text-slate-800">৳{payment.amount.toLocaleString()}</span>
                      </div>
                      <div className="flex items-center gap-4 text-xs text-slate-500">
                        <span>{payment.date}</span>
                        <span className="capitalize">{payment.method}</span>
                      </div>
                      {payment.note && <p className="text-xs text-slate-500 mt-1">{payment.note}</p>}
                    </div>
                  ))}
                </div>
                {rental.paymentHistory.length > 1 && (
                  <div className="flex items-center justify-between mt-4 pt-3 border-t border-slate-100">
                    <button
                      onClick={() => setPaymentPage(p => Math.max(0, p - 1))}
                      disabled={paymentPage === 0}
                      className="px-3 py-1.5 text-sm border border-slate-200 rounded-lg disabled:opacity-40 hover:bg-slate-50"
                    >
                      ← Prev
                    </button>
                    <span className="text-sm text-slate-500">
                      Showing {paymentPage + 1}-{Math.min(paymentPage + 10, rental.paymentHistory.length)} of {rental.paymentHistory.length}
                    </span>
                    <button
                      onClick={() => setPaymentPage(p => Math.min(Math.ceil((rental.paymentHistory?.length ?? 1) / 10) * 10 - 10, p + 10))}
                      disabled={paymentPage + 10 >= (rental.paymentHistory?.length ?? 1)}
                      className="px-3 py-1.5 text-sm border border-slate-200 rounded-lg disabled:opacity-40 hover:bg-slate-50"
                    >
                      Next →
                    </button>
                  </div>
                )}
              </div>
            )}
          </div>

          <div className="space-y-4">
            {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}</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 className="bg-white p-4 rounded-xl border border-slate-200">
              <h3 className="font-semibold text-slate-700 mb-4 flex items-center gap-2">
                <Lock className="w-5 h-5 text-red-500" /> Lock History
              </h3>
              {rental.lockHistory && rental.lockHistory.length > 0 ? (
                <div className="space-y-2">
                  {rental.lockHistory.map(event => (
                    <div key={event.id} className="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
                      <div className={`p-1.5 rounded-full ${event.action === 'locked' ? 'bg-red-100' : 'bg-green-100'}`}>
                        {event.action === 'locked' ? (
                          <Lock className="w-4 h-4 text-red-600" />
                        ) : (
                          <Unlock className="w-4 h-4 text-green-600" />
                        )}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${event.action === 'locked' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`}>
                            {event.action === 'locked' ? 'Locked' : 'Unlocked'}
                          </span>
                          <span className="text-xs text-slate-400">{event.performedAt}</span>
                        </div>
                        {event.reason && (
                          <p className="text-sm text-slate-600 mt-1">{event.reason}</p>
                        )}
                        <p className="text-xs text-slate-400 mt-1">By: {event.performedBy}</p>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-slate-400 text-center py-4">No lock history available.</p>
              )}
            </div>

            <div className="bg-white p-4 rounded-xl border border-slate-200">
              <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-red-500" /> Damage History
                </h3>
                <button onClick={() => setShowDamageModal(true)} className="px-3 py-1.5 bg-red-500 text-white rounded-lg text-sm hover:bg-red-600 flex items-center gap-2">
                  <Plus className="w-4 h-4" /> Report Damage
                </button>
              </div>
              <div className="space-y-2">
                {damages.map(damage => (
                  <div key={damage.id} className="p-3 bg-slate-50 rounded-lg flex items-center justify-between">
                    <div>
                      <p className="text-sm font-medium text-slate-700">{damage.description}</p>
                      <p className="text-xs text-slate-500">{damage.date}</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className={`text-xs px-2 py-1 rounded-full ${damage.severity === 'minor' ? 'bg-yellow-100 text-yellow-700' :
                        damage.severity === 'moderate' ? 'bg-orange-100 text-orange-700' :
                          'bg-red-100 text-red-700'
                        }`}>
                        {damage.severity}
                      </span>
                      <span className={`text-xs px-2 py-1 rounded-full ${damage.status === 'resolved' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'
                        }`}>
                        {damage.status}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
              <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100 bg-blue-50">
                <h3 className="font-semibold text-blue-900 flex items-center gap-2">
                  <FileText className="w-5 h-5 text-blue-500" /> Rental Documents & Invoices
                </h3>
                <button onClick={() => setShowUploadModal(true)} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700 flex items-center gap-1">
                  <Upload className="w-3 h-3" /> Upload
                </button>
              </div>

              {/* EV Rental Invoices */}
              <div className="px-4 pt-4 pb-2">
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1"><Bike className="w-3.5 h-3.5" /> EV Rental Invoices</p>
                <div className="space-y-1.5">
                  {invoices.filter(inv => inv.type === 'ev_rental').length === 0 && (
                    <p className="text-xs text-slate-400 italic py-1">No EV rental invoices.</p>
                  )}
                  {invoices.filter(inv => inv.type === 'ev_rental').map(inv => (
                    <div key={inv.id} className="flex items-center justify-between p-2.5 bg-blue-50 border border-blue-100 rounded-lg transition hover:shadow-sm">
                      <div className="flex items-center gap-2.5">
                        <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                          <FileText className="w-4 h-4 text-blue-600" />
                        </div>
                        <div>
                          <p className="text-sm font-semibold text-slate-800 font-mono">{inv.id}</p>
                          <p className="text-xs text-slate-500">{inv.description}</p>
                          <div className="flex items-center gap-2 mt-0.5">
                            <span className="text-xs text-slate-400">{inv.generatedAt}</span>
                            <button
                              onClick={() => setShowBatteryInvoicePreview(inv)}
                              className="text-xs text-emerald-600 hover:text-emerald-700 hover:underline font-semibold flex items-center gap-0.5"
                            >
                              view invoice
                            </button>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="text-sm font-bold text-blue-700">৳{(inv.amount + (inv.deposit ?? 0)).toLocaleString()}</span>
                        <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${inv.status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>{inv.status}</span>
                        <button onClick={() => setShowBatteryInvoicePreview(inv)} className="p-1.5 text-blue-600 hover:bg-blue-100 rounded-lg" title="View Invoice">
                          <FileText className="w-3.5 h-3.5" />
                        </button>
                        <button onClick={() => handlePrintInvoiceDirect(inv)} className="p-1.5 text-slate-600 hover:bg-slate-100 rounded-lg" title="Print Invoice">
                          <Printer className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Battery Rental Invoices */}
              <div className="px-4 pt-3 pb-4">
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1"><Battery className="w-3.5 h-3.5" /> Battery Rental Invoices</p>
                <div className="space-y-1.5">
                  {invoices.filter(inv => inv.type === 'battery_rental').length === 0 && (
                    <p className="text-xs text-slate-400 italic py-1">No battery rental invoices.</p>
                  )}
                  {invoices.filter(inv => inv.type === 'battery_rental').map(inv => (
                    <div key={inv.id} className="flex items-center justify-between p-2.5 bg-amber-50 border border-amber-100 rounded-lg transition hover:shadow-sm">
                      <div className="flex items-center gap-2.5">
                        <div className="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center">
                          <Battery className="w-4 h-4 text-amber-600" />
                        </div>
                        <div>
                          <p className="text-sm font-semibold text-slate-800 font-mono">{inv.id}</p>
                          <p className="text-xs text-slate-500">{inv.description}</p>
                          <div className="flex items-center gap-2 mt-0.5">
                            <span className="text-xs text-slate-400">{inv.generatedAt}</span>
                            <button
                              onClick={() => setShowBatteryInvoicePreview(inv)}
                              className="text-xs text-emerald-600 hover:text-emerald-700 hover:underline font-semibold flex items-center gap-0.5"
                            >
                              view invoice
                            </button>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="text-right">
                          <p className="text-sm font-bold text-amber-700">৳{((inv.deposit ?? 0) + inv.amount).toLocaleString()}</p>
                          <p className="text-xs text-slate-400">Dep: ৳{(inv.deposit ?? 0).toLocaleString()} + Rent: ৳{inv.amount.toLocaleString()}</p>
                        </div>
                        <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${inv.status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>{inv.status}</span>
                        <button onClick={() => setShowBatteryInvoicePreview(inv)} className="p-1.5 text-amber-600 hover:bg-amber-100 rounded-lg" title="View Invoice">
                          <FileText className="w-3.5 h-3.5" />
                        </button>
                        <button onClick={() => handlePrintInvoiceDirect(inv)} className="p-1.5 text-slate-600 hover:bg-slate-100 rounded-lg" title="Print Invoice">
                          <Printer className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* General Docs */}
              <div className="px-4 pb-4 border-t border-slate-100 pt-3">
                <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1"><FileText className="w-3.5 h-3.5" /> Other Documents</p>
                <div className="space-y-1.5">
                  {documents.map(doc => (
                    <div key={doc.id} className="flex items-center justify-between p-2.5 bg-slate-50 border border-slate-100 rounded-lg">
                      <div className="flex items-center gap-2.5">
                        <FileText className="w-4 h-4 text-slate-400" />
                        <div>
                          <p className="text-sm font-medium text-slate-700">{doc.name}</p>
                          <p className="text-xs text-slate-400">{doc.uploadedAt}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-1">
                        <button onClick={() => alert(`Downloading: ${doc.name}`)} className="px-2.5 py-1.5 text-blue-600 hover:bg-blue-50 rounded-lg text-xs flex items-center gap-1">
                          <Download className="w-3.5 h-3.5" /> Download
                        </button>
                        <button onClick={() => alert(`Viewing: ${doc.name}`)} className="px-2.5 py-1.5 text-slate-600 hover:bg-slate-100 rounded-lg text-xs flex items-center gap-1">
                          <FileText className="w-3.5 h-3.5" /> View
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {rental.status === 'pending' && (
              <div className="bg-white p-4 rounded-xl border border-slate-200">
                <h3 className="font-semibold text-slate-700 mb-4">Biker Response</h3>
                <div className="flex gap-2">
                  {acceptPermission && (
                    <button onClick={handleAcceptRental} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
                      <CheckCircle className="w-4 h-4" /> Accept
                    </button>
                  )}
                  {rejectPermission && (
                    <button onClick={() => setShowRejectModal(true)} className="px-4 py-2 bg-red-500 text-white rounded-lg text-sm hover:bg-red-600 flex items-center gap-2">
                      <XCircle className="w-4 h-4" /> Reject
                    </button>
                  )}
                </div>
              </div>
            )}

            {rental.status === 'accepted' && (
              <div className="bg-green-50 p-4 rounded-xl border border-green-100">
                <div className="flex items-center gap-2 text-green-700">
                  <CheckCircle className="w-5 h-5" />
                  <span className="font-medium">Accepted on {rental.acceptedAt}</span>
                </div>
              </div>
            )}

            {rental.status === 'cancelled' && rental.rejectNote && (
              <div className="bg-red-50 p-4 rounded-xl border border-red-100">
                <div className="flex items-center gap-2 text-red-700 mb-2">
                  <XCircle className="w-5 h-5" />
                  <span className="font-medium">Rejected</span>
                </div>
                <p className="text-sm text-red-600">Reason: {rental.rejectNote}</p>
              </div>
            )}

            <div className="bg-white p-4 rounded-xl border border-slate-200">
              <h3 className="font-semibold text-slate-700 mb-4 flex items-center gap-2">
                <Clock className="w-5 h-5 text-slate-500" /> Activity Timeline
              </h3>
              <div className="space-y-3">
                {timelineSteps.map((step, idx) => (
                  <div key={step.key} className="flex items-center gap-3">
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${step.completed ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-100 text-slate-400'}`}>
                      {step.completed ? <Check className="w-4 h-4" /> : <span className="text-xs font-medium">{idx + 1}</span>}
                    </div>
                    <div className="flex-1">
                      <p className={`text-sm font-medium ${step.completed ? 'text-slate-800' : 'text-slate-400'}`}>{step.label}</p>
                      {step.date && <p className="text-xs text-slate-500">{step.date}</p>}
                    </div>
                  </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>
      )}

      {showUnlockModal && (
        <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">
                <Unlock className="w-5 h-5" /> Unlock Rental
              </h3>
              <button onClick={() => setShowUnlockModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <p className="text-sm text-slate-600">Are you sure you want to unlock this rental? The bike will become active again.</p>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowUnlockModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleUnlockRental} className="px-4 py-2 bg-green-600 text-white rounded-lg">Unlock Rental</button>
            </div>
          </div>
        </div>
      )}

      {showCancelModal && (
        <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">
                <XCircle className="w-5 h-5" /> Cancel Rental
              </h3>
              <button onClick={() => setShowCancelModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <p className="text-sm text-slate-600">Are you sure you want to cancel this rental? This action cannot be undone.</p>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowCancelModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleCancelRental} className="px-4 py-2 bg-red-600 text-white rounded-lg">Confirm Cancel</button>
            </div>
          </div>
        </div>
      )}

      {showRejectModal && (
        <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">
                <XCircle className="w-5 h-5" /> Reject Rental
              </h3>
              <button onClick={() => setShowRejectModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
            </div>
            <div className="p-4">
              <label className="text-sm text-slate-600">Rejection Reason</label>
              <textarea
                value={rejectNote}
                onChange={(e) => setRejectNote(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 for rejection..."
              />
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowRejectModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleRejectRental} disabled={!rejectNote.trim()} className="px-4 py-2 bg-red-600 text-white rounded-lg disabled:opacity-50">Reject Rental</button>
            </div>
          </div>
        </div>
      )}

      {showDamageModal && (
        <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">
                <AlertTriangle className="w-5 h-5 text-red-500" /> Report Damage
              </h3>
              <button onClick={() => setShowDamageModal(false)} className="text-slate-400 hover:text-slate-600 text-2xl">&times;</button>
            </div>
            <div className="p-4 space-y-4">
              <div>
                <label className="text-sm text-slate-600 block mb-1">Description</label>
                <textarea
                  value={damageDesc}
                  onChange={(e) => setDamageDesc(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  rows={3}
                  placeholder="Describe the damage..."
                />
              </div>
              <div>
                <label className="text-sm text-slate-600 block mb-1">Severity</label>
                <div className="flex gap-2">
                  {(['minor', 'moderate', 'severe'] as const).map(sev => (
                    <button
                      key={sev}
                      onClick={() => setDamageSeverity(sev)}
                      className={`flex-1 py-2 rounded-lg text-sm border ${damageSeverity === sev
                        ? sev === 'minor' ? 'bg-yellow-100 border-yellow-300 text-yellow-700'
                          : sev === 'moderate' ? 'bg-orange-100 border-orange-300 text-orange-700'
                            : 'bg-red-100 border-red-300 text-red-700'
                        : 'border-slate-200 text-slate-600'
                        }`}
                    >
                      {sev.charAt(0).toUpperCase() + sev.slice(1)}
                    </button>
                  ))}
                </div>
              </div>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowDamageModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleReportDamage} disabled={!damageDesc.trim()} className="px-4 py-2 bg-red-600 text-white rounded-lg disabled:opacity-50">Report Damage</button>
            </div>
          </div>
        </div>
      )}

      {showSmsModal && (
        <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">
                <MessageCircle className="w-5 h-5 text-blue-500" /> Send SMS
              </h3>
              <button onClick={() => setShowSmsModal(false)} className="text-slate-400 hover:text-slate-600 text-2xl">&times;</button>
            </div>
            <div className="p-4 space-y-3">
              <div className="bg-slate-50 p-3 rounded-lg text-sm">
                <p className="text-slate-500">To:</p>
                <p className="font-medium text-slate-800">{rental.userName} ({rental.userPhone})</p>
              </div>
              <div>
                <label className="text-sm text-slate-600 block mb-1">Message</label>
                <textarea
                  value={smsText}
                  onChange={(e) => setSmsText(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  rows={4}
                  placeholder="Type your message..."
                />
              </div>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowSmsModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleSendSms} disabled={!smsText.trim()} className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50">Send SMS</button>
            </div>
          </div>
        </div>
      )}

      {showUploadModal && (
        <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">
                <Upload className="w-5 h-5 text-blue-500" /> Upload Document
              </h3>
              <button onClick={() => setShowUploadModal(false)} className="text-slate-400 hover:text-slate-600 text-2xl">&times;</button>
            </div>
            <div className="p-4 space-y-4">
              <div>
                <label className="text-sm text-slate-600 block mb-1">Document Name</label>
                <input
                  type="text"
                  value={uploadDocName}
                  onChange={(e) => setUploadDocName(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
                  placeholder="Enter document name..."
                />
              </div>
              <div>
                <label className="text-sm text-slate-600 block mb-1">Choose File</label>
                <div className="border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-blue-400 cursor-pointer">
                  <Upload className="w-8 h-8 text-slate-300 mx-auto mb-2" />
                  <p className="text-sm text-slate-500">Click to upload or drag and drop</p>
                  <p className="text-xs text-slate-400 mt-1">PDF, PNG, JPG (max 10MB)</p>
                  <input type="file" className="hidden" accept=".pdf,.png,.jpg,.jpeg" />
                </div>
              </div>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button onClick={() => setShowUploadModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
              <button onClick={handleUploadDocument} disabled={!uploadDocName.trim()} className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50">Upload</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}