'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { deleteUser, updateUserRole } from '@/app/actions/admin'
import { toast } from 'sonner'
import { Trash2, Shield, ShieldOff } from 'lucide-react'
import { format } from 'date-fns'

export function UserList({ initialUsers }: { initialUsers: any[] }) {
  
  // Optimistic update could be implemented here, but standard is fine for admin
  const handleDelete = async (id: string) => {
    if (!confirm('Are you sure? This action cannot be undone.')) return
    try {
      await deleteUser(id)
      toast.success('User deleted')
    } catch (e) {
      toast.error('Failed to delete')
    }
  }

  const handleRoleToggle = async (user: any) => {
    const newRole = user.role === 'ADMIN' ? 'USER' : 'ADMIN'
    try {
      await updateUserRole(user.id, newRole)
      toast.success(`User role updated to ${newRole}`)
    } catch (e) {
      toast.error('Failed to update role')
    }
  }

  return (
    <div className="w-full overflow-auto">
      <table className="w-full caption-bottom text-sm text-left">
        <thead className="[&_tr]:border-b">
          <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
            <th className="h-12 px-4 align-middle font-medium text-muted-foreground">Name</th>
            <th className="h-12 px-4 align-middle font-medium text-muted-foreground">Email</th>
            <th className="h-12 px-4 align-middle font-medium text-muted-foreground">Role</th>
            <th className="h-12 px-4 align-middle font-medium text-muted-foreground">Created At</th>
            <th className="h-12 px-4 align-middle font-medium text-muted-foreground text-right">Actions</th>
          </tr>
        </thead>
        <tbody className="[&_tr:last-child]:border-0">
          {initialUsers.map((user) => (
            <tr key={user.id} className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
              <td className="p-4 align-middle font-medium">{user.name || 'N/A'}</td>
              <td className="p-4 align-middle">{user.email}</td>
              <td className="p-4 align-middle">
                <span className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${user.role === 'ADMIN' ? 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80' : 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80'}`}>
                  {user.role}
                </span>
              </td>
              <td className="p-4 align-middle">{format(new Date(user.createdAt), 'PP')}</td>
              <td className="p-4 align-middle text-right">
                <div className="flex justify-end gap-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => handleRoleToggle(user)}
                    title={user.role === 'ADMIN' ? "Demote to User" : "Promote to Admin"}
                  >
                    {user.role === 'ADMIN' ? <ShieldOff className="h-4 w-4" /> : <Shield className="h-4 w-4" />}
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => handleDelete(user.id)}
                    className="text-red-600 hover:text-red-900"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}