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

import React, { useState } from 'react';
import { useAuth } from '@/context/AuthContext';
import { mockExpenses, mockDrivers } from '@/lib/mockData';
import StatusBadge from '@/components/ui/StatusBadge';
import DataTable, { Column } from '@/components/ui/DataTable';
import { formatCurrency, formatDate } from '@/lib/utils';
import { Expense } from '@/types';
import { Plus, Fuel, Utensils, Wrench, Receipt, FileText, Check, X } from 'lucide-react';

export default function ExpensesPage() {
  const { role } = useAuth();
  const [filter, setFilter] = useState('all');
  const [expenses, setExpenses] = useState(mockExpenses);

  const handleApprove = (id: string) => {
    setExpenses(expenses.map(e => e.id === id ? { ...e, status: 'approved' } : e));
  };

  const handleReject = (id: string) => {
    setExpenses(expenses.map(e => e.id === id ? { ...e, status: 'rejected' } : e));
  };

  const filteredExpenses = expenses.filter(e => filter === 'all' || e.status === filter);

  const getCategoryIcon = (category: string) => {
    switch (category) {
      case 'fuel': return <Fuel className="text-status-amber w-5 h-5" />;
      case 'food': return <Utensils className="text-status-green w-5 h-5" />;
      case 'maintenance': return <Wrench className="text-status-red w-5 h-5" />;
      case 'toll': return <Receipt className="text-status-blue w-5 h-5" />;
      default: return <FileText className="text-text-muted w-5 h-5" />;
    }
  };

  const columns: Column<Expense>[] = [
    { header: 'Category', cell: (item) => (
      <div className="flex items-center space-x-3">
        <div className="p-2 bg-background border border-border rounded-lg">
          {getCategoryIcon(item.category)}
        </div>
        <div>
          <p className="font-medium text-text-primary capitalize">{item.category.replace('_', ' ')}</p>
          <p className="text-xs text-text-hint">{item.description}</p>
        </div>
      </div>
    ) },
    { header: 'Trip ID', accessorKey: 'tripId', className: 'text-text-muted uppercase' },
    { header: 'Driver', cell: (item) => mockDrivers.find(d => d.id === item.driverId)?.name },
    { header: 'Amount', cell: (item) => <span className="font-medium text-text-primary">{formatCurrency(item.amount)}</span> },
    { header: 'Status', cell: (item) => <StatusBadge status={item.status} /> },
    { header: 'Date', cell: (item) => formatDate(item.date) },
  ];

  if (role === 'transport_admin') {
    columns.push({
      header: 'Actions',
      cell: (item) => (
        item.status === 'pending' ? (
          <div className="flex space-x-2">
            <button 
              onClick={(e) => { e.stopPropagation(); handleApprove(item.id); }}
              className="p-1.5 bg-status-green/10 text-status-green rounded hover:bg-status-green/20 transition-colors"
              title="Approve"
            >
              <Check size={16} />
            </button>
            <button 
              onClick={(e) => { e.stopPropagation(); handleReject(item.id); }}
              className="p-1.5 bg-status-red/10 text-status-red rounded hover:bg-status-red/20 transition-colors"
              title="Reject"
            >
              <X size={16} />
            </button>
          </div>
        ) : <span className="text-text-hint text-sm">Processed</span>
      )
    });
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-text-primary">Expenses</h1>
          <p className="text-text-muted text-sm mt-1">Review and approve trip expenses</p>
        </div>
        <button className="bg-primary text-background px-4 py-2 rounded-md font-medium flex items-center hover:bg-primary/90 transition-colors">
          <Plus size={18} className="mr-2" />
          Add Expense
        </button>
      </div>

      <div className="bg-surface border border-border rounded-xl p-5">
        <div className="flex space-x-2 mb-6 overflow-x-auto pb-2">
          {['all', 'pending', 'approved', 'rejected'].map((status) => (
            <button
              key={status}
              onClick={() => setFilter(status)}
              className={`px-4 py-1.5 rounded-full text-sm font-medium capitalize transition-colors whitespace-nowrap ${
                filter === status 
                  ? 'bg-primary text-background' 
                  : 'bg-background border border-border text-text-muted hover:text-text-primary'
              }`}
            >
              {status}
            </button>
          ))}
        </div>

        <DataTable data={filteredExpenses} columns={columns} />
      </div>
    </div>
  );
}