"use client";
import React, {useCallback} from "react";
import {Layout} from "antd";
import AppDropdown from "@/components/ui/dropdown";
import AppTypography from "@/components/ui/typography";
import {STORAGE_KEYS} from "@/types/common";
import StorageHelper from "@/lib/storeHelper";
import {Languages,} from "lucide-react";
import {useMounted} from "@/hooks/useMounted";
import AppButton from "@/components/ui/button";
import {useRouter, usePathname} from "@/i18n/routing";
import {useParams} from "next/navigation";

const {Header} = Layout;

const AppHeaderCustomer: React.FC = () => {
    const params = useParams();
    const router = useRouter();
    const pathname = usePathname();
    const mounted = useMounted();

    const locale = StorageHelper.getCookie(STORAGE_KEYS.NEXT_LOCALE) || "ja";

    const handleLogoClick = useCallback(() => {
        if (!params?.customerId) {
            return
        }
        const targetPath = `/${locale}/manage-content/${params.customerId}`;
        if (pathname !== targetPath) {
            router.push(targetPath);
        }
    }, [params, locale, pathname, router]);

    const handleRenderLocaleMenu = () => {
        const handleSwitchLanguage = (newLocale: string) => {
            if (locale !== newLocale) {
                StorageHelper.setCookie(STORAGE_KEYS.NEXT_LOCALE, newLocale, {
                    path: "/",
                    maxAge: 31536000,
                });
                router.replace(pathname, {locale: newLocale});
            }
        };

        return [
            {
                key: "ja",
                label: (
                    <AppTypography className="text-neutral-600">日本語</AppTypography>
                ),
                onClick: () => handleSwitchLanguage("ja"),
            },
            {
                key: "en",
                label: (
                    <AppTypography className="text-neutral-600">English</AppTypography>
                ),
                onClick: () => handleSwitchLanguage("en"),
            },
        ];
    };

    return (
        <Header
            style={{
                background: "#ffffff",
                boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
                padding: "0 16px",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: "64px",
                width: "100%",
                position: "sticky",
                top: 0,
                zIndex: 1,
            }}
        >
            <div className="w-full flex justify-between items-center">
                <div
                    className="p-2 text-xs md:text-lg font-bold text-center cursor-pointer text-neutral-800"
                    onClick={handleLogoClick}
                >
                    <span> iDoc Shopify App</span>
                </div>
                {mounted && (
                    <div className="flex justify-center items-center gap-2">
                        <AppDropdown
                            overlayClassName="manage-account-dropdown"
                            menu={{
                                items: handleRenderLocaleMenu(),
                                selectedKeys: [locale],
                            }}
                            trigger={["click"]}
                            className={"flex items-center"}
                        >
                            <AppButton
                                type="text"
                                shape="circle"
                                size="large"
                                className="!flex items-center"
                            >
                                <Languages size={24}/>
                            </AppButton>
                        </AppDropdown>
                    </div>
                )}
            </div>
        </Header>
    );
};

export default AppHeaderCustomer;