'use client';

import React, { useEffect, useRef } from 'react';
import Link from 'next/link';
import { X, Zap, BarChart2, RefreshCw, Palette } from 'lucide-react';
import { Button } from '@/components/ui/Button';

interface PostDownloadPopupProps {
    open: boolean;
    onClose: () => void;
}

const BENEFITS = [
    { icon: RefreshCw, text: 'Edit the link anytime — QR stays the same' },
    { icon: BarChart2, text: 'See who scans, when & where' },
    { icon: Palette, text: 'Custom colors, logo & frames' },
    { icon: Zap, text: 'Free plan included — upgrade anytime for more' },
];

const LS_KEY = 'qrm_download_popup_seen';

export function shouldShowDownloadPopup(): boolean {
    try { return !localStorage.getItem(LS_KEY); } catch { return false; }
}

export function markDownloadPopupSeen(): void {
    try { localStorage.setItem(LS_KEY, '1'); } catch { /* ignore */ }
}

export default function PostDownloadPopup({ open, onClose }: PostDownloadPopupProps) {
    const overlayRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!open) return;
        markDownloadPopupSeen();
        const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
        document.addEventListener('keydown', onKey);
        return () => document.removeEventListener('keydown', onKey);
    }, [open, onClose]);

    if (!open) return null;

    return (
        <div
            ref={overlayRef}
            className="fixed inset-0 z-50 flex items-center justify-center p-4"
            style={{ backgroundColor: 'rgba(15, 23, 42, 0.6)', backdropFilter: 'blur(4px)' }}
            onClick={(e) => { if (e.target === overlayRef.current) onClose(); }}
        >
            <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-200">

                {/* Header */}
                <div className="relative bg-gradient-to-br from-[#4F46E5] to-[#7C3AED] p-6 text-white text-center">
                    <button
                        onClick={onClose}
                        className="absolute top-4 right-4 text-white/70 hover:text-white transition-colors"
                        aria-label="Close"
                    >
                        <X className="w-5 h-5" />
                    </button>
                    <div className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-3">
                        <Zap className="w-6 h-6 text-white" />
                    </div>
                    <h2 className="text-xl font-bold">Your QR code is downloading!</h2>
                    <p className="text-white/80 text-sm mt-1">
                        Want to make it smarter — for free?
                    </p>
                </div>

                {/* Benefits */}
                <div className="p-6 space-y-3">
                    {BENEFITS.map(({ icon: Icon, text }) => (
                        <div key={text} className="flex items-center gap-3">
                            <div className="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
                                <Icon className="w-4 h-4 text-[#4F46E5]" />
                            </div>
                            <span className="text-sm text-slate-700">{text}</span>
                        </div>
                    ))}
                </div>

                {/* CTAs */}
                <div className="px-6 pb-6 space-y-3">
                    <Link href="/signup" onClick={onClose} className="block">
                        <Button className="w-full bg-[#4F46E5] hover:bg-[#4338CA] text-white h-12 text-base font-semibold shadow-lg">
                            Create Free Account
                        </Button>
                    </Link>
                    <button
                        onClick={onClose}
                        className="w-full text-sm text-slate-400 hover:text-slate-600 transition-colors py-1"
                    >
                        No thanks, keep it static
                    </button>
                </div>
            </div>
        </div>
    );
}