"use client"

import * as React from "react"
import { Users, ArrowRight } from "lucide-react"
import { TeamMetric } from "./types"
import { NoDataFound } from "@/components/ui/no-data-found"

interface TeamPerformanceGridProps {
    teams: TeamMetric[]
}

export const TeamPerformanceGrid = React.memo(function TeamPerformanceGrid({ teams }: TeamPerformanceGridProps) {
    return (
        <div className="flex flex-col gap-3">
            <div className="flex items-center justify-between ml-1">
                <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] flex items-center gap-2">
                    Team vs Team Performance <ArrowRight size={14} className="text-gray-700" />
                </h3>
                <span className="text-[10px] font-bold text-gray-700 uppercase tracking-widest font-['Lexend_Deca']">Real-time Sync</span>
            </div>
            {!teams.length ? (
                <NoDataFound message="No team metrics" description="Teams with members and closed deals will appear here." size="sm" />
            ) : null}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {teams.map((t) => (
                    <div
                        key={t.id}
                        className="bg-[rgba(255,255,255,0.45)] dark:bg-[rgba(244,246,255,0.4)] backdrop-blur-[15px] border border-white/60 rounded-xl p-5 shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)] hover:shadow-[0px_6px_25px_0px_rgba(108,99,255,0.1)] transition-all duration-300 hover:scale-[1.01] border-l-4"
                        style={{ borderLeftColor: t.color }}
                    >
                        <div className="flex items-center justify-between mb-5">
                            <div className="flex flex-col">
                                <span className="text-[15px] font-extrabold text-text leading-tight">{t.name}</span>
                                <span className="text-[11px] text-gray-700/80 font-medium">Lead: {t.lead?.split(' ')[0] || 'Unassigned'}</span>
                            </div>
                            <div className="size-8 rounded-full bg-accent/5 text-accent flex items-center justify-center">
                                <Users size={16} />
                            </div>
                        </div>

                        <div className="grid grid-cols-2 gap-y-4 gap-x-2 mb-6">
                            <div className="flex flex-col">
                                <label className="text-[9px] font-bold text-gray-700 uppercase tracking-widest mb-1">Revenue</label>
                                <span className="text-[17px] font-extrabold font-['Lexend_Deca']" style={{ color: t.color }}>{t.rev}</span>
                            </div>
                            <div className="flex flex-col">
                                <label className="text-[9px] font-bold text-gray-700 uppercase tracking-widest mb-1">Win Rate</label>
                                <span className="text-[17px] font-extrabold font-['Lexend_Deca'] text-text">{t.rate}</span>
                            </div>
                            <div className="flex flex-col">
                                <label className="text-[9px] font-bold text-gray-700 uppercase tracking-widest mb-1">Deals Closed</label>
                                <span className="text-[17px] font-extrabold font-['Lexend_Deca'] text-text">{t.deals}</span>
                            </div>
                            <div className="flex flex-col">
                                <label className="text-[9px] font-bold text-gray-700 uppercase tracking-widest mb-1">Avg Cycle</label>
                                <span className="text-[17px] font-extrabold font-['Lexend_Deca'] text-text">{t.cycle}</span>
                            </div>
                        </div>

                        <div className="pt-4 border-t border-bg group relative">
                            <div className="flex justify-between items-center mb-1.5">
                                <span className="text-[10px] font-bold text-gray-700 uppercase tracking-widest">Quota Attainment</span>
                                <span className="text-[12px] font-extrabold font-['Lexend_Deca']" style={{ color: t.quota >= 90 ? '#10b981' : t.color }}>{t.quota}%</span>
                            </div>
                            <div className="h-1.5 bg-bg rounded-full overflow-hidden">
                                <div
                                    className="h-full rounded-full transition-all duration-1000"
                                    style={{ width: `${t.quota}%`, backgroundColor: t.quota >= 90 ? '#10b981' : t.color }}
                                />
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
})