'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..." />
}