// /media/hf/data/projects/Dawinder/transport/app/(dashboard)/drivers/[id]/page.tsx
"use client";

import React, { useState, use } from 'react';
import { mockDrivers, mockVehicles, mockTrips, mockLedgerEntries } from '@/lib/mockData';
import StatusBadge from '@/components/ui/StatusBadge';
import DataTable, { Column } from '@/components/ui/DataTable';
import { formatCurrency, formatDate } from '@/lib/utils';
import { Banknote, User, CreditCard, History } from 'lucide-react';
import AdvanceModal from '@/components/drivers/AdvanceModal';
import { LedgerEntry } from '@/types';

export default function DriverDetailsPage({ params }: { params: Promise<{ id: string }> }) {
  const resolvedParams = use(params);
  const driver = mockDrivers.find(d => d.id === resolvedParams.id);
  const [isAdvanceModalOpen, setIsAdvanceModalOpen] = useState(false);

  if (!driver) return <div className="p-6 text-text-muted">Driver not found</div>;

  const vehicle = mockVehicles.find(v => v.id === driver.assignedVehicleId);
  const activeTrip = mockTrips.find(t => t.id === driver.activeTripId);
  const ledgerEntries = mockLedgerEntries.filter(l => l.driverId === driver.id);

  const columns: Column<LedgerEntry>[] = [
    { header: 'Date', cell: (item) => formatDate(item.date) },
    { header: 'Description', accessorKey: 'description', className: 'font-medium text-text-primary' },
    { header: 'Ref', accessorKey: 'referenceId', className: 'text-text-muted' },
    { header: 'Type', cell: (item) => (
      <span className={item.type === 'credit' ? 'text-status-green' : 'text-status-red'}>
        {item.type.toUpperCase()}
      </span>
    ) },
    { header: 'Amount', cell: (item) => (
      <span className={`font-medium ${item.type === 'credit' ? 'text-status-green' : 'text-status-red'}`}>
        {item.type === 'credit' ? '+' : '-'}{formatCurrency(item.amount)}
      </span>
    ), className: 'text-right' },
  ];

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-text-primary">Driver Details</h1>
        <button 
          onClick={() => setIsAdvanceModalOpen(true)}
          className="bg-primary text-background px-4 py-2 rounded-md font-medium flex items-center hover:bg-primary/90 transition-colors"
        >
          <Banknote size={18} className="mr-2" />
          Issue Advance
        </button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-1 space-y-6">
          <div className="bg-surface border border-border rounded-xl p-6">
            <div className="flex items-center space-x-4 mb-6">
              <div className="w-16 h-16 rounded-full bg-primary/20 text-primary flex items-center justify-center font-bold text-2xl border border-primary/30">
                {driver.name.split(' ').map(n => n[0]).join('')}
              </div>
              <div>
                <h2 className="text-xl font-bold text-text-primary">{driver.name}</h2>
                <StatusBadge status={driver.status} />
              </div>
            </div>

            <div className="space-y-4">
              <div className="flex items-center text-sm">
                <User className="w-5 h-5 text-text-muted mr-3" />
                <div>
                  <p className="text-text-hint text-xs">Phone</p>
                  <p className="text-text-primary font-medium">{driver.phone}</p>
                </div>
              </div>
              <div className="flex items-center text-sm">
                <CreditCard className="w-5 h-5 text-text-muted mr-3" />
                <div>
                  <p className="text-text-hint text-xs">Aadhaar</p>
                  <p className="text-text-primary font-medium">{driver.aadhaarNumber}</p>
                </div>
              </div>
              <div className="flex items-center text-sm">
                <History className="w-5 h-5 text-text-muted mr-3" />
                <div>
                  <p className="text-text-hint text-xs">License No.</p>
                  <p className="text-text-primary font-medium">{driver.licenseNumber}</p>
                  <p className="text-text-muted text-xs mt-0.5">Exp: {formatDate(driver.licenseExpiry)}</p>
                </div>
              </div>
            </div>

            <hr className="my-6 border-border" />

            <div className="space-y-4">
              <div>
                <p className="text-text-hint text-xs mb-1">Assigned Vehicle</p>
                {vehicle ? (
                  <div className="flex justify-between items-center p-3 rounded-lg border border-border bg-background">
                    <span className="font-medium text-text-primary">{vehicle.registrationNumber}</span>
                    <StatusBadge status={vehicle.status} />
                  </div>
                ) : (
                  <p className="text-text-muted text-sm">None</p>
                )}
              </div>
              <div>
                <p className="text-text-hint text-xs mb-1">Active Trip</p>
                {activeTrip ? (
                  <div className="p-3 rounded-lg border border-border bg-background">
                    <p className="font-medium text-text-primary text-sm">{activeTrip.route}</p>
                    <div className="mt-2">
                      <StatusBadge status={activeTrip.status} />
                    </div>
                  </div>
                ) : (
                  <p className="text-text-muted text-sm">None</p>
                )}
              </div>
            </div>
          </div>
        </div>

        <div className="lg:col-span-2 space-y-6">
          <div className="grid grid-cols-2 gap-4">
            <div className="bg-surface border border-border rounded-xl p-5 flex flex-col justify-center">
              <p className="text-text-muted text-sm mb-1">Wallet Balance (Payable)</p>
              <p className="text-3xl font-bold text-status-green">{formatCurrency(driver.walletBalance)}</p>
            </div>
            <div className="bg-surface border border-border rounded-xl p-5 flex flex-col justify-center">
              <p className="text-text-muted text-sm mb-1">Advance Balance (Recoverable)</p>
              <p className="text-3xl font-bold text-status-red">{formatCurrency(driver.advanceBalance)}</p>
            </div>
          </div>

          <div className="bg-surface border border-border rounded-xl p-5">
            <h3 className="text-lg font-semibold text-text-primary mb-4">Ledger Transactions</h3>
            <DataTable data={ledgerEntries} columns={columns} emptyMessage="No transactions recorded" />
          </div>
        </div>
      </div>

      {isAdvanceModalOpen && (
        <AdvanceModal 
          driver={driver} 
          onClose={() => setIsAdvanceModalOpen(false)} 
        />
      )}
    </div>
  );
}