import React, { useState } from 'react';
import { useSecurity } from '../contexts/SecurityContext';
import { api } from '../services/api';
import { Lock, Loader2, Eye, EyeOff } from 'lucide-react';

interface Props {
  children: React.ReactNode;
  enabled?: boolean; // Whether protection is enabled for this user role
}

export const SensitiveContentProtection: React.FC<Props> = ({ children, enabled = true }) => {
  const { isSensitiveUnlocked, unlockSensitiveContent } = useSecurity();
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  // If protection is disabled (e.g. for Students/Admins if configured), just show content
  if (!enabled || isSensitiveUnlocked) {
    return <>{children}</>;
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!password) return;
    
    setLoading(true);
    setError('');

    try {
      const isValid = await api.auth.verifyPassword(password);
      if (isValid) {
        unlockSensitiveContent();
      } else {
        setError('密码错误，请重试');
      }
    } catch (err) {
      setError('验证失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="relative w-full h-full min-h-[calc(100vh-100px)]">
      {/* Blurred Content Background */}
      {/* We render children to create the visual "content behind blur" effect. 
          Pointer events are disabled to prevent interaction. 
          A heavy blur and opacity layer is applied. */}
      <div 
        className="absolute inset-0 filter blur-lg opacity-40 pointer-events-none select-none overflow-hidden bg-white" 
        aria-hidden="true"
      >
          {children}
      </div>

      {/* Overlay */}
      <div className="absolute inset-0 z-50 flex items-center justify-center bg-white/40 backdrop-blur-md">
        <div className="bg-white p-8 rounded-2xl shadow-2xl w-full max-w-md border border-gray-100 mx-4">
          <div className="flex flex-col items-center mb-6">
            <div className="p-4 bg-blue-50 rounded-full mb-4 ring-4 ring-blue-50/50">
              <Lock className="w-8 h-8 text-blue-600" />
            </div>
            <h2 className="text-xl font-bold text-gray-900">敏感内容保护</h2>
            <p className="text-gray-500 text-sm mt-2 text-center leading-relaxed">
              为了保护学生隐私与数据安全<br/>
              查看 <span className="font-medium text-gray-700">成绩管理</span> 与 <span className="font-medium text-gray-700">报表统计</span> 需验证身份
            </p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-5">
            <div className="space-y-1">
                <label className="text-xs font-medium text-gray-500 ml-1">登录密码</label>
                <div className="relative">
                <input
                    type={showPassword ? "text" : "password"}
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all bg-gray-50 focus:bg-white text-gray-800"
                    placeholder="请输入当前账号密码"
                    autoFocus
                />
                <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 p-1 rounded-md hover:bg-gray-100 transition-colors"
                >
                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                </button>
                </div>
            </div>

            {error && (
              <div className="text-red-500 text-sm bg-red-50 p-3 rounded-lg flex items-center justify-center font-medium animate-in fade-in slide-in-from-top-1">
                {error}
              </div>
            )}

            <button
              type="submit"
              disabled={loading || !password}
              className="w-full py-3.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-medium transition-all shadow-lg shadow-blue-600/20 hover:shadow-blue-600/30 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none active:scale-[0.98]"
            >
              {loading ? (
                <>
                  <Loader2 className="w-5 h-5 animate-spin mr-2" />
                  验证中...
                </>
              ) : (
                '验证并解锁'
              )}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};