"use client";

import Link from "next/link";
import Image from "next/image";
import {Car} from "lucide-react";
import {DataTable, DataTableColumn, DataTableFilter} from "@/components/data-table/data-table";

type VehicleRow = {
  id: string;
  name: string;
  brandName: string;
  plateNumber: string;
  category: string;
  status: string;
  dailyRate: number;
  branchName: string;
  primaryImageUrl: string | null;
};

const statusColors: Record<string, string> = {
  AVAILABLE: "bg-green-100 text-green-700",
  RESERVED: "bg-yellow-100 text-yellow-700",
  RENTED: "bg-blue-100 text-blue-700",
  MAINTENANCE: "bg-orange-100 text-orange-700",
  INACTIVE: "bg-slate-100 text-slate-600",
  ARCHIVED: "bg-gray-100 text-gray-600"
};

export function FleetTable({
  rows,
  tenantSlug,
  currency
}: {
  rows: VehicleRow[];
  tenantSlug: string;
  currency: string;
}) {
  const columns: DataTableColumn<VehicleRow>[] = [
    {
      key: "name",
      header: "Vehicle",
      accessor: (row) => row.name,
      sortable: true,
      cell: (row) => (
        <div className="flex items-center gap-3">
          <div className="relative h-10 w-14 overflow-hidden rounded-lg bg-slate-100 shrink-0">
            {row.primaryImageUrl ? (
              <Image src={row.primaryImageUrl} alt={row.name} fill className="object-cover" unoptimized />
            ) : (
              <div className="flex h-full items-center justify-center"><Car className="h-5 w-5 text-slate-400" /></div>
            )}
          </div>
          <div>
            <p className="font-medium text-slate-900">{row.name}</p>
            <p className="text-xs text-slate-500">{row.brandName}</p>
          </div>
        </div>
      )
    },
    {key: "plateNumber", header: "Plate", accessor: (row) => row.plateNumber, sortable: true},
    {
      key: "category",
      header: "Category",
      accessor: (row) => row.category,
      cell: (row) => <span className="capitalize text-sm">{row.category.toLowerCase()}</span>
    },
    {
      key: "status",
      header: "Status",
      accessor: (row) => row.status,
      cell: (row) => (
        <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${statusColors[row.status] ?? "bg-slate-100"}`}>
          {row.status}
        </span>
      )
    },
    {
      key: "dailyRate",
      header: "Daily Rate",
      accessor: (row) => row.dailyRate,
      sortable: true,
      cell: (row) => <span className="font-semibold">{currency} {row.dailyRate}</span>
    },
    {key: "branchName", header: "Branch", accessor: (row) => row.branchName},
    {
      key: "actions",
      header: "Actions",
      accessor: () => "",
      cell: (row) => (
        <Link href={`/${tenantSlug}/fleet/${row.id}`}>
          <button className="rounded-lg border border-slate-200 px-2.5 py-1 text-xs font-medium text-slate-700 hover:bg-slate-50 transition">
            View
          </button>
        </Link>
      )
    }
  ];

  const filters: DataTableFilter<VehicleRow>[] = [
    {
      key: "status",
      label: "Status",
      options: ["AVAILABLE", "RESERVED", "RENTED", "MAINTENANCE", "INACTIVE"].map((s) => ({label: s, value: s})),
      getValue: (row) => row.status
    },
    {
      key: "category",
      label: "Category",
      options: ["ECONOMY", "SEDAN", "SUV", "LUXURY", "SPORT", "VAN", "PICKUP"].map((c) => ({label: c, value: c})),
      getValue: (row) => row.category
    }
  ];

  return (
    <DataTable
      data={rows}
      columns={columns}
      filters={filters}
      searchPlaceholder="Search vehicles..."
      emptyMessage="No vehicles found"
    />
  );
}