// /media/hf/data/projects/Dawinder/transport/app/(dashboard)/advances/page.tsx
"use client";

import React, { useState, useEffect } from 'react';
import { useAuth } from '@/context/AuthContext';
import { useRouter } from 'next/navigation';
import { mockDrivers } from '@/lib/mockData';
import DataTable, { Column } from '@/components/ui/DataTable';
import StatusBadge from '@/components/ui/StatusBadge';
import { formatCurrency, formatDate } from '@/lib/utils';
import { Driver } from '@/types';
import { Banknote, CheckCircle } from 'lucide-react';
import AdvanceModal from '@/components/drivers/AdvanceModal';

export default function AdvancesPage() {
  const { role } = useAuth();
  const router = useRouter();
  const [isAdvanceModalOpen, setIsAdvanceModalOpen] = useState(false);
  const [selectedDriver, setSelectedDriver] = useState<Driver | null>(null);

  useEffect(() => {
    if (role !== 'transport_admin') {
      router.push('/dashboard');
    }
  }, [role, router]);

  if (role !== 'transport_admin') return null;

  const driversWithAdvances = mockDrivers.filter(d => d.advanceBalance > 0);
  const pendingSettlements = driversWithAdvances.map(d => ({
    ...d,
    pendingExpenses: 5000, // mock value
    salaryPayable: 20000, // mock value
  }));

  const columns: Column<any>[] = [
    { header: 'Driver', accessorKey: 'name', className: 'font-medium text-text-primary' },
    { header: 'Advance Balance', cell: (item) => <span className="font-medium text-status-red">{formatCurrency(item.advanceBalance)}</span> },
    { header: 'Pending Expenses', cell: (item) => <span className="text-text-muted">{formatCurrency(item.pendingExpenses)}</span> },
    { header: 'Salary Payable', cell: (item) => <span className="text-text-muted">{formatCurrency(item.salaryPayable)}</span> },
    { header: 'Final Settlement', cell: (item) => {
      const final = item.pendingExpenses + item.salaryPayable - item.advanceBalance;
      return <span className={`font-bold ${final >= 0 ? 'text-status-green' : 'text-status-red'}`}>{formatCurrency(Math.abs(final))} {final >= 0 ? '(Pay)' : '(Recover)'}</span>;
    } },
    { header: 'Action', cell: () => (
      <button className="flex items-center px-3 py-1.5 bg-primary/10 text-primary hover:bg-primary/20 rounded transition-colors text-sm font-medium">
        <CheckCircle size={14} className="mr-1.5" />
        Mark Settled
      </button>
    ) },
  ];

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-text-primary">Driver Settlements</h1>
          <p className="text-text-muted text-sm mt-1">Manage advances and final settlements</p>
        </div>
        <button 
          onClick={() => {
            setSelectedDriver(mockDrivers[0]);
            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="bg-surface border border-border rounded-xl p-5 mb-6">
        <div className="flex items-start space-x-3 p-4 bg-background border border-border rounded-lg mb-6">
          <div className="text-primary mt-1">
            <CheckCircle size={20} />
          </div>
          <div>
            <h4 className="font-medium text-text-primary">Settlement Formula</h4>
            <p className="text-sm text-text-muted mt-1">
              <span className="font-semibold text-text-primary">Final Settlement</span> = 
              <span className="text-status-green ml-1">Approved Expenses</span> + 
              <span className="text-status-blue ml-1">Salary Payable</span> - 
              <span className="text-status-red ml-1">Advances Taken</span>
            </p>
          </div>
        </div>

        <h3 className="text-lg font-semibold text-text-primary mb-4">Pending Settlements</h3>
        <DataTable data={pendingSettlements} columns={columns} />
      </div>

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