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

import React, { use } from 'react';
import { useAuth } from '@/context/AuthContext';
import { mockTrips, mockDrivers, mockVehicles, mockExpenses } from '@/lib/mockData';
import StatusBadge from '@/components/ui/StatusBadge';
import TripPipeline from '@/components/ui/TripPipeline';
import DataTable, { Column } from '@/components/ui/DataTable';
import { formatCurrency, formatDate } from '@/lib/utils';
import { Expense } from '@/types';
import { MapPin, Calendar, Truck, User, IndianRupee } from 'lucide-react';

export default function TripDetailsPage({ params }: { params: Promise<{ id: string }> }) {
  const resolvedParams = use(params);
  const { role } = useAuth();
  
  const trip = mockTrips.find(t => t.id === resolvedParams.id);
  
  if (!trip) return <div className="p-6 text-text-muted">Trip not found</div>;

  const vehicle = mockVehicles.find(v => v.id === trip.vehicleId);
  const driver = mockDrivers.find(d => d.id === trip.driverId);
  const expenses = mockExpenses.filter(e => e.tripId === trip.id);
  
  const totalExpenses = expenses.filter(e => e.status === 'approved').reduce((sum, e) => sum + e.amount, 0);
  const pendingExpenses = expenses.filter(e => e.status === 'pending').reduce((sum, e) => sum + e.amount, 0);
  const netProfit = trip.freightAmount - totalExpenses;

  const expenseColumns: Column<Expense>[] = [
    { header: 'Date', cell: (item) => formatDate(item.date) },
    { header: 'Category', accessorKey: 'category', className: 'capitalize' },
    { header: 'Description', accessorKey: 'description' },
    { header: 'Amount', cell: (item) => formatCurrency(item.amount), className: 'text-right' },
    { header: 'Status', cell: (item) => <StatusBadge status={item.status} /> },
  ];

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-start">
        <div>
          <div className="flex items-center space-x-3 mb-2">
            <h1 className="text-2xl font-bold text-text-primary uppercase">{trip.id}</h1>
            <StatusBadge status={trip.status} />
          </div>
          <p className="text-xl text-text-primary font-medium flex items-center">
            {trip.origin} <MapPin size={16} className="mx-2 text-primary" /> {trip.destination}
          </p>
        </div>
      </div>

      <div className="bg-surface border border-border rounded-xl p-6">
        <TripPipeline currentStatus={trip.status} />
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-8 pt-6 border-t border-border">
          <div className="flex items-start space-x-3">
            <div className="p-2 bg-primary/10 rounded-lg text-primary">
              <Calendar size={20} />
            </div>
            <div>
              <p className="text-text-hint text-xs">Timeline</p>
              <p className="text-text-primary text-sm font-medium mt-1">{formatDate(trip.startDate)} - {formatDate(trip.expectedEndDate)}</p>
            </div>
          </div>
          <div className="flex items-start space-x-3">
            <div className="p-2 bg-status-blue/10 rounded-lg text-status-blue">
              <Truck size={20} />
            </div>
            <div>
              <p className="text-text-hint text-xs">Vehicle</p>
              <p className="text-text-primary text-sm font-medium mt-1">{vehicle?.registrationNumber}</p>
            </div>
          </div>
          <div className="flex items-start space-x-3">
            <div className="p-2 bg-status-purple/10 rounded-lg text-status-purple">
              <User size={20} />
            </div>
            <div>
              <p className="text-text-hint text-xs">Driver</p>
              <p className="text-text-primary text-sm font-medium mt-1">{driver?.name}</p>
            </div>
          </div>
          <div className="flex items-start space-x-3">
            <div className="p-2 bg-status-green/10 rounded-lg text-status-green">
              <IndianRupee size={20} />
            </div>
            <div>
              <p className="text-text-hint text-xs">Freight Amount</p>
              <p className="text-text-primary text-sm font-medium mt-1">{formatCurrency(trip.freightAmount)}</p>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className={`lg:col-span-${role === 'transport_admin' ? '2' : '3'}`}>
          <div className="bg-surface border border-border rounded-xl p-5 h-full">
            <h3 className="text-lg font-semibold text-text-primary mb-4">Trip Expenses</h3>
            <DataTable data={expenses} columns={expenseColumns} emptyMessage="No expenses recorded for this trip." />
          </div>
        </div>

        {role === 'transport_admin' && (
          <div className="lg:col-span-1">
            <div className="bg-surface border border-border rounded-xl p-5 h-full">
              <h3 className="text-lg font-semibold text-text-primary mb-6">Profit & Loss</h3>
              
              <div className="space-y-4">
                <div className="flex justify-between items-center pb-4 border-b border-border/50">
                  <span className="text-text-muted">Total Freight</span>
                  <span className="font-medium text-text-primary">{formatCurrency(trip.freightAmount)}</span>
                </div>
                
                <div className="flex justify-between items-center pb-4 border-b border-border/50">
                  <span className="text-text-muted">Approved Expenses</span>
                  <span className="font-medium text-status-red">-{formatCurrency(totalExpenses)}</span>
                </div>
                
                <div className="flex justify-between items-center pb-4 border-b border-border/50">
                  <span className="text-text-muted">Pending Expenses</span>
                  <span className="font-medium text-status-amber">-{formatCurrency(pendingExpenses)}</span>
                </div>
                
                <div className="flex justify-between items-center pt-2">
                  <span className="text-lg font-semibold text-text-primary">Net Profit</span>
                  <span className="text-xl font-bold text-status-green">{formatCurrency(netProfit)}</span>
                </div>
                
                <div className="mt-6 pt-6 border-t border-border">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-sm text-text-muted">Profit Margin</span>
                    <span className="text-sm font-medium text-text-primary">
                      {((netProfit / trip.freightAmount) * 100).toFixed(1)}%
                    </span>
                  </div>
                  <div className="w-full bg-background rounded-full h-2">
                    <div 
                      className="bg-primary h-2 rounded-full" 
                      style={{ width: `${Math.max(0, (netProfit / trip.freightAmount) * 100)}%` }}
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}