"use client";

import Link from "next/link";
import {DataTable, DataTableColumn, DataTableFilter} from "@/components/data-table/data-table";

type BookingRow = {
  id: string;
  bookingNumber: string;
  customerName: string;
  vehicleName: string;
  pickupAt: string;
  dropoffAt: string;
  status: string;
  totalAmount: number;
};

const statusColors: Record<string, string> = {
  DRAFT: "bg-slate-100 text-slate-600",
  PENDING_APPROVAL: "bg-yellow-100 text-yellow-700",
  PENDING_PAYMENT: "bg-orange-100 text-orange-700",
  CONFIRMED: "bg-blue-100 text-blue-700",
  ACTIVE: "bg-green-100 text-green-700",
  COMPLETED: "bg-slate-100 text-slate-600",
  CANCELLED: "bg-red-100 text-red-700",
  REJECTED: "bg-red-100 text-red-700",
  NO_SHOW: "bg-gray-100 text-gray-600"
};

export function BookingsTable({
  rows,
  tenantSlug,
  locale,
  currency
}: {
  rows: BookingRow[];
  tenantSlug: string;
  locale: string;
  currency: string;
}) {
  const columns: DataTableColumn<BookingRow>[] = [
    {
      key: "bookingNumber",
      header: "Booking #",
      accessor: (row) => row.bookingNumber,
      sortable: true,
      cell: (row) => (
        <Link href={`/${locale}/company/${tenantSlug}/bookings/${row.id}`} className="font-mono text-xs text-blue-600 hover:underline">
          {row.bookingNumber}
        </Link>
      )
    },
    {key: "customerName", header: "Customer", accessor: (row) => row.customerName, sortable: true},
    {key: "vehicleName", header: "Vehicle", accessor: (row) => row.vehicleName, sortable: true},
    {
      key: "dates",
      header: "Dates",
      accessor: (row) => row.pickupAt,
      cell: (row) => (
        <div className="text-xs">
          <p>{row.pickupAt}</p>
          <p className="text-slate-400">→ {row.dropoffAt}</p>
        </div>
      )
    },
    {
      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.replace(/_/g, " ")}
        </span>
      )
    },
    {
      key: "totalAmount",
      header: "Total",
      accessor: (row) => row.totalAmount,
      sortable: true,
      cell: (row) => <span className="font-semibold">{currency} {row.totalAmount}</span>
    },
    {
      key: "actions",
      header: "Actions",
      accessor: () => "",
      cell: (row) => (
        <Link href={`/${locale}/company/${tenantSlug}/bookings/${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<BookingRow>[] = [
    {
      key: "status",
      label: "Status",
      options: ["DRAFT", "PENDING_APPROVAL", "PENDING_PAYMENT", "CONFIRMED", "ACTIVE", "COMPLETED", "CANCELLED"].map((s) => ({
        label: s.replace(/_/g, " "),
        value: s
      })),
      getValue: (row) => row.status
    }
  ];

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