"use client"

import * as React from "react"
import { User, Users, ChevronRight } from "lucide-react"
import { Loading } from "@/components/ui/loading"
import { useGetTeamsQuery } from "@/api/rtk"
import { Card, CardHeader } from "@/components/settings/ui"
import { formatTeamLabelForUi } from "@/lib/deal-display"

export function TeamsTab() {
    const { data: teams, isLoading } = useGetTeamsQuery()

    if (isLoading) {
        return (
            <Loading className="p-12" size="lg" spinnerClassName="text-gray-400" />
        )
    }

    return (
        <div className="space-y-5">
            <Card>
                <CardHeader title="My Teams" description="Teams where you are a lead or a member" />
                <div className="p-6">
                    {!teams || teams.length === 0 ? (
                        <div className="text-center py-12 border-2 border-dashed border-gray-100 rounded-2xl">
                            <Users size={40} className="mx-auto text-gray-200 mb-3" />
                            <p className="text-[14px] font-semibold text-gray-900">No teams found</p>
                            <p className="text-[11px] text-gray-400 mt-1">You are not part of any teams yet.</p>
                        </div>
                    ) : (
                        <div className="grid grid-cols-1 gap-3">
                            {teams.map((team) => {
                                const leadUser = team.teamLead?.user
                                return (
                                    <div
                                        key={team.id}
                                        className="flex items-center justify-between p-4 rounded-xl border border-gray-100 bg-white/40 hover:bg-white/60 transition-colors group"
                                    >
                                        <div className="flex items-center gap-4">
                                            <div
                                                className="h-10 w-10 rounded-xl flex items-center justify-center text-white font-black text-xs shadow-sm"
                                                style={{ backgroundColor: team.color || "#6C63FF" }}
                                            >
                                                {team.name.substring(0, 2).toUpperCase()}
                                            </div>
                                            <div>
                                                <h3 className="text-[14px] font-bold text-gray-900">{formatTeamLabelForUi(team.name)}</h3>
                                                <div className="flex items-center gap-2 mt-1">
                                                    <span className="text-[11px] text-gray-400 flex items-center gap-1">
                                                        <User size={10} /> {team.memberCount || 0} members
                                                    </span>
                                                    <span className="text-gray-200 text-[10px]">•</span>
                                                    <span className="text-[11px] text-gray-400">
                                                        Lead: {leadUser?.name || "Unassigned"}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="flex items-center gap-4">
                                            <div className="text-right hidden sm:block">
                                                <p className="text-[12px] font-bold text-gray-900">
                                                    ${team.revenue?.toLocaleString() || "0"}
                                                </p>
                                                <p className="text-[10px] text-gray-400 uppercase font-bold tracking-tight">Revenue</p>
                                            </div>
                                            <div className="h-8 w-px bg-gray-100 hidden sm:block" />
                                            <div className="text-right hidden sm:block">
                                                <p className="text-[12px] font-bold text-gray-900">{team.dealCount || 0}</p>
                                                <p className="text-[10px] text-gray-400 uppercase font-bold tracking-tight">Sales</p>
                                            </div>
                                            <ChevronRight size={14} className="text-gray-300 group-hover:text-gray-500 transition-colors" />
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                    )}
                </div>
            </Card>
        </div>
    )
}