import { useState, useEffect } from 'react';
import { Shield, Lock, QrCode, Mail, Phone, MapPin, RefreshCw, Eye, EyeOff, Clock, Copy, Check, Link, User, LogIn } from 'lucide-react';

export default function IdentityMaskingService() {
  const [user, setUser] = useState(null);
  const [originalData, setOriginalData] = useState({
    ssn: '',
    address: '',
    phone: '',
    email: '',
    fullName: '',
    dateOfBirth: ''
  });

  const [maskedData, setMaskedData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [showQR, setShowQR] = useState(false);
  const [showOriginal, setShowOriginal] = useState(false);
  const [expiryTime, setExpiryTime] = useState(24); // Default 24 hours
  const [copied, setCopied] = useState({});
  const [shareableUrl, setShareableUrl] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [existingMask, setExistingMask] = useState(null);

  const [authMode, setAuthMode] = useState('login'); // 'login' or 'signup'
  const [authData, setAuthData] = useState({
    email: '',
    password: '',
    confirmPassword: ''
  });
  const [authError, setAuthError] = useState('');

  useEffect(() => {
    checkExistingMask();
    checkLoginStatus();
  }, []);

  const checkLoginStatus = async () => {
    try {
      const response = await fetch('https://www.sitebrew.ai/api/JszWPw/auth/status');
      const data = await response.json();
      setIsLoggedIn(data.isLoggedIn);
      if (data.isLoggedIn) {
        setUser(data.user);
        loadUserData();
      }
    } catch (error) {
      console.error('Auth check failed:', error);
    }
  };

  const checkExistingMask = async () => {
    if (!user) return;
    
    try {
      const response = await fetch(`https://www.sitebrew.ai/api/JszWPw/identities/${user.id}`);
      const data = await response.json();
      if (data.document && !isExpired(data.document.expiresAt)) {
        setExistingMask(data.document);
        setMaskedData(data.document.maskedData);
        setShareableUrl(data.document.shareableUrl);
      }
    } catch (error) {
      console.error('Failed to check existing mask:', error);
    }
  };

  const isExpired = (expiryDate) => {
    return new Date(expiryDate) < new Date();
  };

  const loadUserData = async () => {
    try {
      const response = await fetch('https://www.sitebrew.ai/api/JszWPw/user-data');
      const data = await response.json();
      setOriginalData(data.document);
    } catch (error) {
      console.error('Failed to load user data:', error);
    }
  };

  const copyToClipboard = async (text, field) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied({ ...copied, [field]: true });
      setTimeout(() => setCopied({ ...copied, [field]: false }), 2000);
    } catch (error) {
      console.error('Failed to copy:', error);
    }
  };

  const generateShareableUrl = async (maskId) => {
    const url = `${window.location.origin}/mask/${maskId}`;
    setShareableUrl(url);
    return url;
  };

  const generateMaskedIdentity = async () => {
    if (existingMask) {
      alert('You already have an active masked identity. Please wait for it to expire or delete it.');
      return;
    }

    setLoading(true);
    try {
      // Verify input data
      const verificationResponse = await fetch('https://www.sitebrew.ai/api/JszWPw/verify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          document: originalData
        })
      });

      if (!verificationResponse.ok) {
        throw new Error('Verification failed');
      }

      // Generate masked identity using AI
      const aiResponse = await fetch('https://www.sitebrew.ai/api/genai', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: [
            {
              role: "system",
              content: "Generate a masked identity that maintains demographic similarity while protecting real information"
            },
            {
              role: "user",
              content: JSON.stringify(originalData)
            }
          ]
        })
      });

      const maskedIdentity = await aiResponse.json();
      const expiryDate = new Date(Date.now() + expiryTime * 60 * 60 * 1000);
      
      // Create new masked identity record
      const response = await fetch('https://www.sitebrew.ai/api/JszWPw/identities', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          document: {
            userId: user.id,
            originalData: originalData,
            maskedData: JSON.parse(maskedIdentity.message.content),
            createdAt: new Date().toISOString(),
            expiresAt: expiryDate.toISOString(),
            isActive: true
          }
        })
      });

      const newMask = await response.json();
      const shareableUrl = await generateShareableUrl(newMask.document._id);

      setMaskedData(JSON.parse(maskedIdentity.message.content));
      setShowQR(true);
      setExistingMask(newMask.document);

    } catch (error) {
      console.error('Error:', error);
      alert('Failed to generate masked identity. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  const deleteMaskedIdentity = async () => {
    if (!existingMask) return;

    try {
      await fetch(`https://www.sitebrew.ai/api/JszWPw/identities/${existingMask._id}`, {
        method: 'DELETE'
      });
      setExistingMask(null);
      setMaskedData(null);
      setShareableUrl('');
    } catch (error) {
      console.error('Failed to delete masked identity:', error);
    }
  };

  // Authentication Functions
  const handleAuth = async (e) => {
    e.preventDefault();
    setAuthError('');

    if (authMode === 'signup' && authData.password !== authData.confirmPassword) {
      setAuthError('Passwords do not match');
      return;
    }

    try {
      const endpoint = authMode === 'login' ? 'login' : 'signup';
      const response = await fetch(`https://www.sitebrew.ai/api/JszWPw/auth/${endpoint}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          document: {
            email: authData.email,
            password: authData.password
          }
        })
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || 'Authentication failed');
      }

      setUser(data.user);
      setIsLoggedIn(true);
      
      // If signing up, automatically log in
      if (authMode === 'signup') {
        await handleAuth({ preventDefault: () => {} }); // Auto login after signup
      }
    } catch (error) {
      setAuthError(error.message);
    }
  };

  const handleLogout = async () => {
    try {
      await fetch('https://www.sitebrew.ai/api/JszWPw/auth/logout', {
        method: 'POST'
      });
      setUser(null);
      setIsLoggedIn(false);
      setMaskedData(null);
      setOriginalData({
        ssn: '',
        address: '',
        phone: '',
        email: '',
        fullName: '',
        dateOfBirth: ''
      });
    } catch (error) {
      console.error('Logout failed:', error);
    }
  };

  const LoginForm = () => (
    <div className="bg-gray-800 rounded-xl p-6 shadow-xl space-y-6">
      <div className="text-center space-y-2">
        <h2 className="text-xl font-semibold">
          {authMode === 'login' ? 'Login' : 'Create Account'}
        </h2>
        <p className="text-gray-400 text-sm">
          {authMode === 'login' 
            ? 'Access your secure identity mask'
            : 'Start protecting your identity'}
        </p>
      </div>

      {authError && (
        <div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-2 rounded-lg text-sm">
          {authError}
        </div>
      )}

      <form onSubmit={handleAuth} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
          <input
            type="email"
            required
            className="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
            value={authData.email}
            onChange={(e) => setAuthData({ ...authData, email: e.target.value })}
            placeholder="Enter your email"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-300 mb-2">Password</label>
          <input
            type="password"
            required
            className="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
            value={authData.password}
            onChange={(e) => setAuthData({ ...authData, password: e.target.value })}
            placeholder="Enter your password"
          />
        </div>

        {authMode === 'signup' && (
          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">Confirm Password</label>
            <input
              type="password"
              required
              className="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
              value={authData.confirmPassword}
              onChange={(e) => setAuthData({ ...authData, confirmPassword: e.target.value })}
              placeholder="Confirm your password"
            />
          </div>
        )}

        <button
          type="submit"
          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition duration-200"
        >
          {authMode === 'login' ? (
            <>
              <LogIn className="w-5 h-5" />
              <span>Login</span>
            </>
          ) : (
            <>
              <User className="w-5 h-5" />
              <span>Create Account</span>
            </>
          )}
        </button>

        <div className="text-center text-sm">
          <button
            type="button"
            onClick={() => {
              setAuthMode(authMode === 'login' ? 'signup' : 'login');
              setAuthError('');
            }}
            className="text-blue-400 hover:text-blue-300 transition-colors"
          >
            {authMode === 'login' 
              ? "Don't have an account? Sign up"
              : 'Already have an account? Login'}
          </button>
        </div>
      </form>
    </div>
  );

  const Header = () => (
    <header className="text-center space-y-4 py-8 relative">
      <div className="flex justify-center">
        <Shield className="w-16 h-16 text-blue-400" />
      </div>
      <h1 className="text-3xl font-bold">Identity Shield</h1>
      <p className="text-gray-400">Secure Identity Masking Service</p>
      
      {isLoggedIn && (
        <button
          onClick={handleLogout}
          className="absolute right-0 top-0 text-gray-400 hover:text-white transition-colors"
        >
          Logout
        </button>
      )}
    </header>
  );

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-white p-4">
      <div className="max-w-md mx-auto space-y-8">
        <Header />

        {!isLoggedIn ? (
          <LoginForm />
        ) : (
          <>
            <div className="bg-gray-800 rounded-xl p-6 shadow-xl space-y-6">
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">Full Name</label>
                  <input
                    type="text"
                    className="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
                    value={originalData.fullName}
                    onChange={(e) => setOriginalData({...originalData, fullName: e.target.value})}
                    placeholder="Enter your full name"
                  />
                </div>
  
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">Social Security Number</label>
                  <div className="relative">
                    <input
                      type={showOriginal ? "text" : "password"}
                      className="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
                      value={originalData.ssn}
                      onChange={(e) => setOriginalData({...originalData, ssn: e.target.value})}
                      placeholder="XXX-XX-XXXX"
                    />
                    <button
                      onClick={() => setShowOriginal(!showOriginal)}
                      className="absolute right-2 top-1/2 transform -translate-y-1/2"
                    >
                      {showOriginal ? <EyeOff className="w-5 h-5 text-gray-400" /> : <Eye className="w-5 h-5 text-gray-400" />}
                    </button>
                  </div>
                </div>
  
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">Date of Birth</label>
                  <input
                    type="date"
                    className="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
                    value={originalData.dateOfBirth}
                    onChange={(e) => setOriginalData({...originalData, dateOfBirth: e.target.value})}
                  />
                </div>
  
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">Address</label>
                  <input
                    type="text"
                    className="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
                    value={originalData.address}
                    onChange={(e) => setOriginalData({...originalData, address: e.target.value})}
                    placeholder="Enter your address"
                  />
                </div>
  
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">Phone Number</label>
                  <input
                    type="tel"
                    className="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
                    value={originalData.phone}
                    onChange={(e) => setOriginalData({...originalData, phone: e.target.value})}
                    placeholder="(XXX) XXX-XXXX"
                  />
                </div>
  
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
                  <input
                    type="email"
                    className="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
                    value={originalData.email}
                    onChange={(e) => setOriginalData({...originalData, email: e.target.value})}
                    placeholder="Enter your email"
                  />
                </div>
              </div>
  
              <button
                onClick={generateMaskedIdentity}
                disabled={loading}
                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center space-x-2 transition duration-200"
              >
                {loading ? (
                  <RefreshCw className="w-5 h-5 animate-spin" />
                ) : (
                  <>
                    <Lock className="w-5 h-5" />
                    <span>Generate Masked Identity</span>
                  </>
                )}
              </button>
            </div>

            {maskedData && (
              <div className="bg-gray-800 rounded-xl p-6 shadow-xl space-y-4">
                <div className="flex justify-between items-center">
                  <h2 className="text-xl font-semibold flex items-center gap-2">
                    <Shield className="w-5 h-5 text-blue-400" />
                    Masked Identity
                  </h2>
                  <div className="flex items-center gap-2">
                    <Clock className="w-4 h-4 text-gray-400" />
                    <span className="text-sm text-gray-400">
                      Expires in: {Math.ceil((new Date(existingMask?.expiresAt) - new Date()) / (1000 * 60 * 60))}h
                    </span>
                  </div>
                </div>
                
                <div className="space-y-3">
                  {Object.entries(maskedData).map(([key, value]) => (
                    <div key={key} className="flex justify-between items-center">
                      <div>
                        <label className="text-sm text-gray-400">{key}</label>
                        <p className="font-medium">{value}</p>
                      </div>
                      <button
                        onClick={() => copyToClipboard(value, key)}
                        className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
                      >
                        {copied[key] ? (
                          <Check className="w-4 h-4 text-green-400" />
                        ) : (
                          <Copy className="w-4 h-4 text-gray-400" />
                        )}
                      </button>
                    </div>
                  ))}
                </div>

                <div className="mt-4">
                  <label className="text-sm text-gray-400">Shareable URL</label>
                  <div className="flex items-center gap-2 mt-1">
                    <input
                      type="text"
                      value={shareableUrl}
                      readOnly
                      className="flex-1 px-3 py-2 bg-gray-700 rounded-lg"
                    />
                    <button
                      onClick={() => copyToClipboard(shareableUrl, 'url')}
                      className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
                    >
                      {copied['url'] ? (
                        <Check className="w-4 h-4 text-green-400" />
                      ) : (
                        <Copy className="w-4 h-4 text-gray-400" />
                      )}
                    </button>
                  </div>
                </div>

                {showQR && (
                  <div className="mt-4 flex justify-center">
                    <QrCode className="w-32 h-32 text-blue-400" />
                  </div>
                )}

                <button
                  onClick={deleteMaskedIdentity}
                  className="w-full mt-4 bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200"
                >
                  Delete Masked Identity
                </button>
              </div>
            )}
          </>
        )}

        <footer className="text-center text-sm text-gray-400">
          <p>Protected by advanced encryption and AI technology</p>
          <div className="flex justify-center space-x-4 mt-4">
            <Lock className="w-5 h-5" />
            <Shield className="w-5 h-5" />
            <QrCode className="w-5 h-5" />
          </div>
        </footer>
      </div>
    </div>
  );
}