"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { Button } from "@app/components/ui/button";

type OrgSignInLinkProps = {
    href: string;
    linkText: string;
    descriptionText: string;
};

const STORAGE_KEY_CLICKED = "orgSignInLinkClicked";
const STORAGE_KEY_ACKNOWLEDGED = "orgSignInTipAcknowledged";

export default function OrgSignInLink({
    href,
    linkText,
    descriptionText
}: OrgSignInLinkProps) {
    const router = useRouter();
    const t = useTranslations();
    const [showTip, setShowTip] = useState(false);

    useEffect(() => {
        // Check if tip was previously acknowledged
        const acknowledged =
            localStorage.getItem(STORAGE_KEY_ACKNOWLEDGED) === "true";
        if (acknowledged) {
            // Clear the clicked flag if tip was acknowledged
            localStorage.removeItem(STORAGE_KEY_CLICKED);
        }
    }, []);

    const handleClick = (e: React.MouseEvent) => {
        e.preventDefault();

        const hasClickedBefore =
            localStorage.getItem(STORAGE_KEY_CLICKED) === "true";
        const isAcknowledged =
            localStorage.getItem(STORAGE_KEY_ACKNOWLEDGED) === "true";

        if (hasClickedBefore && !isAcknowledged) {
            // Second click (or later) - show tip
            setShowTip(true);
        } else {
            // First click - store flag and navigate
            localStorage.setItem(STORAGE_KEY_CLICKED, "true");
            router.push(href);
        }
    };

    const handleContinueAnyway = () => {
        setShowTip(false);
        router.push(href);
    };

    const handleDontShowAgain = () => {
        setShowTip(false);
        localStorage.setItem(STORAGE_KEY_ACKNOWLEDGED, "true");
        localStorage.removeItem(STORAGE_KEY_CLICKED);
    };

    return (
        <>
            {showTip && (
                <Alert className="mb-4 mt-8">
                    <AlertTitle>{t("orgSignInNotice")}</AlertTitle>
                    <AlertDescription className="space-y-3 mt-3">
                        <p>{t("orgSignInTip")}</p>
                        <div className="flex items-center gap-2">
                            <Button
                                type="button"
                                variant="ghost"
                                size="sm"
                                className="w-full"
                                onClick={handleDontShowAgain}
                            >
                                {t("dontShowAgain")}
                            </Button>
                            <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                className="w-full"
                                onClick={handleContinueAnyway}
                            >
                                {t("continueAnyway")}
                            </Button>
                        </div>
                    </AlertDescription>
                </Alert>
            )}
            <div className="text-sm text-center text-muted-foreground mt-8 flex flex-col items-center">
                <span>{descriptionText}</span>
                <button
                    onClick={handleClick}
                    className="underline text-inherit bg-transparent border-none p-0 cursor-pointer"
                >
                    {linkText}
                </button>
            </div>
        </>
    );
}
