"use client"

import { useState } from "react"
import { useTranslations } from "next-intl"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { useGet } from "@/hooks/use-get"
import { cn } from "@/lib/cn"
import { Copy, Check } from "lucide-react"

export default function ReferralsPage() {
    const t = useTranslations()
    const { data: user, isLoading } = useGet({ url: "/user" })
    const [copied, setCopied] = useState(false)

    // Base URL for referral registration
    const baseUrl = "https://next.ivorytraining.com/en/register?ref="
    const referralCode = user?.referral_code
    // Show placeholder if loading, or constructing link if code exists, or empty/fallback
    const referralLink = isLoading 
        ? t("loading") 
        : referralCode 
            ? `${baseUrl}${referralCode}` 
            : ""

    const handleCopy = () => {
        if (!referralLink) return
        
        navigator.clipboard.writeText(referralLink)
        setCopied(true)
        setTimeout(() => setCopied(false), 2000)
    }

    return (
        <div className="space-y-6 p-4">
            <div className="bg-white rounded-xl p-8 shadow-sm space-y-8 min-h-[400px] flex flex-col justify-center">
                {/* Header Text */}
                <div className=" space-y-2">
                    <h1 className="text-3xl font-bold text-teal-500">
                        {t("referrals_page.title")}
                    </h1>
                    <p className="text-gray-600 font-medium text-lg">
                        {t("referrals_page.subtitle")}
                    </p>
                </div>

                {/* Input and Button Group */}
                <div className="space-y-4">
                    <div className="relative">
                        <Input 
                            value={referralLink}
                            readOnly
                            className="bg-gray-50/50 border-gray-100 h-14  text-teal-500 px-4 font-medium"
                        />
                    </div>
                    
                    <div className="flex justify-end">
                        <Button 
                            onClick={handleCopy}
                            disabled={!referralLink}
                            className={cn(
                                "h-12 px-8 text-white font-bold rounded-md border-0 text-lg min-w-[150px]",
                                "bg-gradient-to-l from-violet-600 to-amber-300 hover:opacity-90 transition-opacity"
                            )}
                        >
                            {copied ? (
                                <>
                                    <Check className="size-5 me-2" />
                                    {t("referrals_page.copied")}
                                </>
                            ) : (
                                t("referrals_page.copy_link")
                            )}
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    )
}