"use client"

import * as React from "react"
import Image from "next/image"
import { measureElement, useVirtualizer } from "@tanstack/react-virtual"
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
import { Team } from "./types"
import type { ApiUser } from "@/api/users/types"
import { Users, Crown, Mail, Shield, Briefcase, Loader2 } from "lucide-react"
import { cn } from "@/lib/utils"
import { formatTeamLabelForUi } from "@/lib/deal-display"
import { getTeamLeadUserId, getTeamMemberUserIds } from "@/lib/team-roster"
import { useGetTeamDealsQuery, useGetAeBdrPairsQuery, type TeamDeal } from "@/api/rtk/teams-api"
import { useAuthToken } from "@/hooks/use-auth-token"

/** Initial row height guess; `measureElement` refines per row (badges / budget lines). */
const TEAM_DEAL_ROW_ESTIMATE_PX = 88

function TeamDealRow({ deal }: { deal: TeamDeal }) {
    return (
        <div className="flex items-center gap-3 rounded-xl border border-gray-100 bg-gray-50 p-3 transition-colors hover:bg-gray-100/60">
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#6C63FF]/10">
                <Briefcase size={15} className="text-[#6C63FF]" />
            </div>
            <div className="min-w-0 flex-1">
                <p className="truncate text-[13px] font-semibold text-gray-900">
                    {deal.customerName || "Unnamed Deal"}
                </p>
                <p className="truncate text-[11px] text-gray-500">
                    {deal.pipelineName || "—"} · {deal.stage || "—"}
                </p>
            </div>
            <div className="flex shrink-0 flex-col items-end gap-1">
                {deal.leadStatus && (
                    <span className="rounded-full bg-[#6C63FF]/10 px-2 py-0.5 text-[10px] font-bold text-[#6C63FF]">
                        {deal.leadStatus}
                    </span>
                )}
                {deal.leadCost != null && (
                    <span className="text-[11px] font-semibold text-gray-600">
                        ${deal.leadCost.toLocaleString()}
                    </span>
                )}
                {deal.budget != null && (
                    <span className="text-[10px] font-medium text-gray-400">
                        Budget: ${deal.budget.toLocaleString()}
                    </span>
                )}
            </div>
        </div>
    )
}

