'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import {
  Lock,
  LogIn,
  UserPlus,
  Zap,
  X,
  ShieldCheck,
  CheckCircle2,
  AlertCircle,
} from 'lucide-react';
import { useAuth } from '@/context/AuthContext';

interface AuthRequiredModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess?: () => void;
  title?: string;
  subtitle?: string;
  productTitle?: string;
  planName?: string;
  price?: number;
  redirectUrl?: string;
}

export default function AuthRequiredModal({
  isOpen,
  onClose,
  onSuccess,
  title = 'Account Required to Order',
  subtitle = 'Please log in or register a new HostNeko account to generate your license key and activate downloads.',
  productTitle,
  planName,
  price,
  redirectUrl = '/cart',
}: AuthRequiredModalProps) {
  const router = useRouter();
  const { login } = useAuth();
  const [isLoggingIn, setIsLoggingIn] = useState(false);

  if (!isOpen) return null;

  const handleQuickLogin = async () => {
    setIsLoggingIn(true);
    try {
      await login('teamrafi69@gmail.com', '@teamrafi69');
      if (onSuccess) {
        onSuccess();
      }
      onClose();
    } catch (e) {
      console.error(e);
    } finally {
      setIsLoggingIn(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
      <div className="bg-white rounded-3xl max-w-md w-full shadow-2xl border border-gray-100 overflow-hidden relative">
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-500 flex items-center justify-center transition"
          aria-label="Close modal"
        >
          <X className="w-4 h-4" />
        </button>

        {/* Modal Header */}
        <div className="p-6 sm:p-8 bg-gradient-to-b from-indigo-50/70 to-white text-center space-y-3">
          <div className="w-14 h-14 rounded-2xl bg-indigo-600 text-white flex items-center justify-center mx-auto shadow-lg shadow-indigo-600/30">
            <Lock className="w-7 h-7" />
          </div>
          <h3 className="text-xl sm:text-2xl font-black text-gray-900 leading-tight">
            {title}
          </h3>
          <p className="text-xs sm:text-sm text-gray-600 max-w-xs mx-auto leading-relaxed">
            {subtitle}
          </p>

          {/* Product Pill */}
          {productTitle && (
            <div className="mt-2 p-3 bg-white rounded-2xl border border-gray-100 shadow-sm flex items-center justify-between text-left">
              <div>
                <span className="text-[10px] font-extrabold text-indigo-600 uppercase tracking-wider block">
                  Selected Item
                </span>
                <h4 className="text-xs font-bold text-gray-900 truncate max-w-[200px]">
                  {productTitle}
                </h4>
                {planName && (
                  <span className="text-[11px] text-gray-500">{planName}</span>
                )}
              </div>
              {price !== undefined && (
                <span className="text-sm font-black text-emerald-600">
                  {price === 0 ? 'Free Trial' : `$${price.toFixed(2)}`}
                </span>
              )}
            </div>
          )}
        </div>

        {/* Action Buttons */}
        <div className="p-6 sm:p-8 pt-0 space-y-3">
          <Link
            href={`/login?redirect=${encodeURIComponent(redirectUrl)}`}
            onClick={onClose}
            className="w-full py-3.5 px-5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-sm flex items-center justify-center gap-2 shadow-md shadow-indigo-600/20 transition active:scale-95 text-center"
          >
            <LogIn className="w-4 h-4" />
            <span>Sign In to Existing Account</span>
          </Link>

          <Link
            href={`/register?redirect=${encodeURIComponent(redirectUrl)}`}
            onClick={onClose}
            className="w-full py-3.5 px-5 rounded-xl bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold text-sm flex items-center justify-center gap-2 transition active:scale-95 text-center border border-gray-200"
          >
            <UserPlus className="w-4 h-4" />
            <span>Create New Account</span>
          </Link>
        </div>

        {/* Security Footer Notice */}
        <div className="bg-gray-50 px-6 py-3 border-t border-gray-100 flex items-center justify-center gap-2 text-[11px] text-gray-500 font-medium">
          <ShieldCheck className="w-3.5 h-3.5 text-emerald-600" />
          <span>SSL 256-bit Encrypted &bull; Automated License Activation</span>
        </div>
      </div>
    </div>
  );
}