import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import Logo from '../../assets/chowman-bg-logo.avif';
import { useQuiz, useQuizFlow } from '@/features/quiz/hooks';
import { QuizRouteGuard } from '@/features/quiz/components';
import { Spinner } from '@/components/ui/spinner';
import { getQuizToken } from '@/lib/quizApiClient';
import { Share, ArrowRight, Copy, X } from 'lucide-react';
import Celebrating from '../../assets/celebrating.avif';

const SlideUpImage = ({
    src,
    delay = 200,
}: {
    src: string;
    delay?: number;
}) => {
    const ref = useRef<HTMLImageElement>(null);

    useLayoutEffect(() => {
        const el = ref.current;
        if (!el) return;
        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
            return;

        const animation = el.animate(
            [{ transform: 'translateY(100%)' }, { transform: 'translateY(0)' }],
            {
                duration: 1000,
                delay,
                easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
                fill: 'backwards',
            },
        );

        return () => animation.cancel();
    }, [delay]);

    return (
        <div className="absolute inset-0 flex items-end justify-center">
            <img
                ref={ref}
                src={src}
                alt=""
                className="pointer-events-none block h-full max-h-48 w-auto max-w-full object-contain select-none"
            />
        </div>
    );
};

const Offer = () => {
    const { session, token } = useQuiz();
    const { fetchSession, trackEvent } = useQuizFlow();
    const [copied, setCopied] = useState(false);
    const [isRefreshing, setIsRefreshing] = useState(true); 
    const [showTerms, setShowTerms] = useState(false);

    // Offer copy is managed in the admin panel. Refresh it on every visit so
    // the in-memory quiz session cannot show a previous title, tagline, or
    // terms. The coupon code remains server-snapshotted at unlock time.
    useEffect(() => {
        let active = true;

        // QuizProvider owns the initial session restore on a hard refresh.
        // Skip this duplicate request until its API client token is hydrated.
        if (!token || !getQuizToken()) {
            setIsRefreshing(false);
            return;
        }

        void fetchSession()
            .catch(() => {
                // The route guard handles invalid or expired credentials.
            })
            .finally(() => {
                if (active) setIsRefreshing(false);
            });

        return () => {
            active = false;
        };
    }, [token, fetchSession]);

    const offer = session?.offer;
    const couponCode = offer?.coupon_code ?? 'XXXXXX';
    const title = offer?.title ?? 'Special Offer';
    const tagline = offer?.tagline ?? 'Celebrate with Chowman!';
    const terms = offer?.terms ?? '';
    const smartlink = offer?.smartlink ?? 'https://chowman.com/app?utm_source=qr_quiz&utm_campaign=durga_puja_2026';
    const smartlinkUtm = useMemo(() => {
        try {
            const url = new URL(smartlink, window.location.origin);

            return Object.fromEntries(
                [...url.searchParams.entries()].filter(([key]) =>
                    key.startsWith('utm_'),
                ),
            );
        } catch {
            return {};
        }
    }, [smartlink]);

    const handleCopy = async () => {
        try {
            await navigator.clipboard.writeText(couponCode);
        } catch {
            const textarea = document.createElement('textarea');
            textarea.value = couponCode;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            textarea.remove();
        }
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    const handleShare = async () => {
        if (navigator.share) {
            await navigator.share({
                title: 'My Chowman Festive Reward',
                text: `Get ${couponCode} from Chowman!`,
            });
        }
    };

    if (isRefreshing || !offer || !offer.revealed) {
        return (
            <main className="min-h-[100dvh] px-4 py-8 sm:px-8 lg:px-12">
                <div className="mx-auto flex min-h-[calc(100dvh-64px)] w-full max-w-full flex-col items-center justify-center">
                    <Spinner size="lg" className="text-[#D4A24E]" />
                </div>
            </main>
        );
    }

    return (
        <QuizRouteGuard allowedStates={['unlocked']}>
            <main className="flex min-h-[100dvh] flex-col overflow-x-hidden px-4 py-[clamp(12px,2.5dvh,32px)] sm:px-8 lg:px-12">
                <div className="mx-auto flex w-full max-w-full flex-1 flex-col items-center">
                    {/* Logo */}
                    <div className="flex shrink-0 justify-center">
                        <img
                            src={Logo}
                            alt="Chowman Logo"
                            className="h-[clamp(28px,5dvh,48px)] w-auto"
                        />
                    </div>

                    {/* Heading */}
                    <div className="mt-[clamp(12px,4dvh,80px)] w-full shrink-0">
                        <div className="flex items-center justify-center gap-4 sm:gap-7">
                            <span className="h-px w-12 bg-[#D4A24E] min-[380px]:w-16 sm:w-28" />
                            <span className="text-center font-montserrat text-xs font-bold tracking-[0.18em] text-[#D4A24E] sm:text-[18px]">
                                YOUR FESTIVE REWARD
                            </span>
                            <span className="h-px w-12 bg-[#D4A24E] min-[380px]:w-16 sm:w-28" />
                        </div>
                    </div>

                    {/* Reward */}
                    <div className="mt-[clamp(10px,3dvh,56px)] shrink-0 text-center">
                        <h1 className="font-amethyst text-[clamp(1.125rem,3.5dvh,2.75rem)] text-[#E7B95E]">
                            <span className="tracking-wider leading-none">{title}</span>
                        </h1>
                        <p className="mt-2 text-[clamp(0.7rem,1.7dvh,1.35rem)] uppercase !font-thin text-[#FFF8EA] tracking-wider">
                            {tagline}
                        </p>
                    </div>

                    {/* Coupon Ticket (flippable) */}
                    <div className="mt-[clamp(14px,4dvh,80px)] w-[90%] max-w-[700px] shrink-0 [perspective:1200px]">
                        <div
                            className={`relative transition-transform duration-2000 ease-[cubic-bezier(0.22,1,0.36,1)] [transform-style:preserve-3d] motion-reduce:transition-none ${
                                showTerms ? '[transform:rotateY(180deg)]' : ''
                            }`}
                        >
                            {/* FRONT */}
                            <div
                                aria-hidden={showTerms}
                                className="relative overflow-hidden rounded-[clamp(18px,3dvh,32px)] bg-gradient-to-b from-[#E3BE78] to-[#CD9D55] px-[clamp(24px,4dvh,56px)] py-[clamp(16px,3.5dvh,48px)] text-[#5A4233] [backface-visibility:hidden]"
                            >
                                {/* Ticket cut-outs */}
                                <span className="absolute top-1/2 -left-4 h-8 w-8 -translate-y-1/2 rounded-full bg-[#350307]" />
                                <span className="absolute top-1/2 -right-4 h-8 w-8 -translate-y-1/2 rounded-full bg-[#350307]" />

                                {/* Coupon */}
                                <div>
                                    <p className="font-montserrat text-xs font-bold sm:text-[18px]">
                                        COUPON CODE
                                    </p>

                                    <div className="mt-2 flex items-center justify-between gap-3">
                                        <span className="min-w-0 font-amethyst text-[clamp(1.75rem,5dvh,4rem)] leading-none font-bold tracking-wide break-all text-[#230505]">
                                            {couponCode}
                                        </span>

                                        <button
                                            type="button"
                                            onClick={handleCopy}
                                            tabIndex={showTerms ? -1 : 0}
                                            className="flex h-[clamp(38px,6dvh,62px)] shrink-0 items-center gap-2 rounded-lg bg-[#230505] px-4 font-montserrat text-sm font-semibold text-[#FFF8EA] transition-transform active:scale-95 sm:px-7 sm:text-[19px]"
                                        >
                                            <Copy className="h-4 w-4" />
                                            {copied ? 'Copied!' : 'Copy'}
                                        </button>
                                    </div>
                                </div>

                                {/* Divider */}
                                <div className="my-[clamp(10px,2dvh,24px)] h-px bg-[#D6C9B4]" />

                                {/* Terms link */}
                                <button
                                    type="button"
                                    onClick={() => setShowTerms(true)}
                                    tabIndex={showTerms ? -1 : 0}
                                    className="font-montserrat text-xs font-bold underline underline-offset-2 sm:text-[17px]"
                                >
                                    Terms & Conditions
                                </button>
                            </div>

                            {/* BACK */}
                            <div
                                aria-hidden={!showTerms}
                                className="absolute inset-0 overflow-hidden rounded-[clamp(18px,3dvh,32px)] bg-gradient-to-b from-[#E3BE78] to-[#CD9D55] text-[#5A4233] [backface-visibility:hidden] [transform:rotateY(180deg)]"
                            >
                                {/* Ticket cut-outs */}
                                <span className="absolute top-1/2 -left-4 h-8 w-8 -translate-y-1/2 rounded-full bg-[#350307]" />
                                <span className="absolute top-1/2 -right-4 h-8 w-8 -translate-y-1/2 rounded-full bg-[#350307]" />

                                <div className="flex h-full flex-col overflow-y-auto px-[clamp(24px,4dvh,56px)] py-[clamp(16px,3.5dvh,48px)]">
                                    <div className="flex items-start justify-between gap-3">
                                        <p className="font-montserrat text-xs font-bold sm:text-[17px]">
                                            TERMS & CONDITIONS
                                        </p>
                                        <button
                                            type="button"
                                            onClick={() => setShowTerms(false)}
                                            tabIndex={showTerms ? 0 : -1}
                                            aria-label="Close terms and conditions"
                                            className="-mt-1 -mr-2 flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-[#230505] transition-transform active:scale-90"
                                        >
                                            <X className="h-5 w-5" />
                                        </button>
                                    </div>

                                    <p className="mt-2 font-montserrat text-[clamp(0.65rem,1.5dvh,0.95rem)] leading-snug whitespace-pre-line">
                                        {terms ? terms : "Terms & Conditions — Not Available"}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Flexible image area: takes ALL leftover space */}
                    <div className="relative mt-2 min-h-[40px] w-full max-w-[700px] flex-1 overflow-hidden">
                        <SlideUpImage src={Celebrating} />
                    </div>

                    {/* Actions */}
                    <div className="relative z-10 flex w-full max-w-[700px] shrink-0 flex-col gap-[clamp(8px,1.5dvh,16px)]">
                        <a
                            href={smartlink}
                            target="_blank"
                            rel="noopener noreferrer"
                            onClick={() =>
                                trackEvent('app_link_clicked', smartlinkUtm)
                            }
                            className="flex h-[clamp(44px,7dvh,84px)] w-full items-center justify-center gap-2 rounded-xl border border-[#F0D28E] bg-gradient-to-b from-[#E7C27A] to-[#CEA052] font-montserrat text-sm font-bold text-[#230505] transition-transform active:scale-[0.99] sm:text-[22px] lg:text-[27px]"
                        >
                            Download Chowman App to redeem
                            <ArrowRight className="h-5 w-5" />
                        </a>

                        <button
                            type="button"
                            onClick={handleShare}
                            className="flex h-[clamp(44px,7dvh,84px)] w-full items-center justify-center gap-3 rounded-xl border border-[#D4A24E] bg-transparent font-montserrat text-sm font-bold text-[#E7C27A] transition-transform active:scale-[0.99] sm:text-[22px] lg:text-[27px]"
                        >
                            <Share className="h-5 w-5" />
                            Share with Friends
                        </button>
                    </div>
                </div>
            </main>
        </QuizRouteGuard>
    );
};

export default Offer;