"use client";

import { Pencil } from "lucide-react";
import Link from "next/link";
import { DataTable } from "@/components/admin/data-table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { DataTableColumn, PaginatedResult } from "@/types";

interface EventRow {
  id: number;
  title: string;
  typeName: string;
  typeColor: string;
  startsAt: Date;
  endsAt: Date | null;
  status: string;
  hostUserId: number;
}

const statusVariants: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
  published: "default",
  draft: "secondary",
  cancelled: "destructive",
  completed: "outline",
};

function getColumns(): DataTableColumn<EventRow>[] {
  return [
    { key: "id", label: "ID", sortable: true },
    {
      key: "title",
      label: "Title",
      sortable: true,
      render: (value) => <span className="font-medium">{String(value)}</span>,
    },
    {
      key: "typeName",
      label: "Type",
      sortable: false,
      render: (_, row) => (
        <Badge style={{ backgroundColor: row.typeColor, color: "#fff" }}>{row.typeName}</Badge>
      ),
    },
    {
      key: "startsAt",
      label: "Starts",
      sortable: true,
      render: (value) => (
        <span className="text-sm">{new Date(value as unknown as string).toLocaleString()}</span>
      ),
    },
    {
      key: "status",
      label: "Status",
      sortable: true,
      render: (value) => (
        <Badge variant={statusVariants[String(value)] ?? "secondary"}>{String(value)}</Badge>
      ),
    },
    {
      key: "actions",
      label: "Actions",
      render: (_, row) => (
        <Button variant="ghost" size="icon" asChild>
          <Link href={`/admin/events/${row.id}`}>
            <Pencil className="h-4 w-4" />
          </Link>
        </Button>
      ),
    },
  ];
}

interface EventsTableProps {
  data: PaginatedResult<EventRow>;
}

export function EventsTable({ data }: EventsTableProps) {
  return <DataTable data={data} columns={getColumns()} searchPlaceholder="Search events..." />;
}