"use client"
import * as React from "react"
import { User } from "./types"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Eye, Trash2, ArrowUp, ArrowDown, Mail, Shield } from "lucide-react"
import { cn } from "@/lib/utils"
import { formatTeamLabelForUi } from "@/lib/deal-display"

function SortIcon({
    col,
    sortCol,
    sortDir,
}: {
    col: string
    sortCol: string
    sortDir: 1 | -1
}) {
    if (sortCol !== col) return null
    return sortDir === 1 ? (
        <ArrowUp size={12} className="ml-1 inline" />
    ) : (
        <ArrowDown size={12} className="ml-1 inline" />
    )
}

interface UserListViewProps {
    users: User[]
    onOpen: (user: User) => void
    onDelete: (id: number) => void
    sortCol: string
    sortDir: 1 | -1
    onSort: (col: string) => void
}

export function UserListView({ users, onOpen, onDelete, sortCol, sortDir, onSort }: UserListViewProps) {
    return (
        <div className="bg-white rounded-[18px] border border-border shadow-sm overflow-hidden">
            <Table>
                <TableHeader>
                    <TableRow className="hover:bg-transparent">
                        <TableHead className="w-[280px] cursor-pointer" onClick={() => onSort('name')}>
                            User <SortIcon col="name" sortCol={sortCol} sortDir={sortDir} />
                        </TableHead>
                        <TableHead className="cursor-pointer" onClick={() => onSort('role')}>
                            Role <SortIcon col="role" sortCol={sortCol} sortDir={sortDir} />
                        </TableHead>
                        <TableHead className="cursor-pointer" onClick={() => onSort('team')}>
                            Team <SortIcon col="team" sortCol={sortCol} sortDir={sortDir} />
                        </TableHead>
                        <TableHead className="cursor-pointer" onClick={() => onSort('status')}>
                            Status <SortIcon col="status" sortCol={sortCol} sortDir={sortDir} />
                        </TableHead>
                        <TableHead className="cursor-pointer" onClick={() => onSort('lastLogin')}>
                            Last Login <SortIcon col="lastLogin" sortCol={sortCol} sortDir={sortDir} />
                        </TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {users.map((user) => (
                        <TableRow key={user.id} onClick={() => onOpen(user)}>
                            <TableCell>
                                <div className="flex items-center gap-3">
                                    <div
                                        className="size-9 rounded-full flex items-center justify-center text-[11px] font-bold text-white shrink-0 shadow-sm"
                                        style={{ backgroundColor: user.avatarColor }}
                                    >
                                        {user.initials}
                                    </div>
                                    <div className="flex flex-col min-w-0">
                                        <span className="text-[13px] font-bold text-text truncate font-['Lexend']">{user.name}</span>
                                        <span className="text-[11px] text-gray-700 truncate">{user.email}</span>
                                    </div>
                                </div>
                            </TableCell>
                            <TableCell>
                                <div className="flex items-center gap-1.5">
                                    <Shield size={14} className={cn(
                                        user.role === 'Admin' ? "text-red" : "text-accent"
                                    )} />
                                    <span className="text-[12px] font-semibold text-text">{user.role}</span>
                                </div>
                            </TableCell>
                            <TableCell>
                                <span className={cn(
                                    "text-[10px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider",
                                    user.team === 'alpha' ? "bg-accent/10 text-accent" :
                                        user.team === 'beta' ? "bg-green-500/10 text-green-600" :
                                            user.team === 'gamma' ? "bg-orange-500/10 text-orange-600" :
                                                "bg-gray-500/10 text-gray-600"
                                )}>
                                    {user.team
                                        ? `Team ${formatTeamLabelForUi(user.team)}`
                                        : "Team —"}
                                </span>
                            </TableCell>
                            <TableCell>
                                <div className="flex items-center gap-1.5">
                                    <div className={cn(
                                        "size-1.5 rounded-full",
                                        user.status === 'Active' ? "bg-green-500 glow-green" :
                                            user.status === 'Pending' ? "bg-orange-500" : "bg-gray-400"
                                    )} />
                                    <span className="text-[12px] font-medium text-text">{user.status}</span>
                                </div>
                            </TableCell>
                            <TableCell>
                                <span className="text-[12px] text-gray-700 font-['Lexend_Deca']">{user.lastLogin}</span>
                            </TableCell>
                            <TableCell className="text-right">
                                <div className="flex items-center justify-end gap-1 opacity-100">
                                    <Button
                                        variant="ghost"
                                        size="icon-xs"
                                        onClick={(e) => { e.stopPropagation(); onOpen(user); }}
                                        className="text-gray-700 hover:text-accent"
                                    >
                                        <Eye size={14} />
                                    </Button>
                                    <Button
                                        variant="ghost"
                                        size="icon-xs"
                                        onClick={(e) => { e.stopPropagation(); onDelete(user.id); }}
                                        className="text-gray-700 hover:text-red"
                                    >
                                        <Trash2 size={14} />
                                    </Button>
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    )
}