import { useState } from "react";
import { usePage } from "@inertiajs/react";
import { useI18n } from "@/lib/i18n";
import type { PageProps } from "@inertiajs/core";
import { Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useActiveMarket } from "@/components/trading/active-market";
import HeaderCoinSearch from "@/components/trading/HeaderCoinSearch";

interface SharedProps extends PageProps {
    subscription?: {
        active?: boolean;
        features?: string[];
    } | null;
}

export default function HeaderCoinSearchLauncher() {
    const page = usePage<SharedProps>();
    const { t, locale } = useI18n();
    const { activeMarket } = useActiveMarket();
    const [open, setOpen] = useState(false);
    const tx = (key: string, english: string, indonesian: string) =>
        t(key, locale.toLowerCase().startsWith("id") ? indonesian : english);

    const canAccessChart = Boolean(
        page.props.subscription?.active &&
        page.props.subscription.features?.includes("chart"),
    );

    if (!canAccessChart) return null;

    return (
        <>
            <Button
                type="button"
                variant="outline"
                size="sm"
                className="h-10 min-w-10 gap-2 rounded-lg border-border/70 bg-background/70 px-2 text-xs sm:h-9 sm:min-w-0 sm:px-3"
                aria-label={tx(
                    "header_coin_search.search_coin",
                    "Search coin",
                    "Cari koin",
                )}
                aria-haspopup="dialog"
                aria-expanded={open}
                onClick={() => setOpen(true)}
            >
                <Search className="size-4 text-warning-500" />
                <span className="hidden sm:inline">
                    {tx("header_coin_search.search", "Search", "Cari")}
                </span>
                {activeMarket?.symbol && (
                    <span className="hidden max-w-24 truncate rounded bg-muted px-1.5 font-semibold md:inline">
                        {activeMarket.symbol.replace(/USDT$/, "/USDT")}
                    </span>
                )}
            </Button>
            <HeaderCoinSearch open={open} onOpenChange={setOpen} />
        </>
    );
}