"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 PollRow {
  id: number;
  title: string;
  status: string;
  showResults: number;
  multipleChoice: number;
  startsAt: Date | null;
  endsAt: Date | null;
  createdAt: Date;
}

const statusVariants: Record<string, "default" | "secondary" | "outline"> = {
  active: "default",
  draft: "secondary",
  closed: "outline",
};

function getColumns(): DataTableColumn<PollRow>[] {
  return [
    { key: "id", label: "ID", sortable: true },
    {
      key: "title",
      label: "Title",
      sortable: true,
      render: (value) => <span className="font-medium">{String(value)}</span>,
    },
    {
      key: "status",
      label: "Status",
      sortable: true,
      render: (value) => (
        <Badge variant={statusVariants[String(value)] ?? "secondary"}>{String(value)}</Badge>
      ),
    },
    {
      key: "multipleChoice",
      label: "Type",
      render: (value) => (
        <span className="text-sm">{Number(value) ? "Multiple choice" : "Single choice"}</span>
      ),
    },
    {
      key: "createdAt",
      label: "Created",
      sortable: true,
      render: (value) => (
        <span className="text-sm">{new Date(value as unknown as string).toLocaleDateString()}</span>
      ),
    },
    {
      key: "actions",
      label: "Actions",
      render: (_, row) => (
        <Button variant="ghost" size="icon" asChild>
          <Link href={`/admin/polls/${row.id}`}>
            <Pencil className="h-4 w-4" />
          </Link>
        </Button>
      ),
    },
  ];
}

interface PollsTableProps {
  data: PaginatedResult<PollRow>;
}

export function PollsTable({ data }: PollsTableProps) {
  return <DataTable data={data} columns={getColumns()} searchPlaceholder="Search polls..." />;
}