'use client'

import { Eye, Pencil, Sofa, Wifi } 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 RoomRow {
  id: number
  name: string
  ownerName: string
  ownerId: number
  state: string
  users: number
  usersMax: number
  description: string
}

const stateVariants: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  open: 'default',
  locked: 'secondary',
  password: 'destructive',
  invisible: 'outline',
}

function getColumns(canEdit: boolean): DataTableColumn<RoomRow>[] {
  return [
    { key: 'id', label: 'ID', sortable: true },
    {
      key: 'name',
      label: 'Room',
      sortable: true,
      render: (_, row) => (
        <Link href={`/admin/rooms/show/${row.id}`} className="hover:opacity-80">
          <div className="min-w-0">
            <span className="font-medium block">{row.name}</span>
            {row.description && (
              <span className="text-xs text-muted-foreground truncate block max-w-[250px]">
                {row.description}
              </span>
            )}
          </div>
        </Link>
      ),
    },
    {
      key: 'ownerName',
      label: 'Owner',
      render: (_, row) => (
        <Link
          href={`/admin/users/show/${row.ownerId}`}
          className="text-sm text-primary hover:underline"
        >
          {row.ownerName}
        </Link>
      ),
    },
    {
      key: 'state',
      label: 'State',
      sortable: true,
      filterKey: 'filter_state',
      filterOptions: [
        { label: 'Open', value: 'open' },
        { label: 'Locked', value: 'locked' },
        { label: 'Password', value: 'password' },
        { label: 'Invisible', value: 'invisible' },
      ],
      render: (value) => (
        <Badge variant={stateVariants[String(value)] || 'outline'}>{String(value)}</Badge>
      ),
    },
    {
      key: 'users',
      label: 'Users',
      sortable: true,
      render: (_, row) => (
        <span className="flex items-center gap-1.5 text-sm">
          {row.users > 0 && <Wifi className="h-3 w-3 text-green-500" />}
          <span className={row.users > 0 ? 'font-medium' : 'text-muted-foreground'}>
            {row.users}
          </span>
          <span className="text-muted-foreground">/ {row.usersMax}</span>
        </span>
      ),
    },
    {
      key: 'actions',
      label: '',
      render: (_, row) => (
        <div className="flex items-center gap-1">
          <Button variant="ghost" size="icon" asChild>
            <Link href={`/admin/rooms/show/${row.id}`}>
              <Eye className="h-4 w-4" />
            </Link>
          </Button>
          <Button variant="ghost" size="icon" asChild>
            <Link href={`/admin/rooms/${row.id}/furni`}>
              <Sofa className="h-4 w-4" />
            </Link>
          </Button>
          {canEdit && (
            <Button variant="ghost" size="icon" asChild>
              <Link href={`/admin/rooms/edit/${row.id}`}>
                <Pencil className="h-4 w-4" />
              </Link>
            </Button>
          )}
        </div>
      ),
    },
  ]
}

interface RoomsTableProps {
  data: PaginatedResult<RoomRow>
  canEdit: boolean
}

export function RoomsTable({ data, canEdit }: RoomsTableProps) {
  return (
    <DataTable
      data={data}
      columns={getColumns(canEdit)}
      searchPlaceholder="Search by room name or owner..."
      exportUrl={canEdit ? '/api/admin/export?type=rooms' : undefined}
    />
  )
}