'use client';

import { useState, use } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import {
  ArrowLeft, Battery, Bike, Calendar, Clock, Download, MapPin, Search,
  TrendingUp, User, XCircle, CheckCircle2, ChevronLeft, ChevronRight,
  Shield, RefreshCw, DollarSign, Activity, AlertCircle, CalendarRange
} from 'lucide-react';
import { investors } from '@/data/mockData';
import toast from 'react-hot-toast';
import InvestorNotification from '@/components/InvestorNotification';

interface RentalTransaction {
  id: string;
  date: string;
  riderName: string;
  duration: string;
  amount: number;
  status: 'paid' | 'pending' | 'failed';
  payoutMethod: string;
  swapCount?: number;
}

export default function AssetRentalHistoryPage({ params }: { params: Promise<{ id: string; assetId: string }> }) {
  const resolvedParams = use(params);
  const { id: investmentId, assetId } = resolvedParams;
  const router = useRouter();

  const investor = investors[0];
  const investment = investor.investments?.find((inv: any) => inv.id === investmentId);

  // Asset verification
  const isBattery = assetId.startsWith('BAT-') || assetId.startsWith('bat-') || assetId.toLowerCase().includes('battery');

  // Specific Asset Details
  const bikeDetails = {
    id: 'b1',
    model: 'Etron ET50',
    brand: 'Etron',
    plateNumber: 'Dhaka Metro Cha-1234',
    image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=600&fit=crop',
    status: 'rented',
    currentRent: 350,
    totalEarnings: 114250,
    batteryLevel: 78,
    range: '60 km',
    location: 'Gulshan 1 Hub',
    purchasePrice: 85000,
    utilization: '94%',
    avgDailyHours: '8.4 hrs',
  };

  const batteryDetails: Record<string, any> = {
    'BAT-001': {
      id: 'BAT-001',
      serialNumber: 'SN-2024-00001',
      brand: 'EVE Energy',
      model: 'Li-Ion 60V50Ah',
      status: 'In-Use',
      cycleCount: 156,
      soc: '78% / 95%',
      earnings: 4500,
      location: 'Dhaka Central Hub',
      purchasePrice: 45000,
      utilization: '97%',
      dailyRent: 150,
    },
    'BAT-002': {
      id: 'BAT-002',
      serialNumber: 'SN-2024-00002',
      brand: 'EVE Energy',
      model: 'Li-Ion 60V50Ah',
      status: 'In-Use',
      cycleCount: 142,
      soc: '82% / 96%',
      earnings: 4500,
      location: 'Dhaka Central Hub',
      purchasePrice: 45000,
      utilization: '95%',
      dailyRent: 150,
    }
  };

  const currentBattery = batteryDetails[assetId] || batteryDetails['BAT-001'];
  const assetDisplayName = isBattery ? currentBattery.model : bikeDetails.model;
  const assetSubName = isBattery ? currentBattery.serialNumber : bikeDetails.plateNumber;

  // Generate highly realistic rent transaction history
  const [transactions] = useState<RentalTransaction[]>(() => {
    const list: RentalTransaction[] = [];
    const riders = ['Sajib Islam', 'Nayeem Chowdhury', 'Rakib Hasan', 'Kamal Hossain', 'Arifur Rahman'];
    const methods = ['bKash', 'Nagad', 'Rocket', 'Bank Transfer'];
    
    const days = isBattery ? 30 : 20;
    const baseDate = new Date();
    
    for (let i = 0; i < days; i++) {
      const date = new Date();
      date.setDate(baseDate.getDate() - i);
      const dateString = date.toISOString().split('T')[0];
      
      const riderIndex = (i + 3) % riders.length;
      const methodIndex = (i + 1) % methods.length;
      
      // status distribution
      let status: 'paid' | 'pending' | 'failed' = 'paid';
      if (i === 1) status = 'pending';
      else if (i === 5) status = 'failed';
      
      const amount = isBattery ? currentBattery.dailyRent : bikeDetails.currentRent;

      list.push({
        id: `TX-${isBattery ? 'BAT' : 'BK'}-${10000 + i}`,
        date: dateString,
        riderName: riders[riderIndex],
        duration: '1 Day',
        amount: amount,
        status: status,
        payoutMethod: methods[methodIndex],
        swapCount: isBattery ? 2 + (i % 3) : undefined
      });
    }
    return list;
  });

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

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

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

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

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

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

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

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

  return (
    <div className="min-h-screen lg:pt-6 pt-0">
      <InvestorNotification isMobile />
      
      <div className="pt-18 lg:pt-0 p-4 sm:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
        
        {/* Header - EXACT copy of other page's spacing & structure */}
        <div className="mb-6">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div className="flex items-center gap-3">
              <button 
                onClick={() => router.back()} 
                className="p-2 hover:bg-slate-100 rounded-lg transition-colors border border-slate-200 bg-white"
              >
                <ArrowLeft className="w-5 h-5 text-slate-600" />
              </button>
              <div>
                <h1 className="text-xl sm:text-2xl font-bold text-slate-800 flex items-center gap-2">
                  {isBattery ? <Battery className="w-5 h-5 sm:w-6 sm:h-6 text-investor" /> : <Bike className="w-5 h-5 sm:w-6 sm:h-6 text-investor" />}
                  {assetDisplayName}
                </h1>
                <p className="text-sm text-slate-500 mt-1">
                  ID: #{assetId.toUpperCase()} • {isBattery ? `Serial Number: ${currentBattery.serialNumber}` : `Plate: ${bikeDetails.plateNumber}`}
                </p>
              </div>
            </div>
            
            <button 
              onClick={() => toast.success('Exporting history...')} 
              className="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 flex justify-center lg:justify-start items-center gap-2 shadow-sm w-fit"
            >
              <Download className="w-4 h-4 text-slate-500" /> Export Ledger
            </button>
          </div>
        </div>

        {/* Info Grid & Stats Cards - MATCHES OTHER PAGES PRECISELY */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6">
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center shrink-0">
                <DollarSign className="w-5 h-5 text-green-600" />
              </div>
              <div>
                <p className="text-xs text-slate-500">Total Collected</p>
                <p className="text-lg font-bold text-green-600">৳{totalCollected.toLocaleString()}</p>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center shrink-0">
                <Activity className="w-5 h-5 text-blue-600" />
              </div>
              <div>
                <p className="text-xs text-slate-500">Utilization Rate</p>
                <p className="text-lg font-bold text-slate-800">{isBattery ? currentBattery.utilization : bikeDetails.utilization}</p>
              </div>
            </div>
          </div>

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

          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center shrink-0">
                <Shield className="w-5 h-5 text-purple-600" />
              </div>
              <div>
                <p className="text-xs text-slate-500">Hub Location</p>
                <p className="text-sm font-bold text-slate-800 truncate max-w-[140px] sm:max-w-none">
                  {isBattery ? currentBattery.location.split(' ')[0] : bikeDetails.location.split(' ')[0]}
                </p>
              </div>
            </div>
          </div>
        </div>

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

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

            </div>
          </div>

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

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

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

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

        </div>
      </div>
    </div>
  );
}
