"use client"

import * as React from "react"
import Image from "next/image"
import { Team } from "./types"
import { ChevronDown, ChevronUp, Users, Crown, Pencil, Trash2, Eye } from "lucide-react"
import { cn } from "@/lib/utils"
import { formatTeamLabelForUi, formatCurrencyCompact } from "@/lib/deal-display"
import type { ApiUser } from "@/api/users/types"
import { Button } from "@/components/ui/button"
import { Can } from "@/components/providers/ability-provider"

interface TeamListViewProps {
    teams: Team[]
    users: ApiUser[]
    onOpen: (team: Team) => void
    onEdit?: (team: Team) => void
    onDelete?: (team: Team) => void
    sortCol: string
    sortDir: 1 | -1
    onSort: (col: string) => void
    isSearchActive: boolean
    selectedId: string | null
    onSelectId: (id: string | null) => void
}

export function TeamListView({
    teams,
    users,
    onOpen,
    onEdit,
    onDelete,
    sortCol,
    sortDir,
    onSort,
    isSearchActive,
    selectedId,
    onSelectId
}: TeamListViewProps) {
    const SortIcon = ({ col }: { col: string }) => {
        if (sortCol !== col) return <ChevronDown size={14} className="opacity-0 group-hover:opacity-30 transition-opacity" />
        return sortDir === 1
            ? <ChevronUp size={14} className="text-[#6C63FF] animate-in slide-in-from-bottom-1 fade-in duration-200" />
            : <ChevronDown size={14} className="text-[#6C63FF] animate-in slide-in-from-top-1 fade-in duration-200" />
    }

    const getUserById = (id: string) => users.find(u => u.id === id)

    return (
        <div className="rounded-2xl border border-white/40 bg-white/50 dark:bg-white/10 backdrop-blur-[15px] shadow-[0px_2px_20px_0px_rgba(0,0,0,0.06)] overflow-x-auto scrollbar-themed">
            {/* Header */}
            <div className="grid grid-cols-[1.4fr_1.4fr_1.5fr_1fr_1fr_1fr_1fr_120px] gap-4 px-5 py-3.5 bg-gray-50/80 dark:bg-gray-800/20 border-b border-gray-200/50 min-w-[950px]">
                <button
                    onClick={() => onSort("name")}
                    className="group flex items-center gap-1.5 text-[11px] font-black text-gray-500 uppercase tracking-[0.09em] font-['Lexend_Deca'] hover:text-gray-700 transition-colors text-left"
                >
                    Team Name <SortIcon col="name" />
                </button>
                <button
                    onClick={() => onSort("division")}
                    className="group flex items-center gap-1.5 text-[11px] font-black text-gray-500 uppercase tracking-[0.09em] font-['Lexend_Deca'] hover:text-gray-700 transition-colors text-left"
                >
                    Division <SortIcon col="division" />
                </button>
                <button
                    onClick={() => onSort("lead")}
                    className="group flex items-center gap-1.5 text-[11px] font-black text-gray-500 uppercase tracking-[0.09em] font-['Lexend_Deca'] hover:text-gray-700 transition-colors text-left"
                >
                    Team Lead <SortIcon col="lead" />
                </button>
                <button
                    onClick={() => onSort("memberCount")}
                    className="group flex items-center gap-1.5 text-[11px] font-black text-gray-500 uppercase tracking-[0.09em] font-['Lexend_Deca'] hover:text-gray-700 transition-colors text-left"
                >
                    Members <SortIcon col="memberCount" />
                </button>
                <button
                    onClick={() => onSort("dealCount")}
                    className="group flex items-center gap-1.5 text-[11px] font-black text-gray-500 uppercase tracking-[0.09em] font-['Lexend_Deca'] hover:text-gray-700 transition-colors text-left"
                >
                    Leads <SortIcon col="dealCount" />
                </button>
                <button
                    onClick={() => onSort("revenue")}
                    className="group flex items-center gap-1.5 text-[11px] font-black text-gray-500 uppercase tracking-[0.09em] font-['Lexend_Deca'] hover:text-gray-700 transition-colors text-left"
                >
                    Revenue <SortIcon col="revenue" />
                </button>
                <button
                    onClick={() => onSort("totalBudget")}
                    className="group flex items-center gap-1.5 text-[11px] font-black text-gray-500 uppercase tracking-[0.09em] font-['Lexend_Deca'] hover:text-gray-700 transition-colors text-left"
                >
                    Budget <SortIcon col="totalBudget" />
                </button>
                <div className="flex items-center text-[11px] font-black text-gray-500 uppercase tracking-[0.09em] font-['Lexend_Deca']">
                    Actions
                </div>
            </div>

            {/* Body */}
            <div className="divide-y divide-gray-100/50">
                {teams.map((team) => {
                    const isSelected = selectedId === team.id
                    const leadUser = (team.teamLead?.user as any) || (team.lead ? getUserById(team.lead) : null)

                    return (
                        <div
                            key={team.id}
                            onClick={() => {
                                if (isSearchActive) {
                                    onSelectId(isSelected ? null : team.id)
                                } else {
                                    onOpen(team)
                                }
                            }}
                            className={cn(
                                "grid grid-cols-[1.4fr_1.4fr_1.5fr_1fr_1fr_1fr_1fr_120px] gap-4 px-5 py-4 hover:bg-gray-50/60 dark:hover:bg-gray-800/10 transition-colors cursor-pointer min-w-[950px]",
                                isSelected && "bg-accent/5 border-l-4 border-l-accent"
                            )}
                        >
                            {/* Team Name */}
                            <div className="flex items-center gap-3 min-w-0">
                                <div
                                    className="h-10 w-10 rounded-xl flex items-center justify-center text-white text-[14px] font-black shrink-0 shadow-sm"
                                    style={{ backgroundColor: team.color || "#6C63FF" }}
                                >
                                    <Users size={18} />
                                </div>
                                <div className="min-w-0">
                                    <p className="text-[14px] font-bold text-gray-900 truncate font-['Lexend']">
                                        {formatTeamLabelForUi(team.name)}
                                    </p>
                                    <p className="text-[11px] text-gray-500 font-['Lexend_Deca']">
                                        {team.memberCount ?? 0} member{(team.memberCount ?? 0) !== 1 ? 's' : ''}
                                    </p>
                                </div>
                            </div>

                            {/* Division */}
                            <div className="flex items-center min-w-0">
                                <span className="text-[13px] font-semibold text-gray-700 truncate">
                                    {team.division?.name ?? "—"}
                                </span>
                            </div>

                            {/* Team Lead */}
                            <div className="flex items-center gap-2 min-w-0">
                                {leadUser ? (
                                    <>
                                        <div className="relative h-8 w-8 rounded-full bg-linear-to-br from-[#6C63FF] to-[#8B83FF] flex items-center justify-center text-white text-[11px] font-black shrink-0 overflow-hidden">
                                            {leadUser.avatar ? (
                                                <Image
                                                    src={typeof leadUser.avatar === 'string' ? leadUser.avatar : leadUser.avatar.url}
                                                    alt={leadUser.name}
                                                    fill
                                                    sizes="32px"
                                                    className="object-cover"
                                                />
                                            ) : (
                                                leadUser.name?.slice(0, 2).toUpperCase()
                                            )}
                                        </div>
                                        <div className="min-w-0">
                                            <p className="text-[13px] font-semibold text-gray-900 truncate flex items-center gap-1">
                                                {leadUser.name}
                                                <Crown size={12} className="text-yellow-500" />
                                            </p>
                                        </div>
                                    </>
                                ) : (
                                    <span className="text-[13px] text-gray-400 italic">No lead</span>
                                )}
                            </div>

                            {/* Members */}
                            <div className="flex items-center">
                                <span className="text-[14px] font-semibold text-gray-900">
                                    {team.memberCount ?? 0}
                                </span>
                            </div>

                            {/* Leads */}
                            <div className="flex items-center">
                                <span className="text-[14px] font-semibold text-gray-900">
                                    {team.dealCount ?? 0}
                                </span>
                            </div>

                            {/* Revenue */}
                            <div className="flex items-center">
                                <span className="text-[14px] font-semibold text-gray-900">
                                    {formatCurrencyCompact(team.revenue ?? 0)}
                                </span>
                            </div>

                            {/* Budget */}
                            <div className="flex flex-col justify-center">
                                <span className="text-[14px] font-semibold text-gray-900">
                                    {formatCurrencyCompact(team.totalBudget ?? 0)}
                                </span>
                                {(team.totalBudget ?? 0) > 0 && (team.dealCount ?? 0) > 0 && (
                                    <span className="text-[10px] text-gray-400 font-['Lexend_Deca']">
                                        avg {formatCurrencyCompact(Math.round((team.totalBudget ?? 0) / (team.dealCount ?? 1)))}
                                    </span>
                                )}
                            </div>

                            {/* Actions */}
                            <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                                <Can action="read" subject="team">
                                    <Button
                                        variant="ghost"
                                        size="sm"
                                        onClick={() => onOpen(team)}
                                        className="h-8 px-2 hover:bg-purple-50 hover:text-purple-600"
                                        title="View team"
                                    >
                                        <Eye size={14} />
                                    </Button>
                                </Can>
                                {onEdit ? (
                                    <Can action="update" subject="team">
                                        <Button
                                            variant="ghost"
                                            size="sm"
                                            onClick={() => onEdit(team)}
                                            className="h-8 px-2 hover:bg-blue-50 hover:text-blue-600"
                                            title="Edit team"
                                        >
                                            <Pencil size={14} />
                                        </Button>
                                    </Can>
                                ) : null}
                                {onDelete ? (
                                    <Can action="delete" subject="team">
                                        <Button
                                            variant="ghost"
                                            size="sm"
                                            onClick={() => onDelete(team)}
                                            className="h-8 px-2 hover:bg-red-50 hover:text-red-600"
                                            title="Delete team"
                                        >
                                            <Trash2 size={14} />
                                        </Button>
                                    </Can>
                                ) : null}
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}