import { getTranslations } from "next-intl/server"
import { cn } from "@/lib/cn"
import { Coins, HandCoins, CreditCard, Wallet, Trophy } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { GET } from "@/utils/get"
import { URL_IMAGE } from "@/utils/url"
import { CopyButton } from "./_components/copy-button"

export default async function RewardsPage() {
    const t = await getTranslations()
    const userProfile = await GET({ url: "/user", context: "dashboard" });
    const companyId = userProfile?.company_id || "";
    const response = await GET({ url: `/user/referral?company=${companyId}`, context: "dashboard" });

    const user = response?.user || { points_balance: 0, earned_points: 0, spent_points: 0, referral_code: "" };
    const leaderboard = response?.leaderboard || [];
    const history = response?.transactions || [];

    const stats = [
        {
            value: user.spent_points || "0",
            label: "rewards_page.total_spent",
            icon: CreditCard,
            color: "text-blue-500",
            img: "/images/hand-card.png"
        },
        {
            value: user.earned_points || "0",
            label: "rewards_page.total_earned",
            icon: Coins,
            color: "text-yellow-500"
        },
        {
            value: user.points_balance || "0",
            label: "rewards_page.remaining_coins",
            icon: HandCoins,
            color: "text-blue-400"
        },
        {
            value: user.referral_code || "-", 
            label: "rewards_page.referral_code",
            icon: Wallet,
            color: "text-blue-600",
            isCopyable: !!user.referral_code
        }
    ]

    return (
        <div className="space-y-6 p-4">
            {/* Stats Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
                {stats.map((stat, index) => (
                    <div key={index} className="bg-white rounded-xl p-6 shadow-sm flex items-center justify-between min-h-[120px] relative">
                        <div className="flex flex-col items-center flex-1">
                            <div className="flex items-center">
                                <span className="text-3xl font-bold mb-2">{stat.value}</span>
                                {stat.isCopyable && <CopyButton value={String(stat.value)} />}
                            </div>
                            <span className="text-gray-500 text-sm ">{t(stat.label)}</span>
                        </div>
                        <div className={cn("p-3 rounded-full bg-blue-50/50", stat.color)}>
                            <stat.icon className="size-10" />
                        </div>
                    </div>
                ))}
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                
                {/* History Table Section */}
                <div className="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
                    <div className="overflow-x-auto">
                        <table className="w-full">
                            <thead>
                                <tr className="text-teal-500 border-b border-gray-100">
                                    
                                    <th className="pb-4 text-center font-bold">{t("rewards_page.title")}</th>
                                    <th className="pb-4 text-center font-bold">{t("rewards_page.date")}</th>
                                    <th className="pb-4 text-center font-bold">{t("rewards_page.point")}</th>
                                    <th className="pb-4 text-center font-bold">{t("rewards_page.type")}</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-gray-50">
                                {history.map((item: any, index: number) => (
                                    <tr key={index} className="hover:bg-gray-50/50">
                                           <td className="py-6 text-center text-gray-600">
                                            {item.reason}
                                        </td>
                                        
                                        <td className="py-6 text-center text-gray-500">{item.date}</td>
                                        <td className="py-6 text-center font-bold text-emerald-500" dir="ltr">
                                            {item.points} (+)
                                        </td>
                                        <td className="py-6 text-center text-gray-600 capitalize">
                                            {t(`rewards_page.${item.type}`)}
                                        </td>
                                     
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                        {history.length === 0 && (
                            <div className="text-center py-12 text-gray-400">
                                {t("custom.no results")}
                            </div>
                        )}
                    </div>
                </div>
                {/* Leaderboard Section */}
                <div className="bg-white rounded-xl shadow-sm p-6 space-y-6">
                    <h2 className="text-xl font-bold text-teal-500 mb-4">
                        {t("rewards_page.leaderboard")}
                    </h2>

                    {/* Tabs */}
                    {/* <div className="flex gap-2 justify-center mb-6">
                         <button className="px-4 py-1.5 text-sm rounded-md border text-gray-500 hover:bg-gray-50">
                            {t("rewards_page.badges")}
                        </button>
                         <button className="px-4 py-1.5 text-sm rounded-md border text-gray-500 hover:bg-gray-50">
                            {t("rewards_page.levels")}
                        </button>
                        <button className="px-6 py-1.5 text-sm rounded-md text-white bg-gradient-to-r from-violet-600 to-amber-300 shadow-md">
                            {t("rewards_page.points")}
                        </button>
                    </div> */}

                    {/* List */}
                    <div className="space-y-3">
                        {leaderboard.map((user: any, index: number) => (
                            <div key={index} className="flex items-center gap-3 p-3 border rounded-lg hover:shadow-sm transition-shadow">
                                <span className={cn(
                                    "flex items-center justify-center size-8 rounded-md text-white font-bold text-sm",
                                    index === 0 ? "bg-emerald-400" :
                                    index === 1 ? "bg-amber-400" :
                                    index === 2 ? "bg-violet-500" : "bg-gray-200 text-gray-500"
                                )}>
                                    {index + 1}
                                </span>
                                
                                <span className="font-bold text-gray-700 w-8 text-center">{user.points}</span>
                                
                                <span className="flex-1 text-end text-sm text-teal-500 font-medium truncate">
                                    {user.name} {user.is_current_user && t("rewards_page.you")}
                                </span>

                                <Avatar className="size-10">
                                    <AvatarImage src={`${URL_IMAGE}/${user.avatar}`} />
                                    <AvatarFallback className={cn(
                                        "text-white text-xs uppercase",
                                        index % 2 === 0 ? "bg-slate-700" : "bg-purple-300"
                                    )}>
                                        {user.name?.slice(0, 2)}
                                    </AvatarFallback>
                                </Avatar>
                            </div>
                        ))}
                    </div>
                </div>

            </div>
        </div>
    )
}