"use client"

import * as React from "react"
import { TrendingUp, TrendingDown } from "lucide-react"
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"
import { RepPerformance } from "./types"
import { NoDataFound } from "@/components/ui/no-data-found"

interface RepPerformanceTableProps {
    data: RepPerformance[]
}

export const RepPerformanceTable = React.memo(function RepPerformanceTable({ data }: RepPerformanceTableProps) {
    if (!data.length) {
        return (
            <div className="bg-[rgba(255,255,255,0.45)] dark:bg-[rgba(244,246,255,0.4)] backdrop-blur-[15px] border border-white/60 rounded-[14px] p-6 shadow-[0px_2px_15px_0px_rgba(0,0,0,0.06)]">
                <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-0.5">Rep Performance Summary</h3>
                <p className="text-[11px] text-gray-700 font-medium mb-4 uppercase tracking-tight">AE performance breakdown</p>
                <NoDataFound message="No rep performance data" description="AEs with activity in this period will appear here." size="sm" />
            </div>
        )
    }

    return (
        <div className="bg-[rgba(255,255,255,0.45)] dark:bg-[rgba(244,246,255,0.4)] backdrop-blur-[15px] border border-white/60 rounded-[14px] 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.005] overflow-hidden flex flex-col">
            <div className="p-6 pb-3">
                <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-0.5">Rep Performance Summary</h3>
                <p className="text-[11px] text-gray-700 font-medium uppercase tracking-tight">AE performance breakdown</p>
            </div>
            <div className="overflow-x-auto scrollbar-themed">
                <Table>
                    <TableHeader>
                        <TableRow className="bg-bg/25 hover:bg-bg/35 transition-colors cursor-default">
                            <TableHead className="font-extrabold uppercase text-[10px] tracking-wider text-gray-700">Rep</TableHead>
                            <TableHead className="font-extrabold uppercase text-[10px] tracking-wider text-gray-700">Deals</TableHead>
                            <TableHead className="font-extrabold uppercase text-[10px] tracking-wider text-gray-700">Target attained</TableHead>
                            <TableHead className="font-extrabold uppercase text-[10px] tracking-wider text-gray-700">Quota</TableHead>
                            <TableHead className="font-extrabold uppercase text-[10px] tracking-wider text-gray-700">Close Rate</TableHead>
                            <TableHead className="text-right font-extrabold uppercase text-[10px] tracking-wider text-gray-700">Trend</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody className="text-[13px] font-['Lexend']">
                        {data.map(r => {
                            const qc = r.quota >= 90 ? '#22C55E' : r.quota >= 70 ? '#6C63FF' : '#F59E0B'
                            return (
                                <TableRow key={r.name} className="hover:bg-white/30 dark:hover:bg-white/10 transition-colors">
                                    <TableCell>
                                        <div className="flex items-center gap-2.5">
                                            <div className="size-7 rounded-full bg-accent/10 text-accent text-[9px] font-extrabold flex items-center justify-center shrink-0">
                                                {r.av}
                                            </div>
                                            <span className="text-[13px] font-bold text-gray-700">{r.name}</span>
                                        </div>
                                    </TableCell>
                                    <TableCell className="font-bold font-['Lexend_Deca'] text-text">{r.deals}</TableCell>
                                    <TableCell className="font-extrabold font-['Lexend_Deca'] text-accent">
                                        {r.targetAttained}
                                    </TableCell>
                                    <TableCell>
                                        <div className="flex items-center gap-3">
                                            <div className="flex-1 max-w-[80px] h-1.5 bg-bg rounded-full overflow-hidden">
                                                <div className="h-full rounded-full" style={{ width: `${r.quota}%`, backgroundColor: qc }} />
                                            </div>
                                            <span className="text-[11px] font-extrabold font-['Lexend_Deca']" style={{ color: qc }}>{r.quota}%</span>
                                        </div>
                                    </TableCell>
                                    <TableCell className="font-bold font-['Lexend_Deca'] text-text">{r.rate}</TableCell>
                                    <TableCell className="text-right">
                                        {r.isUp ? (
                                            <div className="size-7 rounded-lg bg-emerald-100 flex items-center justify-center ml-auto">
                                                <TrendingUp size={12} className="text-emerald-500" />
                                            </div>
                                        ) : (
                                            <div className="size-7 rounded-lg bg-rose-100 flex items-center justify-center ml-auto">
                                                <TrendingDown size={12} className="text-rose-500" />
                                            </div>
                                        )}
                                    </TableCell>
                                </TableRow>
                            )
                        })}
                    </TableBody>
                </Table>
            </div>
        </div>
    )
})