"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Logo } from "@/components/logo";
import { useState, useEffect } from "react";

export function Header() {
    const [contractAddress, setContractAddress] = useState("Fetching...");
    const [buttonText, setButtonText] = useState("Fetching...");

    useEffect(() => {
        const fetchContractAddress = async () => {
            try {
                const res = await fetch("https://catools.dev3vds1.link/get/artivate");
                const data = await res.json();
                const address = data[0]?.address || "Unavailable";
                setContractAddress(address);
                setButtonText(`CA: ${address}`);
            } catch (error) {
                console.error("Error fetching contract address:", error);
                setContractAddress("Error");
                setButtonText("CA: Error");
            }
        };

        fetchContractAddress();
    }, []);

    const handleCopy = async () => {
        try {
            await navigator.clipboard.writeText(contractAddress);
            setButtonText("Copied!");
            setTimeout(() => setButtonText(`CA: ${contractAddress}`), 2000);
        } catch (err) {
            console.error("Failed to copy text:", err);
        }
    };

    return (
        <header className="sticky top-0 z-50">
            <nav className="container mx-auto px-6 py-4">
                <div className="hidden md:flex items-center justify-between text-xs font-fk-grotesk-mono">
                    <div className="flex-1">
                        <div className="flex items-center uppercase">
                            <div className="pr-2 relative">
                                <Link
                                    href="#features"
                                    className="bg-[#1e1a46] px-3 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
                                >
                                    Features
                                </Link>
                                <img
                                    src="/images/button-separator-header.svg"
                                    alt="Separator"
                                    className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
                                />
                            </div>
                            <div className="pr-2 relative">
                                <Link
                                    href="#tokenomics"
                                    className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
                                >
                                    Tokenomics
                                </Link>
                                <img
                                    src="/images/button-separator-header.svg"
                                    alt="Separator"
                                    className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
                                />
                            </div>
                            <div>
                                <Link
                                    href="#0"
                                    className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
                                >
                                    Applications
                                </Link>
                            </div>
                        </div>
                    </div>
                    <div className="flex-1 flex justify-center">
                        <Logo />
                    </div>
                    <div className="flex-1 flex justify-end">
                        <Button
                            className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors uppercase text-xs"
                            onClick={handleCopy}
                        >
                            {buttonText}
                        </Button>
                    </div>
                </div>
            </nav>
        </header>
    );
}