function VirtualizedTeamDealsList({ deals }: { deals: TeamDeal[] }) {
    const parentRef = React.useRef<HTMLDivElement>(null)

    // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual scroll parent
    const virtualizer = useVirtualizer({
        count: deals.length,
        getScrollElement: () => parentRef.current,
        estimateSize: () => TEAM_DEAL_ROW_ESTIMATE_PX,
        overscan: 8,
        getItemKey: (index) => deals[index]?.id ?? index,
        measureElement,
    })

    React.useLayoutEffect(() => {
        virtualizer.measure()
        const id = requestAnimationFrame(() => virtualizer.measure())
        return () => cancelAnimationFrame(id)
    }, [deals.length, virtualizer])

    return (
        <div
            ref={parentRef}
            className="scrollbar-themed max-h-[min(320px,45vh)] min-h-[120px] w-full overflow-y-auto overflow-x-hidden pr-1"
        >
            <div
                className="relative w-full"
                style={{ height: `${virtualizer.getTotalSize()}px` }}
            >
                {virtualizer.getVirtualItems().map((vi) => {
                    const deal = deals[vi.index]
                    if (!deal) return null
                    return (
                        <div
                            key={deal.id}
                            data-index={vi.index}
                            ref={virtualizer.measureElement}
                            className="absolute left-0 right-0 top-0 w-full"
                            style={{
                                transform: `translateY(${vi.start}px)`,
                            }}
                        >
                            <div className="pb-2">
                                <TeamDealRow deal={deal} />
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

interface TeamViewDialogProps {
    team: Team | null
    isOpen: boolean
    onClose: () => void
    users: ApiUser[]
}

export function TeamViewDialog({ team, isOpen, onClose, users }: TeamViewDialogProps) {
    const [activeTab, setActiveTab] = React.useState<"members" | "deals">("members")
    const { token } = useAuthToken()
    const teamId = team?.id ?? ""

    const { data: deals = [], isLoading: isLoadingDeals } = useGetTeamDealsQuery(
        teamId,
        { skip: !teamId || !token || activeTab !== "deals" },
    )

    const { data: aeBdrPairs = [] } = useGetAeBdrPairsQuery(
        { teamId },
        { skip: !teamId || !token || !isOpen || activeTab !== "members" },
    )

    const pairedBdrByAeId = React.useMemo(
        () =>
            new Map(
                aeBdrPairs.map((p) => [
                    p.aeUserId,
                    { front: p.frontBdr?.name ?? null, support: p.supportBdr?.name ?? null },
                ]),
            ),
        [aeBdrPairs],
    )

    // Reset tab when dialog closes
    React.useEffect(() => {
        if (!isOpen) setActiveTab("members")
    }, [isOpen])

    if (!team) return null

    const getUserById = (id: string) => users.find(u => u.id === id)
    const leadUserId = getTeamLeadUserId(team)
    const leadUser =
        (team.teamLead?.user as ApiUser | undefined) ||
        (leadUserId ? getUserById(leadUserId) : null)

    const memberIds = getTeamMemberUserIds(team)

    // Prefer the detailed objects from the backend if available
    const memberUsers = (
        team["team-member-obj"]?.length
            ? (team["team-member-obj"] as ApiUser[]).map((m) => {
                  const local = getUserById(m.id)
                  return local ? { ...local, ...m } : m
              })
            : memberIds.map((id) => getUserById(id)).filter(Boolean)
    ).filter((u) => !leadUserId || u.id !== leadUserId) as ApiUser[]

    const getRoleName = (role: ApiUser["role"]) => {
        if (!role) return null
        return typeof role === "string" ? role : role.name
    }

    const isAeRole = (role: ApiUser["role"]) => {
        const name = getRoleName(role)?.trim().toLowerCase() ?? ""
        return name === "ae" || name === "account executive"
    }

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-[540px] w-[96vw] max-h-[90vh] p-0 overflow-hidden animate-in zoom-in-95 duration-200">
                {/* Header */}
                <div className="relative overflow-hidden">
                    <div className="absolute inset-0 opacity-90" style={{ backgroundColor: team.color || "#6C63FF" }} />
                    <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(255,255,255,0.15),transparent_60%)]" />
                    <div className="relative px-7 py-5 flex items-center gap-4">
                        <div className="h-12 w-12 rounded-xl bg-white/20 border border-white/30 flex items-center justify-center shrink-0">
                            <Users size={22} className="text-white" />
                        </div>
                        <div className="min-w-0 flex-1">
                            <DialogTitle className="text-[20px] font-extrabold text-white font-['Lexend'] leading-tight truncate">
                                {formatTeamLabelForUi(team.name)}
                            </DialogTitle>
                            <p className="text-[12px] text-white/75 font-medium mt-0.5">
                                {memberUsers.length} member{memberUsers.length !== 1 ? "s" : ""}
                            </p>
                        </div>
                        <div className="h-4 w-4 rounded-full bg-white/30 border-2 border-white/60 shrink-0" />
                    </div>

                    {/* Tabs */}
                    <div className="relative flex border-t border-white/20">
                        {(["members", "deals"] as const).map((tab) => (
                            <button
                                key={tab}
                                onClick={() => setActiveTab(tab)}
                                className={cn(
                                    "flex-1 py-2.5 text-[12px] font-bold uppercase tracking-wider font-['Lexend_Deca'] transition-colors",
                                    activeTab === tab
                                        ? "text-white border-b-2 border-white"
                                        : "text-white/50 hover:text-white/80"
                                )}
                            >
                                {tab === "members" ? (
                                    <span className="flex items-center justify-center gap-1.5">
                                        <Users size={12} /> Members
                                    </span>
                                ) : (
                                    <span className="flex items-center justify-center gap-1.5">
                                        <Briefcase size={12} /> Deals
                                    </span>
                                )}
                            </button>
                        ))}
                    </div>
                </div>

                {/* Body */}
                <div className="overflow-y-auto max-h-[calc(90vh-200px)] scrollbar-themed px-7 py-5">
                    {activeTab === "members" && (
                        <div className="space-y-5">
                            {/* Team Lead */}
                            <section>
                                <p className="text-[10px] font-black text-gray-400 uppercase tracking-[0.09em] font-['Lexend_Deca'] mb-3">Team Lead</p>
                                {leadUser ? (
                                    <div className="flex items-center gap-3 p-3 rounded-xl bg-yellow-50 border border-yellow-100">
                                        <div className="relative h-10 w-10 rounded-full bg-gradient-to-br from-yellow-400 to-orange-400 flex items-center justify-center text-white text-[12px] font-black shrink-0 overflow-hidden">
                                            {leadUser.avatar?.url ? (
                                                <Image src={leadUser.avatar.url} alt={leadUser.name} fill sizes="40px" className="object-cover" />
                                            ) : (
                                                leadUser.name?.slice(0, 2).toUpperCase()
                                            )}
                                        </div>
                                        <div className="flex-1 min-w-0">
                                            <p className="text-[13px] font-bold text-gray-900 flex items-center gap-1.5">
                                                {leadUser.name} <Crown size={13} className="text-yellow-500" />
                                            </p>
                                            <p className="text-[11px] text-gray-500 flex items-center gap-1 mt-0.5">
                                                <Mail size={10} /> {leadUser.email}
                                            </p>
                                        </div>
                                        {getRoleName(leadUser.role) && (
                                            <span className="text-[10px] font-bold px-2 py-1 rounded-lg bg-yellow-100 text-yellow-700 shrink-0">
                                                {getRoleName(leadUser.role)}
                                            </span>
                                        )}
                                    </div>
                                ) : (
                                    <p className="text-[13px] text-gray-400 italic">No lead assigned</p>
                                )}
                            </section>

                            {/* Members */}
                            <section>
                                <p className="text-[10px] font-black text-gray-400 uppercase tracking-[0.09em] font-['Lexend_Deca'] mb-3">
                                    Members ({memberUsers.length})
                                </p>
                                {memberUsers.length === 0 ? (
                                    <p className="text-[13px] text-gray-400 italic">No members yet</p>
                                ) : (
                                    <div className="space-y-2 max-h-[260px] overflow-y-auto scrollbar-themed pr-1">
                                        {memberUsers.map((user) => (
                                                <div key={user.id} className="flex items-center gap-3 p-3 rounded-xl border bg-gray-50 border-gray-100">
                                                    <div className="relative h-9 w-9 rounded-full bg-gradient-to-br from-[#6C63FF] to-[#8B83FF] flex items-center justify-center text-white text-[11px] font-black shrink-0 overflow-hidden">
                                                        {user.avatar?.url ? (
                                                            <Image src={user.avatar.url} alt={user.name} fill sizes="36px" className="object-cover" />
                                                        ) : (
                                                            user.name?.slice(0, 2).toUpperCase()
                                                        )}
                                                    </div>
                                                    <div className="flex-1 min-w-0">
                                                        <p className="text-[13px] font-semibold text-gray-900 truncate">
                                                            {user.name}
                                                        </p>
                                                        <p className="text-[11px] text-gray-500 truncate">{user.email}</p>
                                                        {isAeRole(user.role) &&
                                                            (pairedBdrByAeId.get(user.id)?.front ||
                                                                pairedBdrByAeId.get(user.id)?.support) && (
                                                            <div className="mt-0.5 space-y-0.5">
                                                                {pairedBdrByAeId.get(user.id)?.front && (
                                                                    <p className="text-[10px] text-[#6C63FF] font-medium truncate">
                                                                        Front BDR: {pairedBdrByAeId.get(user.id)?.front}
                                                                    </p>
                                                                )}
                                                                {pairedBdrByAeId.get(user.id)?.support && (
                                                                    <p className="text-[10px] text-emerald-600 font-medium truncate">
                                                                        Support BDR: {pairedBdrByAeId.get(user.id)?.support}
                                                                    </p>
                                                                )}
                                                            </div>
                                                        )}
                                                    </div>
                                                    {getRoleName(user.role) && (
                                                        <span className="text-[10px] font-bold px-2 py-1 rounded-lg bg-gray-100 text-gray-600 shrink-0 flex items-center gap-1">
                                                            <Shield size={9} /> {getRoleName(user.role)}
                                                        </span>
                                                    )}
                                                </div>
                                        ))}
                                    </div>
                                )}
                            </section>
                        </div>
                    )}

                    {activeTab === "deals" && (
                        <div>
                            {isLoadingDeals ? (
                                <div className="flex items-center justify-center py-12 gap-2 text-gray-400">
                                    <Loader2 size={18} className="animate-spin" />
                                    <span className="text-[13px]">Loading deals...</span>
                                </div>
                            ) : deals.length === 0 ? (
                                <div className="text-center py-12">
                                    <Briefcase size={32} className="mx-auto text-gray-200 mb-3" />
                                    <p className="text-[13px] text-gray-400 font-medium">No deals for this team</p>
                                </div>
                            ) : (
                                <VirtualizedTeamDealsList deals={deals} />
                            )}
                            {!isLoadingDeals && deals.length > 0 && (
                                <div className="mt-3 flex items-center justify-between">
                                    <span className="text-[11px] text-gray-400 font-['Lexend_Deca']">
                                        {deals.length} deal{deals.length !== 1 ? "s" : ""} total
                                    </span>
                                    <div className="flex items-center gap-3">
                                        {deals.some(d => d.leadCost) && (
                                            <span className="text-[11px] font-semibold text-gray-600 font-['Lexend_Deca']">
                                                Revenue: ${deals.reduce((s, d) => s + (d.leadCost || 0), 0).toLocaleString()}
                                            </span>
                                        )}
                                        {(team.totalBudget ?? 0) > 0 && (
                                            <span className="text-[11px] font-semibold text-[#6C63FF] font-['Lexend_Deca']">
                                                Budget: ${(team.totalBudget ?? 0).toLocaleString()}
                                            </span>
                                        )}
                                    </div>
                                </div>
                            )}
                        </div>
                    )}
                </div>

                {/* Footer */}
                <div className="border-t border-gray-100 px-7 py-3.5 flex items-center justify-between bg-gray-50/50">
                    <div className="flex items-center gap-2">
                        <div className="h-3 w-3 rounded-full" style={{ backgroundColor: team.color || "#6C63FF" }} />
                        <span className="text-[11px] text-gray-400 font-['Lexend_Deca']">Team color</span>
                    </div>
                    <button
                        onClick={onClose}
                        className="text-[13px] font-semibold text-gray-500 hover:text-gray-800 transition-colors"
                    >
                        Close
                    </button>
                </div>
            </DialogContent>
        </Dialog>
    )
}