"use client"

import * as React from "react"
import { ChevronRight, Pencil, Plus, Trash2, Loader2 } from "lucide-react"
import { useGetUsersQuery } from "@/api/rtk/users-api"
import { useAppSelector } from "@/store/hooks"
import { useAuthToken } from "@/hooks/use-auth-token"
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
    DialogClose,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { cn } from "@/lib/utils"

// ── Shared constants ────────────────────────────────────────────────────────

export const TEAM_COLORS = [
    "#6C63FF", "#22C55E", "#F59E0B", "#EF4444",
    "#0EA5E9", "#EC4899", "#14B8A6", "#8B5CF6",
    "#F97316", "#6B7280",
]

// ALL_MEMBERS is replaced by dynamic query

// ── Types ───────────────────────────────────────────────────────────────────

export interface Team {
    id: string
    name: string
    color: string
    lead?: string
    members?: string[]
}

export interface TeamFormData {
    name: string
    color: string
    lead: string
    members: string[]
}

export interface TeamDialogProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    /** null = Add mode, non-null = Edit mode */
    editingTeam: Team | null
    onSave: (data: TeamFormData) => void
    onDelete: (id: string) => void
    isLoading?: boolean
}

// ── Component ───────────────────────────────────────────────────────────────

export function TeamDialog({
    open,
    onOpenChange,
    editingTeam,
    onSave,
    onDelete,
    isLoading = false,
}: TeamDialogProps) {
    // Internal form state — reset whenever the dialog opens or switches mode
    const [formName, setFormName] = React.useState("")
    const [formColor, setFormColor] = React.useState(TEAM_COLORS[0])
    const [formLead, setFormLead] = React.useState("")
    const [formMembers, setFormMembers] = React.useState<string[]>([])
    const [memberDropOpen, setMemberDropOpen] = React.useState(false)

    const { token } = useAuthToken()
    const { data: usersResponse } = useGetUsersQuery({ limit: 500 }, { skip: !token })

    const ALL_MEMBERS = React.useMemo(() => {
        const users = usersResponse?.data ?? []
        return users.map(u => {
            const initials = u.name.split(/\s+/).map(s => s[0]).join('').slice(0, 2).toUpperCase()
            const roleName = typeof u.role === 'object' && u.role ? u.role.name : (u.role || "User")
            return {
                id: u.id,
                name: u.name,
                initials: initials || "??",
                role: roleName
            }
        })
    }, [usersResponse?.data])

    // Sync form values whenever the dialog opens or editingTeam changes
    React.useEffect(() => {
        if (open) {
            setFormName(editingTeam?.name ?? "")
            setFormColor(editingTeam?.color ?? TEAM_COLORS[0])
            setFormLead(editingTeam?.lead ?? "")
            setFormMembers(editingTeam?.members ?? [])
            setMemberDropOpen(false)
        }
    }, [open, editingTeam])

    const handleSave = () => {
        if (!formName.trim()) return
        onSave({ name: formName.trim(), color: formColor, lead: formLead.trim(), members: formMembers })
    }

    const handleOpenChange = (o: boolean) => {
        if (!o) setMemberDropOpen(false)
        onOpenChange(o)
    }

    const toggleMember = (id: string) =>
        setFormMembers(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id])

    const removeMember = (id: string) =>
        setFormMembers(prev => prev.filter(x => x !== id))

    const isEditMode = editingTeam !== null

    return (
        <Dialog open={open} onOpenChange={handleOpenChange}>
            <DialogContent className="sm:max-w-[420px] p-0 overflow-hidden gap-0">

                {/* Dynamic color stripe */}
                <div
                    className="h-1.5 w-full transition-colors duration-200"
                    style={{ backgroundColor: formColor }}
                />

                <div className="p-6">
                    <DialogHeader className="mb-5">
                        <DialogTitle className="text-[16px] font-extrabold font-['Lexend'] text-text">
                            {isEditMode ? "Edit Team" : "Add New Team"}
                        </DialogTitle>
                        <p className="text-[12px] text-gray-500 mt-0.5">
                            {isEditMode
                                ? "Update team details below."
                                : "Set up a new team and assign it a color."}
                        </p>
                    </DialogHeader>

                    <div className="flex flex-col gap-4">

                        {/* ── Team Name ── */}
                        <div className="flex flex-col gap-1.5">
                            <Label className="text-[12px] font-semibold text-gray-700">Team Name</Label>
                            <Input
                                placeholder="e.g. Team Delta"
                                value={formName}
                                onChange={(e) => setFormName(e.target.value)}
                                onKeyDown={(e) => e.key === "Enter" && handleSave()}
                                autoFocus
                            />
                        </div>

                        {/* ── Lead Initials ── */}
                        <div className="flex flex-col gap-1.5">
                            <Label className="text-[12px] font-semibold text-gray-700">
                                Lead Initials{" "}
                                <span className="font-normal text-gray-400">(optional)</span>
                            </Label>
                            <Input
                                placeholder="e.g. JD"
                                maxLength={3}
                                value={formLead}
                                onChange={(e) => setFormLead(e.target.value.toUpperCase())}
                                className="uppercase"
                            />
                        </div>

                        {/* ── Members Multi-Select ── */}
                        <div className="flex flex-col gap-1.5">
                            <Label className="text-[12px] font-semibold text-gray-700">
                                Members{" "}
                                <span className="font-normal text-gray-400">
                                    ({formMembers.length} selected)
                                </span>
                            </Label>

                            {/* Trigger */}
                            <div className="relative">
                                <button
                                    type="button"
                                    onClick={() => setMemberDropOpen(v => !v)}
                                    className="w-full h-10 flex items-center justify-between px-3 rounded-xl border border-border bg-bg/50 text-[13px] font-['Lexend_Deca'] hover:border-accent transition-all duration-150"
                                >
                                    <span className={formMembers.length === 0 ? "text-gray-400" : "text-text"}>
                                        {formMembers.length === 0
                                            ? "Select members..."
                                            : `${formMembers.length} member${formMembers.length > 1 ? "s" : ""} selected`}
                                    </span>
                                    <ChevronRight
                                        size={14}
                                        className={cn(
                                            "text-gray-400 transition-transform duration-150",
                                            memberDropOpen && "rotate-90"
                                        )}
                                    />
                                </button>

                                {/* Dropdown list */}
                                {memberDropOpen && (
                                    <div className="absolute top-[calc(100%+4px)] left-0 right-0 z-50 bg-white border border-border rounded-xl shadow-lg overflow-hidden animate-in fade-in zoom-in-95 duration-150">
                                        {ALL_MEMBERS.map((m) => {
                                            const selected = formMembers.includes(m.id)
                                            return (
                                                <button
                                                    key={m.id}
                                                    type="button"
                                                    onClick={() => toggleMember(m.id)}
                                                    className={cn(
                                                        "w-full flex items-center gap-3 px-3 py-2 text-left transition-colors duration-100",
                                                        selected
                                                            ? "bg-accent/5 text-accent"
                                                            : "hover:bg-gray-50 text-text"
                                                    )}
                                                >
                                                    {/* Avatar */}
                                                    <div
                                                        className="size-7 rounded-full flex items-center justify-center text-white text-[10px] font-bold shrink-0"
                                                        style={{ backgroundColor: formColor }}
                                                    >
                                                        {m.initials}
                                                    </div>
                                                    <div className="flex flex-col flex-1 min-w-0">
                                                        <span className="text-[12px] font-semibold font-['Lexend_Deca'] truncate">
                                                            {m.name}
                                                        </span>
                                                        <span className="text-[10px] text-gray-400">
                                                            {m.role}
                                                        </span>
                                                    </div>
                                                    {/* Checkmark */}
                                                    {selected && (
                                                        <div className="size-4 rounded-full bg-accent flex items-center justify-center shrink-0">
                                                            <svg width="9" height="7" viewBox="0 0 9 7" fill="none">
                                                                <path
                                                                    d="M1 3.5L3.5 6L8 1"
                                                                    stroke="white"
                                                                    strokeWidth="1.5"
                                                                    strokeLinecap="round"
                                                                    strokeLinejoin="round"
                                                                />
                                                            </svg>
                                                        </div>
                                                    )}
                                                </button>
                                            )
                                        })}
                                    </div>
                                )}
                            </div>

                            {/* Selected member chips */}
                            {formMembers.length > 0 && (
                                <div className="flex flex-wrap gap-1.5 mt-0.5">
                                    {formMembers.map(id => {
                                        const m = ALL_MEMBERS.find(x => x.id === id)
                                        if (!m) return null;
                                        return (
                                            <span
                                                key={id}
                                                className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-semibold font-['Lexend_Deca'] bg-accent/10 text-accent"
                                            >
                                                {m.initials}
                                                <button
                                                    onClick={() => removeMember(id)}
                                                    className="hover:text-red-500 transition-colors leading-none"
                                                >
                                                    ×
                                                </button>
                                            </span>
                                        )
                                    })}
                                </div>
                            )}
                        </div>

                        {/* ── Color Picker ── */}
                        <div className="flex flex-col gap-2">
                            <Label className="text-[12px] font-semibold text-gray-700">Team Color</Label>
                            <div className="flex items-center gap-2 flex-wrap">
                                {TEAM_COLORS.map((c) => (
                                    <button
                                        key={c}
                                        onClick={() => setFormColor(c)}
                                        className={cn(
                                            "size-7 rounded-full transition-all duration-150 ring-offset-2",
                                            formColor === c
                                                ? "ring-2 ring-accent scale-110"
                                                : "hover:scale-105 opacity-70 hover:opacity-100"
                                        )}
                                        style={{ backgroundColor: c }}
                                    />
                                ))}
                            </div>
                        </div>

                        {/* ── Live Preview ── */}
                        <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-gray-50 border border-border">
                            <div
                                className="size-2.5 rounded-full shrink-0 transition-colors duration-200"
                                style={{ backgroundColor: formColor }}
                            />
                            <span className="text-[13px] font-['Lexend_Deca'] font-semibold text-text">
                                {formName || (
                                    <span className="text-gray-400 font-normal">Team Name</span>
                                )}
                            </span>
                            {formLead && (
                                <span className="ml-auto text-[10px] font-bold text-gray-400 font-['Lexend_Deca']">
                                    {formLead}
                                </span>
                            )}
                            {formMembers.length > 0 && !formLead && (
                                <span className="ml-auto text-[10px] text-gray-400 font-['Lexend_Deca']">
                                    {formMembers.length} member{formMembers.length > 1 && "s"}
                                </span>
                            )}
                        </div>
                    </div>

                    {/* ── Footer ── */}
                    <DialogFooter className="mt-6 flex items-center gap-2">
                        {isEditMode && editingTeam!.id !== "all" && (
                            <Button
                                variant="ghost"
                                size="sm"
                                disabled={isLoading}
                                className="text-red-500 hover:text-red-600 hover:bg-red-50 gap-1.5 mr-auto"
                                onClick={() => onDelete(editingTeam!.id)}
                            >
                                {isLoading ? <Loader2 size={13} className="animate-spin" /> : <Trash2 size={13} />}
                                {isLoading ? "Deleting..." : "Delete"}
                            </Button>
                        )}
                        <DialogClose asChild>
                            <Button variant="outline" size="sm" disabled={isLoading}>Cancel</Button>
                        </DialogClose>
                        <Button
                            size="sm"
                            onClick={handleSave}
                            disabled={!formName.trim() || isLoading}
                            className="gap-1.5"
                        >
                            {isLoading ? (
                                <Loader2 size={13} className="animate-spin" />
                            ) : isEditMode ? (
                                <Pencil size={13} />
                            ) : (
                                <Plus size={13} />
                            )}
                            {isLoading ? (isEditMode ? "Saving..." : "Adding...") : (isEditMode ? "Save Changes" : "Add Team")}
                        </Button>
                    </DialogFooter>
                </div>
            </DialogContent>
        </Dialog>
    )
}