'use client';

import { useState, useEffect } from 'react';
import { FileText, Search, Filter, Bike, User, Calendar, DollarSign, Clock, MoreVertical, Eye, Plus, Phone, MessageCircle, X, CreditCard, Wallet, Building, Download, Printer } from 'lucide-react';
import Link from 'next/link';

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

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

const mockBikes = [
  { id: 'BIKE-001', model: 'AIMA Lightning', plate: 'Dhaka Metro Cha-9012', status: 'available' },
  { id: 'BIKE-002', model: 'Yadea DT3', plate: 'Dhaka Metro Ba-5521', status: 'available' },
  { id: 'BIKE-003', model: 'AIMA EM5', plate: 'Dhaka Metro Ko-1234', status: 'available' },
  { id: 'BIKE-004', model: 'AIMA Lightning', plate: 'Dhaka Metro Cha-9013', status: 'rented' },
  { id: 'BIKE-005', model: 'Yadea G5', plate: 'Dhaka Metro Ha-5678', status: 'available' },
];

const mockUsers = [
  { id: 'USR-001', name: 'Rahim Ahmed', phone: '+8801712345678', membership: 'vip' },
  { id: 'USR-002', name: 'Karim Hasan', phone: '+8801812345678', membership: 'standard' },
  { id: 'USR-003', name: 'Jamal Uddin', phone: '+8801912345678', membership: 'premium' },
  { id: 'USR-004', name: 'Rafiq Islam', phone: '+8801512345678', membership: 'standard' },
];

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

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

