import React, { useState, useEffect } from 'react';
import {
  Lock,
  Unlock,
  KeyRound,
  ShieldCheck,
  AlertCircle,
  Sparkles,
  Sliders,
  ChevronDown,
  ChevronUp,
  Eye,
  EyeOff,
  LogOut,
  Globe,
  CheckCircle2,
  Copy,
  ExternalLink
} from 'lucide-react';
import { useVault } from '../context/VaultContext.js';

export const LockScreen: React.FC = () => {
  const {
    did,
    isInitialized,
    initializeVault,
    unlockVault,
    loadDemoVault,
    isLoading,
    error,
    kdfSettings,
    setKdfSettings,
    oauthSession,
    isOAuthLoading,
    isAtprotoConnected,
    handle,
    spaceUri,
    connectWithOAuth,
    disconnectOAuth
  } = useVault();

  const [identifier, setIdentifier] = useState('https://spaces-alpha.host.bsky.network');
  const [mode, setMode] = useState<'unlock' | 'create'>('unlock');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showKdfSettings, setShowKdfSettings] = useState(false);
  const [localError, setLocalError] = useState<string | null>(null);
  const [copiedDid, setCopiedDid] = useState(false);
  const [isSigningIn, setIsSigningIn] = useState(false);

  useEffect(() => {
    if (isInitialized) {
      setMode('unlock');
    } else {
      setMode('create');
    }
  }, [isInitialized]);

  const handleOAuthConnect = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!identifier.trim()) return;
    setLocalError(null);
    setIsSigningIn(true);
    try {
      await connectWithOAuth(identifier.trim());
    } catch (err: any) {
      setLocalError(err.message || 'Failed to connect via OAuth');
    } finally {
      setIsSigningIn(false);
    }
  };

  const handleVaultSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLocalError(null);

    if (!password) {
      setLocalError('Please enter your master password.');
      return;
    }

    try {
      if (mode === 'create') {
        if (password.length < 8) {
          setLocalError('Master password must be at least 8 characters long.');
          return;
        }
        if (password !== confirmPassword) {
          setLocalError('Master passwords do not match.');
          return;
        }
        await initializeVault(password, kdfSettings);
      } else {
        await unlockVault(password);
      }
    } catch (err: any) {
      console.warn('Authentication attempt failed:', err);
    }
  };

  const handleCopyDid = () => {
    navigator.clipboard.writeText(did);
    setCopiedDid(true);
    setTimeout(() => setCopiedDid(false), 2000);
  };

  const handleDemoVault = async () => {
    setLocalError(null);
    try {
      await loadDemoVault();
    } catch (err: any) {
      setLocalError(err.message || 'Failed to load demo vault');
    }
  };

  const currentDisplayError = localError || error;

  return (
    <div className="min-h-screen flex items-center justify-center bg-radial from-slate-900 via-slate-950 to-black p-4 sm:p-6 text-slate-100">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-tr from-cyan-600 via-teal-500 to-sky-400 shadow-xl shadow-cyan-500/20 mb-4 border border-cyan-300/30">
            <ShieldCheck className="w-9 h-9 text-slate-950 stroke-[2.2]" />
          </div>
          <h1 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-white via-slate-200 to-slate-400 bg-clip-text text-transparent">
            2password
          </h1>
          <p className="text-sm text-slate-400 mt-1.5 font-medium">
            Zero-Knowledge Vault natively secured by AT Protocol & Spaces
          </p>
        </div>

        <div className="bg-slate-900/80 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-6 sm:p-8 space-y-6">
          {currentDisplayError && (
            <div className="flex items-start gap-3 p-3.5 rounded-xl bg-rose-500/10 border border-rose-500/30 text-rose-300 text-xs animate-shake">
              <AlertCircle className="w-4 h-4 text-rose-400 shrink-0 mt-0.5" />
              <div className="flex-1 leading-relaxed">
                <span className="font-semibold block">Notice</span>
                {currentDisplayError}
              </div>
            </div>
          )}

          {!isAtprotoConnected && !did.includes('demo') ? (
            <div className="space-y-5">
              <div className="text-center space-y-1">
                <h2 className="text-base font-semibold text-slate-200 flex items-center justify-center gap-2">
                  <Globe className="w-4 h-4 text-cyan-400" />
                  Connect with AT Protocol
                </h2>
                <p className="text-xs text-slate-400 leading-relaxed">
                  Log in via ATProto OAuth to securely link your Space and derive your identity salt.
                </p>
              </div>

              <form onSubmit={handleOAuthConnect} className="space-y-4">
                <div>
                  <label className="block text-xs font-medium text-slate-300 mb-1.5">
                    Handle, DID, or PDS Host
                  </label>
                  <input
                    type="text"
                    value={identifier}
                    onChange={(e) => setIdentifier(e.target.value)}
                    placeholder="alice.bsky.social or https://spaces-alpha.host.bsky.network"
                    className="w-full px-3.5 py-2.5 bg-slate-950/60 border border-slate-700/80 rounded-xl text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-colors"
                    required
                  />

                  <div className="mt-2 flex items-center gap-2">
                    <span className="text-[10px] text-slate-500">Quick connect:</span>
                    <button
                      type="button"
                      onClick={() => setIdentifier('https://spaces-alpha.host.bsky.network')}
                      className="text-[10px] px-2 py-0.5 rounded bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
                    >
                      spaces-alpha
                    </button>
                    <button
                      type="button"
                      onClick={() => setIdentifier('https://bsky.social')}
                      className="text-[10px] px-2 py-0.5 rounded bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
                    >
                      bsky.social
                    </button>
                  </div>
                </div>

                <button
                  type="submit"
                  disabled={isSigningIn || isOAuthLoading}
                  className="w-full py-3 px-4 rounded-xl bg-gradient-to-r from-cyan-500 to-teal-500 hover:from-cyan-400 hover:to-teal-400 text-slate-950 font-bold text-sm shadow-lg shadow-cyan-500/20 hover:shadow-cyan-500/30 transition-all flex items-center justify-center gap-2 disabled:opacity-50 cursor-pointer"
                >
                  {isSigningIn || isOAuthLoading ? (
                    <>
                      <div className="w-4 h-4 border-2 border-slate-950 border-t-transparent rounded-full animate-spin" />
                      <span>Redirecting to PDS OAuth…</span>
                    </>
                  ) : (
                    <>
                      <ExternalLink className="w-4 h-4 stroke-[2.5]" />
                      <span>Connect with AT Protocol</span>
                    </>
                  )}
                </button>
              </form>

              <div className="relative my-2">
                <div className="absolute inset-0 flex items-center">
                  <div className="w-full border-t border-slate-800" />
                </div>
                <div className="relative flex justify-center text-[11px] uppercase tracking-wider">
                  <span className="bg-slate-900 px-3 text-slate-500 font-medium">Or</span>
                </div>
              </div>

              <button
                type="button"
                onClick={handleDemoVault}
                disabled={isLoading}
                className="w-full py-2.5 px-4 rounded-xl bg-slate-950 hover:bg-slate-800/80 border border-slate-700/80 hover:border-cyan-500/50 text-slate-200 text-xs font-semibold transition-all flex items-center justify-center gap-2 group cursor-pointer shadow-sm"
              >
                <Sparkles className="w-4 h-4 text-cyan-400 group-hover:scale-110 transition-transform" />
                <span>Try Demo Vault (Local / Offline Mode)</span>
              </button>
            </div>
          ) : (
            <div className="space-y-6">
              <div className="p-3 rounded-xl bg-slate-950/70 border border-teal-500/30 flex items-center justify-between">
                <div className="flex items-center gap-2.5 min-w-0">
                  <span className="relative flex h-2.5 w-2.5 shrink-0">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-teal-400 opacity-75" />
                    <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-teal-500" />
                  </span>
                  <div className="min-w-0">
                    <div className="flex items-center gap-1.5">
                      <span className="text-xs font-bold text-slate-200 truncate">
                        {handle ? `@${handle}` : 'ATProto Connected'}
                      </span>
                      <CheckCircle2 className="w-3.5 h-3.5 text-teal-400 shrink-0" />
                    </div>
                    <div className="flex items-center gap-1">
                      <span className="text-[10px] font-mono text-slate-400 truncate max-w-[170px]" title={did}>
                        {did}
                      </span>
                      <button
                        type="button"
                        onClick={handleCopyDid}
                        className="text-slate-500 hover:text-slate-300 transition-colors"
                        title="Copy DID"
                      >
                        {copiedDid ? <CheckCircle2 className="w-2.5 h-2.5 text-teal-400" /> : <Copy className="w-2.5 h-2.5" />}
                      </button>
                    </div>
                    {spaceUri && (
                      <div className="text-[9px] font-mono text-teal-400/90 truncate max-w-[170px] mt-0.5" title={`Secret ATProto Space: ${spaceUri}`}>
                        🔒 Space: {typeof spaceUri === 'string' ? spaceUri.split('/').pop() : ''}
                      </div>
                    )}
                  </div>
                </div>

                <button
                  type="button"
                  onClick={disconnectOAuth}
                  className="text-[11px] px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white transition-all flex items-center gap-1 shrink-0"
                >
                  <LogOut className="w-3 h-3" />
                  <span>Disconnect</span>
                </button>
              </div>

              <div className="flex rounded-xl bg-slate-950/80 p-1 border border-slate-800">
                <button
                  type="button"
                  onClick={() => {
                    setMode('unlock');
                    setLocalError(null);
                  }}
                  className={`flex-1 py-2 text-xs font-semibold rounded-lg transition-all flex items-center justify-center gap-1.5 ${
                    mode === 'unlock'
                      ? 'bg-gradient-to-r from-cyan-600 to-teal-600 text-white shadow-md'
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                  <Lock className="w-3.5 h-3.5" />
                  Unlock Vault
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setMode('create');
                    setLocalError(null);
                  }}
                  className={`flex-1 py-2 text-xs font-semibold rounded-lg transition-all flex items-center justify-center gap-1.5 ${
                    mode === 'create'
                      ? 'bg-gradient-to-r from-cyan-600 to-teal-600 text-white shadow-md'
                      : 'text-slate-400 hover:text-slate-200'
                  }`}
                >
                  <KeyRound className="w-3.5 h-3.5" />
                  New Vault
                </button>
              </div>

              <form onSubmit={handleVaultSubmit} className="space-y-4">
                <div>
                  <div className="flex items-center justify-between mb-1.5">
                    <label className="text-xs font-medium text-slate-300">
                      Master Password
                    </label>
                    <span className="text-[10px] text-cyan-400 font-mono">
                      Zero-Knowledge AES-256
                    </span>
                  </div>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-500">
                      <Lock className="w-4 h-4" />
                    </div>
                    <input
                      type={showPassword ? 'text' : 'password'}
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      placeholder={mode === 'create' ? 'Create a strong master password' : 'Enter your master password'}
                      className="w-full pl-9 pr-10 py-2.5 bg-slate-950/60 border border-slate-700/80 rounded-xl text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-colors"
                      required
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-400 hover:text-slate-200 transition-colors"
                      aria-label={showPassword ? 'Hide password' : 'Show password'}
                    >
                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                    </button>
                  </div>
                </div>

                {mode === 'create' && (
                  <div>
                    <label className="block text-xs font-medium text-slate-300 mb-1.5">
                      Confirm Master Password
                    </label>
                    <div className="relative">
                      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-500">
                        <Lock className="w-4 h-4" />
                      </div>
                      <input
                        type={showPassword ? 'text' : 'password'}
                        value={confirmPassword}
                        onChange={(e) => setConfirmPassword(e.target.value)}
                        placeholder="Repeat master password"
                        className="w-full pl-9 pr-3 py-2.5 bg-slate-950/60 border border-slate-700/80 rounded-xl text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-colors"
                        required
                      />
                    </div>
                  </div>
                )}

                <div className="pt-1">
                  <button
                    type="button"
                    onClick={() => setShowKdfSettings(!showKdfSettings)}
                    className="w-full flex items-center justify-between text-xs text-slate-400 hover:text-slate-200 py-1 transition-colors"
                  >
                    <span className="flex items-center gap-1.5">
                      <Sliders className="w-3.5 h-3.5 text-cyan-400" />
                      Argon2id KDF Parameters
                    </span>
                    <span className="flex items-center gap-1 font-mono text-[10px] text-slate-500">
                      {kdfSettings.iterations} iters / {Math.round(kdfSettings.memory / 1024)} MB
                      {showKdfSettings ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
                    </span>
                  </button>

                  {showKdfSettings && (
                    <div className="mt-2.5 p-3 rounded-xl bg-slate-950/90 border border-slate-800 space-y-3 text-xs">
                      <div className="flex items-center justify-between">
                        <span className="text-slate-400">Iterations (Time cost):</span>
                        <div className="flex items-center gap-2">
                          <input
                            type="range"
                            min="1"
                            max="8"
                            step="1"
                            value={kdfSettings.iterations}
                            disabled={mode === 'unlock' && isInitialized}
                            onChange={(e) =>
                              setKdfSettings((prev) => ({ ...prev, iterations: Number(e.target.value) }))
                            }
                            className="w-24 accent-cyan-500"
                          />
                          <span className="font-mono text-cyan-400 w-4 text-right">
                            {kdfSettings.iterations}
                          </span>
                        </div>
                      </div>

                      <div className="flex items-center justify-between">
                        <span className="text-slate-400">Memory (KiB):</span>
                        <div className="flex items-center gap-2">
                          <select
                            value={kdfSettings.memory}
                            disabled={mode === 'unlock' && isInitialized}
                            onChange={(e) =>
                              setKdfSettings((prev) => ({ ...prev, memory: Number(e.target.value) }))
                            }
                            className="bg-slate-900 border border-slate-700 rounded-lg px-2 py-1 font-mono text-[11px] text-slate-200"
                          >
                            <option value={16384}>16 MB (Fast / Mobile)</option>
                            <option value={32768}>32 MB (Balanced)</option>
                            <option value={65536}>64 MB (Standard RFC)</option>
                            <option value={131072}>128 MB (High Security)</option>
                          </select>
                        </div>
                      </div>

                      <div className="flex items-center justify-between">
                        <span className="text-slate-400">Parallelism (Lanes):</span>
                        <span className="font-mono text-cyan-400">{kdfSettings.parallelism}</span>
                      </div>
                    </div>
                  )}
                </div>

                <button
                  type="submit"
                  disabled={isLoading}
                  className="w-full py-3 px-4 rounded-xl bg-gradient-to-r from-cyan-500 to-teal-500 hover:from-cyan-400 hover:to-teal-400 text-slate-950 font-bold text-sm shadow-lg shadow-cyan-500/20 hover:shadow-cyan-500/30 transition-all flex items-center justify-center gap-2 disabled:opacity-50 cursor-pointer"
                >
                  {isLoading ? (
                    <>
                      <div className="w-4 h-4 border-2 border-slate-950 border-t-transparent rounded-full animate-spin" />
                      <span>{mode === 'create' ? 'Deriving Master Key & Initializing...' : 'Verifying & Unlocking...'}</span>
                    </>
                  ) : mode === 'create' ? (
                    <>
                      <KeyRound className="w-4 h-4 stroke-[2.5]" />
                      <span>Create & Initialize Vault in Space</span>
                    </>
                  ) : (
                    <>
                      <Unlock className="w-4 h-4 stroke-[2.5]" />
                      <span>Unlock Vault</span>
                    </>
                  )}
                </button>
              </form>
            </div>
          )}
        </div>

        <p className="text-center text-xs text-slate-600 mt-6">
          Encrypted client-side with AES-256-GCM. Master keys never leave this browser.
        </p>
      </div>
    </div>
  );
};