"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"
import { NoDataFound } from "@/components/ui/no-data-found"
import type { TopCustomerByTransactions } from "./types"

interface TopCustomersTransactionsPanelProps {
    data: TopCustomerByTransactions[]
}

export const TopCustomersTransactionsPanel = React.memo(function TopCustomersTransactionsPanel({
    data,
}: TopCustomersTransactionsPanelProps) {
    const router = useRouter()

    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">Top Customers by Transactions</h3>
                <p className="text-[11px] text-gray-700 font-medium mb-4 uppercase tracking-tight">Paid deal ledger volume · All time</p>
                <NoDataFound
                    message="No customer transaction data"
                    description="Customers with paid deal transactions 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">Top Customers by Transactions</h3>
                <p className="text-[11px] text-gray-700 font-medium uppercase tracking-tight">Paid deal ledger volume · All time</p>
            </div>
            <div className="overflow-x-auto scrollbar-themed px-2 pb-4">
                <Table>
                    <TableHeader>
                        <TableRow className="bg-bg/25 hover:bg-bg/35 transition-colors cursor-default">
                            <TableHead className="w-10 font-extrabold uppercase text-[10px] tracking-wider text-gray-700">#</TableHead>
                            <TableHead className="font-extrabold uppercase text-[10px] tracking-wider text-gray-700">Customer</TableHead>
                            <TableHead className="text-right font-extrabold uppercase text-[10px] tracking-wider text-gray-700">Total paid</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody className="text-[13px] font-['Lexend']">
                        {data.map((row, index) => (
                            <TableRow
                                key={row.id}
                                className="hover:bg-white/30 dark:hover:bg-white/10 transition-colors cursor-pointer"
                                onClick={() => router.push(`/customers/${row.id}`)}
                            >
                                <TableCell className="font-extrabold text-[11px] text-gray-500 font-['Lexend_Deca']">
                                    {index + 1}
                                </TableCell>
                                <TableCell>
                                    <span className="text-[13px] font-bold text-gray-700 line-clamp-2">{row.name}</span>
                                </TableCell>
                                <TableCell className="text-right font-extrabold font-['Lexend_Deca'] text-accent whitespace-nowrap">
                                    {row.totalAmountFormatted}
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
        </div>
    )
})