export default function RentalsPage() {
  const [rentals, setRentals] = useState<Rental[]>(mockRentals);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [statusFilter, setStatusFilter] = useState<string>('all');
  
  const [newRental, setNewRental] = useState({
    bikeId: '',
    userId: '',
    type: 'single' as RentalType,
    startDate: new Date().toISOString().split('T')[0],
    contractMonths: 0,
    deposit: 0,
    dailyRate: 150,
    hubId: '',
    paymentMethod: 'cash' as 'cash' | 'bank' | 'biker_wallet',
  });

  const [showJournalPreview, setShowJournalPreview] = useState(false);

  const filteredRentals = rentals.filter(r => {
    if (statusFilter !== 'all' && r.status !== statusFilter) return false;
    return true;
  });

  const stats = {
    active: rentals.filter(r => r.status === 'active').length,
    pending: rentals.filter(r => r.status === 'pending').length,
    completed: rentals.filter(r => r.status === 'completed').length,
    disputed: rentals.filter(r => r.status === 'disputed').length,
  };

  const handleCreateRental = () => {
    if (!newRental.bikeId || !newRental.userId || !newRental.hubId) return;
    setShowJournalPreview(true);
  };

  const confirmCreateRental = () => {
    const bike = mockBikes.find(b => b.id === newRental.bikeId);
    const user = mockUsers.find(u => u.id === newRental.userId);
    const hub = mockHubs.find(h => h.id === newRental.hubId);
    
    const rental: Rental = {
      id: `RNT-${String(rentals.length + 1).padStart(3, '0')}`,
      bikeId: newRental.bikeId,
      userId: newRental.userId,
      type: newRental.type,
      status: 'pending',
      startDate: newRental.startDate,
      endDate: newRental.contractMonths > 0 
        ? new Date(new Date(newRental.startDate).setMonth(new Date(newRental.startDate).getMonth() + newRental.contractMonths)).toISOString().split('T')[0]
        : undefined,
      contractMonths: newRental.contractMonths || undefined,
      deposit: newRental.deposit,
      dailyRate: newRental.dailyRate,
      totalPaid: newRental.deposit,
      dueRental: 0,
      hubId: newRental.hubId,
      hubName: hub?.name,
    };
    
    setRentals([...rentals, rental]);
    setShowJournalPreview(false);
    setShowCreateModal(false);
    setNewRental({
      bikeId: '',
      userId: '',
      type: 'single',
      startDate: new Date().toISOString().split('T')[0],
      contractMonths: 0,
      deposit: 0,
      dailyRate: 150,
      hubId: '',
      paymentMethod: 'cash',
    });
  };

const generateInvoice = () => {
    if (newRental.deposit <= 0) return;
    
    const rentalId = `RNT-${String(rentals.length + 1).padStart(3, '0')}`;
    const bike = mockBikes.find(b => b.id === newRental.bikeId);
    const user = mockUsers.find(u => u.id === newRental.userId);
    const hub = mockHubs.find(h => h.id === newRental.hubId);
    const date = new Date().toISOString().split('T')[0];
    const time = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
    const contractMonths = newRental.contractMonths;
    const endDate = contractMonths > 0 
      ? new Date(new Date(newRental.startDate).setMonth(new Date(newRental.startDate).getMonth() + contractMonths)).toISOString().split('T')[0]
      : '';
    
    import('jspdf').then((jsPDF) => {
      const doc = new jsPDF.default();
      
      doc.setFillColor(6, 95, 70);
      doc.rect(0, 0, 220, 40, 'F');
      doc.setTextColor(255, 255, 255);
      doc.setFontSize(24);
      doc.text('JAIBEN Mobility Ltd', 20, 20);
      doc.setFontSize(12);
      doc.text('Payment Receipt', 20, 30);
      
      doc.setTextColor(6, 95, 70);
      doc.setFontSize(18);
      doc.text('OFFICIAL RECEIPT', 120, 25);
      
      doc.setTextColor(0, 0, 0);
      doc.setFontSize(10);
      doc.text(`Receipt No: ${rentalId}-DEP`, 20, 55);
      doc.text(`Date: ${date} ${time}`, 20, 62);
      
      doc.line(20, 70, 190, 70);
      
      doc.setFontSize(11);
      doc.text('Payment Details', 20, 82);
      doc.setFontSize(10);
      doc.text(`Rental ID: ${rentalId}`, 20, 90);
      doc.text(`Bike: ${bike?.model} (${bike?.plate})`, 20, 97);
      doc.text(`Customer: ${user?.name}`, 20, 104);
      doc.text(`Phone: ${user?.phone}`, 20, 111);
      doc.text(`Hub: ${hub?.name}`, 20, 118);
      doc.text(`Rental Type: ${newRental.type}`, 20, 125);
      doc.text(`Start Date: ${newRental.startDate}`, 20, 132);
      if (contractMonths > 0) {
        doc.text(`Contract: ${contractMonths} Months`, 20, 139);
        doc.text(`End Date: ${endDate}`, 20, 146);
        doc.text(`Daily Rate: ৳${newRental.dailyRate}/day`, 20, 156);
      } else {
        doc.text(`Daily Rate: ৳${newRental.dailyRate}/day`, 20, 139);
      }
      
      doc.line(20, 165, 190, 165);
      
      doc.setFontSize(12);
      doc.text('Amount Details', 20, 175);
      doc.setFillColor(240, 240, 240);
      doc.rect(20, 180, 170, 20, 'F');
      doc.setFontSize(10);
      doc.text('Deposit', 30, 192);
      doc.setFontSize(14);
      doc.setTextColor(6, 95, 70);
      doc.text(`৳${newRental.deposit}`, 150, 192);
      
      doc.setTextColor(0, 0, 0);
      doc.setFontSize(10);
      doc.text(`Payment: ${newRental.paymentMethod === 'cash' ? 'Cash' : newRental.paymentMethod === 'bank' ? 'Bank' : 'Wallet'}`, 20, 210);
      
      const qrData = `JAIBEN|${rentalId}|${date}|${user?.name}|${bike?.model}|${newRental.deposit}|${newRental.startDate}|${contractMonths}`;
      const publicUrl = `https://jaiben.app/rental/${rentalId}`;
      
      doc.setFontSize(8);
      doc.setTextColor(100);
      doc.text('Generated from JAIBEN Rental System', 20, 250);
      doc.text(`QR: ${qrData.substring(0, 35)}...`, 20, 258);
      doc.setTextColor(6, 95, 70);
      doc.text(`URL: ${publicUrl}`, 20, 266);
      
      doc.save(`deposit-receipt-${rentalId}.pdf`);
    });
  };

  const getStatusBadge = (status: RentalStatus) => {
    const styles = {
      active: 'bg-green-100 text-green-700',
      pending: 'bg-amber-100 text-amber-700',
      completed: 'bg-blue-100 text-blue-700',
      disputed: 'bg-red-100 text-red-700',
      cancelled: 'bg-slate-100 text-slate-700',
      locked: 'bg-red-100 text-red-700',
    };
    return styles[status];
  };

  return (
    <div className="p-4 lg:p-6">
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Rentals</h1>
          <p className="text-sm text-slate-500 mt-1">View and manage all rental transactions</p>
        </div>
        <div className="flex items-center gap-2">
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="py-2 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50"
          >
            <option value="all">All Status</option>
            <option value="active">Active</option>
            <option value="pending">Pending</option>
            <option value="completed">Completed</option>
            <option value="disputed">Disputed</option>
            <option value="locked">Locked</option>
            <option value="cancelled">Cancelled</option>
          </select>
          <button 
            onClick={() => setShowCreateModal(true)}
            className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-semibold hover:bg-accent-dark flex items-center gap-2"
          >
            <Plus className="w-4 h-4" /> New Rental
          </button>
          <button className="py-2 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50">
            Export
          </button>
        </div>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-green-600">{stats.active}</p>
          <p className="text-sm text-slate-500">Active Rentals</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-amber-600">{stats.pending}</p>
          <p className="text-sm text-slate-500">Pending</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-blue-600">{stats.completed}</p>
          <p className="text-sm text-slate-500">Completed</p>
        </div>
        <div className="bg-white rounded-xl p-4 shadow-sm border border-slate-100">
          <p className="text-2xl font-extrabold text-red-600">{stats.disputed}</p>
          <p className="text-sm text-slate-500">Disputed</p>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-slate-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rental ID</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Bike</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">User</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Start Date</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Hub</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Deposit</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Daily</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Paid</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-50">
              {filteredRentals.map(rental => {
                const bike = mockBikes.find(b => b.id === rental.bikeId);
                const user = mockUsers.find(u => u.id === rental.userId);
                return (
                  <tr key={rental.id} className="hover:bg-slate-50 transition-colors">
                    <td className="px-4 py-3">
                      <span className="text-sm font-medium text-slate-700">{rental.id}</span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <Bike className="w-4 h-4 text-slate-400" />
                        <div>
                          <span className="text-sm text-slate-600">{bike?.model || rental.bikeId}</span>
                          <p className="text-xs text-slate-400">{bike?.plate}</p>
                        </div>
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <User className="w-4 h-4 text-slate-400" />
                        <div>
                          <span className="text-sm text-slate-600">{user?.name || rental.userId}</span>
                          <p className="text-xs text-slate-400">{user?.phone}</p>
                        </div>
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm text-slate-600 capitalize">{rental.type}</span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-1 text-sm text-slate-600">
                        <Calendar className="w-3 h-3" /> {rental.startDate}
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm text-slate-600">{rental.hubName || '-'}</span>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm font-medium text-slate-700">৳{rental.deposit}</span>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm text-slate-600">৳{rental.dailyRate}/d</span>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm font-semibold text-green-600">৳{rental.totalPaid.toLocaleString()}</span>
                    </td>
                    <td className="px-4 py-3">
                      <span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${getStatusBadge(rental.status)}`}>
                        {rental.status}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-1">
                        <Link href={`/admin/rentals/${rental.id}`} className="p-1.5 hover:bg-slate-100 rounded-lg" title="View">
                          <Eye className="w-4 h-4 text-slate-500" />
                        </Link>
                        {user && (
                          <>
                            <a href={`tel:${user.phone}`} className="p-1.5 hover:bg-green-100 rounded-lg" title="Call">
                              <Phone className="w-4 h-4 text-green-500" />
                            </a>
                            <a href={`sms:${user.phone}`} className="p-1.5 hover:bg-blue-100 rounded-lg" title="Message">
                              <MessageCircle className="w-4 h-4 text-blue-500" />
                            </a>
                          </>
                        )}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {showCreateModal && (
        <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">Create New Rental</h3>
              <button onClick={() => setShowCreateModal(false)} className="text-slate-400 hover:text-slate-600">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-4 space-y-4">
              <div>
                <label className="text-sm text-slate-600">Select User</label>
                <select
                  value={newRental.userId}
                  onChange={(e) => setNewRental({ ...newRental, userId: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                >
                  <option value="">Select User...</option>
                  {mockUsers.map(user => (
                    <option key={user.id} value={user.id}>{user.name} ({user.phone})</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="text-sm text-slate-600">Select Bike</label>
                <select
                  value={newRental.bikeId}
                  onChange={(e) => setNewRental({ ...newRental, bikeId: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                >
                  <option value="">Select Bike...</option>
                  {mockBikes.filter(b => b.status === 'available').map(bike => (
                    <option key={bike.id} value={bike.id}>{bike.model} - {bike.plate}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="text-sm text-slate-600">Rental Type</label>
                <select
                  value={newRental.type}
                  onChange={(e) => setNewRental({ ...newRental, type: e.target.value as RentalType })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                >
                  <option value="single">Single</option>
                  <option value="shared">Shared</option>
                  <option value="rent-to-own">Rent to Own</option>
                </select>
              </div>
              <div>
                <label className="text-sm text-slate-600">Start Date</label>
                <input
                  type="date"
                  value={newRental.startDate}
                  onChange={(e) => setNewRental({ ...newRental, startDate: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                />
              </div>
              <div>
                <label className="text-sm text-slate-600">Contract Months</label>
                <select
                  value={newRental.contractMonths}
                  onChange={(e) => setNewRental({ ...newRental, contractMonths: Number(e.target.value) })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                >
                  <option value={0}>Daily Basis</option>
                  <option value={3}>3 Months</option>
                  <option value={6}>6 Months</option>
                  <option value={12}>12 Months</option>
                  <option value={18}>18 Months</option>
                  <option value={24}>24 Months</option>
                </select>
                {newRental.contractMonths > 0 && (
                  <p className="text-xs text-green-600 mt-1">
                    End Date: {new Date(new Date(newRental.startDate).setMonth(new Date(newRental.startDate).getMonth() + newRental.contractMonths)).toISOString().split('T')[0]}
                  </p>
                )}
              </div>
              <div>
                <label className="text-sm text-slate-600">Daily Rate (৳)</label>
                <input
                  type="text"
                  value={newRental.dailyRate || ''}
                  onChange={(e) => {
                    const val = e.target.value.replace(/[^0-9]/g, '');
                    setNewRental({ ...newRental, dailyRate: val ? Number(val) : 0 });
                  }}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  placeholder="150"
                />
              </div>
              <div>
                <label className="text-sm text-slate-600">Deposit (৳)</label>
                <input
                  type="text"
                  value={newRental.deposit || ''}
                  onChange={(e) => {
                    const val = e.target.value.replace(/[^0-9]/g, '');
                    setNewRental({ ...newRental, deposit: val ? Number(val) : 0 });
                  }}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                  placeholder="0"
                />
              </div>
              <div>
                <label className="text-sm text-slate-600">Hub</label>
                <select
                  value={newRental.hubId}
                  onChange={(e) => setNewRental({ ...newRental, hubId: e.target.value })}
                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                >
                  <option value="">Select Hub...</option>
                  {mockHubs.map(hub => (
                    <option key={hub.id} value={hub.id}>{hub.name}</option>
                  ))}
                </select>
              </div>
              {newRental.deposit > 0 && (
                <div>
                  <label className="text-sm text-slate-600">Deposit Payment Method</label>
                  <div className="flex gap-2 mt-1">
                    <button
                      type="button"
                      onClick={() => setNewRental({ ...newRental, paymentMethod: 'cash' })}
                      className={`flex-1 py-2 px-3 rounded-lg text-sm flex items-center justify-center gap-2 border ${
                        newRental.paymentMethod === 'cash' 
                          ? 'bg-green-100 border-green-300 text-green-700' 
                          : 'border-slate-200 text-slate-600 hover:bg-slate-50'
                      }`}
                    >
                      <Wallet className="w-4 h-4" /> Cash
                    </button>
                    <button
                      type="button"
                      onClick={() => setNewRental({ ...newRental, paymentMethod: 'bank' })}
                      className={`flex-1 py-2 px-3 rounded-lg text-sm flex items-center justify-center gap-2 border ${
                        newRental.paymentMethod === 'bank' 
                          ? 'bg-blue-100 border-blue-300 text-blue-700' 
                          : 'border-slate-200 text-slate-600 hover:bg-slate-50'
                      }`}
                    >
                      <Building className="w-4 h-4" /> Bank
                    </button>
                    <button
                      type="button"
                      onClick={() => setNewRental({ ...newRental, paymentMethod: 'biker_wallet' })}
                      className={`flex-1 py-2 px-3 rounded-lg text-sm flex items-center justify-center gap-2 border ${
                        newRental.paymentMethod === 'biker_wallet' 
                          ? 'bg-purple-100 border-purple-300 text-purple-700' 
                          : 'border-slate-200 text-slate-600 hover:bg-slate-50'
                      }`}
                    >
                      <CreditCard className="w-4 h-4" /> Wallet
                    </button>
                  </div>
                </div>
              )}
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
              <button 
                onClick={() => setShowCreateModal(false)} 
                className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm"
              >
                Cancel
              </button>
              <button 
                onClick={handleCreateRental}
                disabled={!newRental.bikeId || !newRental.userId || !newRental.hubId}
                className="px-4 py-2 bg-accent text-white rounded-lg text-sm disabled:opacity-50"
              >
                Review & Create
              </button>
            </div>
          </div>
        </div>
      )}

      {showJournalPreview && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
            <div className="p-4 border-b border-slate-100">
              <h3 className="font-semibold text-slate-800">Journal Entry Preview</h3>
              <p className="text-sm text-slate-500">Auto-generated journal for rental deposit</p>
            </div>
            <div className="p-4 space-y-4">
              <div className="bg-slate-50 p-3 rounded-lg">
                <p className="text-sm font-medium text-slate-700 mb-2">Rental: {newRental.type.toUpperCase()}</p>
                <p className="text-xs text-slate-500">Date: {new Date().toISOString().split('T')[0]}</p>
              </div>

              <div>
                <p className="text-sm font-medium text-slate-700 mb-2">Journal Entries</p>
                <table className="w-full text-sm">
                  <thead className="bg-slate-100">
                    <tr>
                      <th className="px-2 py-1 text-left">Account</th>
                      <th className="px-2 py-1 text-right">Debit (৳)</th>
                      <th className="px-2 py-1 text-right">Credit (৳)</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y">
                    {newRental.deposit > 0 && (
                      <>
                        <tr>
                          <td className="px-2 py-2">
                            {newRental.paymentMethod === 'cash' && '1000 - Cash'}
                            {newRental.paymentMethod === 'bank' && '1100 - Bank'}
                            {newRental.paymentMethod === 'biker_wallet' && '1200 - Biker Wallet'}
                          </td>
                          <td className="px-2 py-2 text-right font-medium">{newRental.deposit}</td>
                          <td className="px-2 py-2 text-right">-</td>
                        </tr>
                        <tr>
                          <td className="px-2 py-2">2100 - Deposit Received</td>
                          <td className="px-2 py-2 text-right">-</td>
                          <td className="px-2 py-2 text-right font-medium">{newRental.deposit}</td>
                        </tr>
                      </>
                    )}
                    {newRental.deposit === 0 && (
                      <tr>
                        <td className="px-2 py-2 text-center text-slate-500" colSpan={3}>
                          No deposit amount - Journal not required
                        </td>
                      </tr>
                    )}
                  </tbody>
                  {newRental.deposit > 0 && (
                    <tfoot className="bg-slate-100">
                      <tr>
                        <td className="px-2 py-1 font-medium">Total</td>
                        <td className="px-2 py-1 text-right font-medium">{newRental.deposit}</td>
                        <td className="px-2 py-1 text-right font-medium">{newRental.deposit}</td>
                      </tr>
                    </tfoot>
                  )}
                </table>
              </div>

              <div className="bg-blue-50 p-3 rounded-lg">
                <p className="text-sm text-blue-700">
                  <strong>Bike:</strong> {mockBikes.find(b => b.id === newRental.bikeId)?.model} {mockBikes.find(b => b.id === newRental.bikeId)?.plate}
                </p>
                <p className="text-sm text-blue-700">
                  <strong>User:</strong> {mockUsers.find(u => u.id === newRental.userId)?.name} ({mockUsers.find(u => u.id === newRental.userId)?.phone})
                </p>
                <p className="text-sm text-blue-700">
                  <strong>Hub:</strong> {mockHubs.find(h => h.id === newRental.hubId)?.name}
                </p>
                <p className="text-sm text-blue-700">
                  <strong>Type:</strong> {newRental.type} | <strong>Contract:</strong> {newRental.contractMonths ? `${newRental.contractMonths} Months` : 'Daily Basis'}
                </p>
                <p className="text-sm text-blue-700">
                  <strong>Daily Rate:</strong> ৳{newRental.dailyRate}
                </p>
              </div>
            </div>
            <div className="p-4 border-t border-slate-100 flex justify-between">
              <button 
                onClick={generateInvoice}
                disabled={newRental.deposit <= 0}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50 flex items-center gap-2"
              >
                <Printer className="w-4 h-4" /> Print Invoice
              </button>
              <div className="flex gap-2">
                <button 
                  onClick={() => setShowJournalPreview(false)} 
                  className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm"
                >
                  Back
                </button>
                <button 
                  onClick={confirmCreateRental}
                  className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700"
                >
                  Confirm & Create
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}