video-flow-b/components/auth/email-conflict-modal.tsx

"use client";

import React, { useState } from "react";
import { X, AlertTriangle, Loader2 } from "lucide-react";
import type { EmailConflictData } from "@/app/types/google-oauth";

interface EmailConflictModalProps {
  isOpen: boolean;
  onClose: () => void;
  conflictData: EmailConflictData;
  onBindAccount: (bindToken: string) => Promise<void>;
  onReturnToLogin: () => void;
}

export const EmailConflictModal: React.FC<EmailConflictModalProps> = ({
  isOpen,
  onClose,
  conflictData,
  onBindAccount,
  onReturnToLogin,
}) => {
  const [isBinding, setIsBinding] = useState(false);
  const [error, setError] = useState("");

  if (!isOpen) return null;

  const handleBindAccount = async () => {
    try {
      setIsBinding(true);
      setError("");
      await onBindAccount(conflictData.bindToken);
      onClose();
    } catch (error: any) {
      console.error("Account binding failed:", error);
      setError(error.message || "Account binding failed");
    } finally {
      setIsBinding(false);
    }
  };

  const handleReturnToLogin = () => {
    onClose();
    onReturnToLogin();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
      <div className="bg-gradient-to-br from-gray-900/95 to-black/95 backdrop-blur-sm rounded-2xl shadow-2xl max-w-md w-full border border-gray-700/50 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-yellow-400/10 to-orange-500/10 pointer-events-none"></div>
        
        {/* Header */}
        <div className="relative z-10 p-6 pb-4">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center space-x-3">
              <div className="relative">
                <div className="absolute inset-0 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full blur-lg opacity-30"></div>
                <AlertTriangle className="h-8 w-8 text-yellow-400 relative z-10" />
              </div>
              <h2 className="text-xl font-semibold bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent">
                Account Conflict
              </h2>
            </div>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-white transition-colors p-1"
              disabled={isBinding}
            >
              <X className="h-5 w-5" />
            </button>
          </div>

          <div className="space-y-4">
            <p className="text-gray-300 text-sm leading-relaxed">
              The email address <strong className="text-white">{conflictData.existingUser.email}</strong> is already associated with an existing account.
            </p>
            
            <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700/50">
              <p className="text-sm text-gray-400 mb-2">Existing account type:</p>
              <div className="flex items-center space-x-2">
                <span className="px-2 py-1 bg-gray-700 rounded text-xs text-gray-300">
                  {conflictData.existingUser.authType}
                </span>
              </div>
            </div>

            <p className="text-gray-300 text-sm">
              You can either bind your Google account to the existing account or return to login with your existing credentials.
            </p>

            {error && (
              <div className="bg-red-500/20 text-red-300 p-3 rounded-lg border border-red-500/20 text-sm">
                {error}
              </div>
            )}
          </div>
        </div>

        {/* Actions */}
        <div className="relative z-10 p-6 pt-2 border-t border-gray-700/50">
          <div className="flex flex-col sm:flex-row gap-3">
            <button
              onClick={handleBindAccount}
              disabled={isBinding}
              className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-black font-medium rounded-lg hover:from-yellow-500 hover:to-orange-600 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isBinding ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  Binding...
                </>
              ) : (
                "Bind Google Account"
              )}
            </button>
            
            <button
              onClick={handleReturnToLogin}
              disabled={isBinding}
              className="flex-1 px-4 py-3 border border-gray-600 text-gray-300 font-medium rounded-lg hover:bg-gray-800 hover:border-gray-500 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Return to Login
            </button>
          </div>
          
          <p className="text-xs text-gray-500 text-center mt-3">
            Binding will allow you to login with either your existing credentials or Google account.
          </p>
        </div>
      </div>
    </div>
  );
};