"use client";

import { MapPin, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
import { DataTable } from "@/components/shared/data-table";
import { StatusBadge } from "@/components/shared/page";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import type { LocationDirectoryRecord } from "./api-contract";
import { locationDirectoryAddress } from "./model";

export function LocationListTable({
  rows,
  onCreate,
  onEdit,
  onDelete,
  onLocate,
  onRefresh,
}: {
  rows: readonly LocationDirectoryRecord[];
  onCreate?: () => void;
  onEdit?: (row: LocationDirectoryRecord) => void;
  onDelete?: (row: LocationDirectoryRecord) => void;
  onLocate?: (row: LocationDirectoryRecord) => void;
  onRefresh?: () => void;
}) {
  return (
    <div className="min-w-0 [&_table]:min-w-[1080px]">
      <DataTable
        title="Locations"
        description="Manage and monitor charging locations"
        rows={rows}
        searchPlaceholder="Search locations…"
        emptyMessage="No locations found. Try another search."
        onRefresh={onRefresh}
        columns={[
          {
            key: "name",
            label: "Location Name",
            render: (row) => (
              <div className="flex min-w-52 items-center gap-2">
                <span className="font-medium">{row.name}</span>
                <StatusBadge>{row.active ? "Active" : "Inactive"}</StatusBadge>
              </div>
            ),
          },
          {
            key: "address",
            label: "Address",
            exportValue: locationDirectoryAddress,
            render: (row) => (
              <span className="block min-w-48 max-w-64 whitespace-normal">
                {locationDirectoryAddress(row)}
              </span>
            ),
          },
          { key: "code", label: "Code", render: (row) => row.code || "—" },
          { key: "email", label: "Email", render: (row) => row.email || "—" },
          {
            key: "phone",
            label: "Phone",
            render: (row) => <span className="whitespace-nowrap">{row.phone || "—"}</span>,
          },
          {
            key: "latitude",
            label: "Coordinates",
            exportValue: (row) =>
              row.latitude === null || row.longitude === null
                ? ""
                : `${row.latitude.toFixed(6)}, ${row.longitude.toFixed(6)}`,
            render: (row) => (
              <span className="whitespace-nowrap tabular-nums">
                {row.latitude === null || row.longitude === null
                  ? "—"
                  : `${row.latitude.toFixed(6)}, ${row.longitude.toFixed(6)}`}
              </span>
            ),
          },
        ]}
        onCreate={onCreate}
        createLabel="Add Location"
        exportName="locations"
        actions={(row) => (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                aria-label={`Actions for ${row.name}`}
              >
                <MoreHorizontal className="size-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="min-w-44">
              {onLocate && (
                <DropdownMenuItem onSelect={() => onLocate(row)}>
                  <MapPin />
                  Locate on map
                </DropdownMenuItem>
              )}
              {onEdit && (
                <DropdownMenuItem onSelect={() => onEdit(row)}>
                  <Pencil />
                  Edit location
                </DropdownMenuItem>
              )}
              {onDelete && (
                <DropdownMenuItem
                  variant="destructive"
                  onSelect={() => onDelete(row)}
                >
                  <Trash2 />
                  Delete location
                </DropdownMenuItem>
              )}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      />
    </div>
  );
}