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

import React, { useState } from 'react';
import DataTable, { Column } from '@/components/ui/DataTable';
import StatusBadge from '@/components/ui/StatusBadge';
import { mockVehicles, mockDrivers } from '@/lib/mockData';
import { Vehicle } from '@/types';
import { formatDate } from '@/lib/utils';
import { Plus } from 'lucide-react';

export default function VehiclesPage() {
  const [filter, setFilter] = useState('all');
  
  const filteredVehicles = mockVehicles.filter(v => filter === 'all' || v.status === filter);

  const columns: Column<Vehicle>[] = [
    { header: 'Vehicle No.', accessorKey: 'registrationNumber', className: 'font-medium text-text-primary' },
    { header: 'Status', cell: (item) => <StatusBadge status={item.status} /> },
    { header: 'Assigned Driver', cell: (item) => {
      const driver = mockDrivers.find(d => d.id === item.assignedDriverId);
      return driver ? driver.name : <span className="text-text-hint">Unassigned</span>;
    } },
    { header: 'RC Expiry', cell: (item) => formatDate(item.rcExpiry) },
    { header: 'Insurance Expiry', cell: (item) => {
      const isExpiringSoon = new Date(item.insuranceExpiry).getTime() - new Date().getTime() < 30 * 24 * 60 * 60 * 1000;
      return <span className={isExpiringSoon ? 'text-status-amber font-medium' : ''}>{formatDate(item.insuranceExpiry)}</span>;
    } },
    { header: 'Permit Expiry', cell: (item) => formatDate(item.permitExpiry) },
    { header: 'Actions', cell: () => <button className="text-primary text-sm hover:underline">Edit</button> },
  ];

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-text-primary">Vehicles</h1>
          <p className="text-text-muted text-sm mt-1">Manage your fleet and track compliance</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 Vehicle
        </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', 'active', 'idle', 'in_trip', 'maintenance'].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.replace('_', ' ')}
            </button>
          ))}
        </div>

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