import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Copy, RefreshCw, ShieldCheck, Check, History, Trash2, Settings, Lock } from 'lucide-react';

export default function App() {
  const [password, setPassword] = useState('');
  const [length, setLength] = useState(16);
  const [includeUpper, setIncludeUpper] = useState(true);
  const [includeLower, setIncludeLower] = useState(true);
  const [includeNumbers, setIncludeNumbers] = useState(true);
  const [includeSymbols, setIncludeSymbols] = useState(true);
  const [excludeAmbiguous, setExcludeAmbiguous] = useState(false);
  const [copied, setCopied] = useState(false);
  const [history, setHistory] = useState([]);
  const [strength, setStrength] = useState(0);

  // Character Sets
  const UPPERCASE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const LOWERCASE = 'abcdefghijklmnopqrstuvwxyz';
  const NUMBERS = '0123456789';
  const SYMBOLS = '!@#$%^&*()_+~`|}{[]:;?><,./-=';
  const AMBIGUOUS = 'Il1O0';

  // Calculate Password Strength
  const calculateStrength = useCallback((pwd) => {
    let score = 0;
    if (!pwd) return 0;

    if (pwd.length > 8) score += 1;
    if (pwd.length > 12) score += 1;
    if (pwd.length >= 16) score += 1;

    if (/[A-Z]/.test(pwd)) score += 1;
    if (/[a-z]/.test(pwd)) score += 1;
    if (/[0-9]/.test(pwd)) score += 1;
    if (/[^A-Za-z0-9]/.test(pwd)) score += 1;

    return Math.min(score, 4); // Max score 4 (0-4 scale for 5 levels)
  }, []);

  const generatePassword = useCallback(() => {
    let charSet = '';
    if (includeLower) charSet += LOWERCASE;
    if (includeUpper) charSet += UPPERCASE;
    if (includeNumbers) charSet += NUMBERS;
    if (includeSymbols) charSet += SYMBOLS;

    if (excludeAmbiguous) {
        // Create regex from ambiguous string
        const regex = new RegExp(`[${AMBIGUOUS}]`, 'g');
        charSet = charSet.replace(regex, '');
    }

    if (charSet === '') {
        setPassword('');
        setStrength(0);
        return;
    }

    let generatedPassword = '';
    const array = new Uint32Array(length);
    window.crypto.getRandomValues(array);

    for (let i = 0; i < length; i++) {
      generatedPassword += charSet.charAt(array[i] % charSet.length);
    }

    setPassword(generatedPassword);
    setStrength(calculateStrength(generatedPassword));
    setCopied(false);
    
    // Add to history if not empty
    if(generatedPassword) {
        setHistory(prev => {
            const newHistory = [generatedPassword, ...prev].slice(0, 10);
            return newHistory;
        });
    }

  }, [length, includeLower, includeUpper, includeNumbers, includeSymbols, excludeAmbiguous, calculateStrength]);

  // Initial generation on mount
  useEffect(() => {
    generatePassword();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleCopy = (textToCopy) => {
    if (!textToCopy) return;
    
    // Create a temporary textarea element (fallback for iframe restrictions)
    const textArea = document.createElement("textarea");
    textArea.value = textToCopy;
    
    // Ensure it's not visible but part of the DOM
    textArea.style.position = "fixed";
    textArea.style.left = "-9999px";
    textArea.style.top = "0";
    document.body.appendChild(textArea);
    
    textArea.focus();
    textArea.select();
    
    try {
      document.execCommand('copy');
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Unable to copy', err);
    }
    
    document.body.removeChild(textArea);
  };

  const getStrengthColor = () => {
    switch (strength) {
      case 0: return 'bg-red-500';
      case 1: return 'bg-orange-500';
      case 2: return 'bg-yellow-500';
      case 3: return 'bg-blue-500';
      case 4: return 'bg-emerald-500';
      default: return 'bg-slate-200';
    }
  };

  const getStrengthLabel = () => {
    switch (strength) {
      case 0: return 'Vulnerable';
      case 1: return 'Weak';
      case 2: return 'Fair';
      case 3: return 'Strong';
      case 4: return 'Unbreakable';
      default: return '';
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans p-4 md:p-8 flex items-center justify-center">
      <div className="w-full max-w-lg space-y-6">
        
        {/* Header */}
        <div className="text-center space-y-2">
            <div className="flex items-center justify-center gap-2 mb-2">
                <div className="p-3 bg-indigo-600 rounded-xl shadow-lg shadow-indigo-500/20">
                    <Lock size={32} className="text-white" />
                </div>
            </div>
            <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-cyan-600 bg-clip-text text-transparent">
                Password Generator
            </h1>
            <p className="text-slate-500 text-sm">Client-Side Password Generator</p>
        </div>

        {/* Password Display Card */}
        <div className="bg-white rounded-2xl p-6 shadow-xl border border-slate-200 relative overflow-hidden group">
            <div className="absolute top-0 left-0 w-full h-1 bg-slate-200">
                <div 
                    className={`h-full transition-all duration-500 ${getStrengthColor()}`} 
                    style={{ width: `${(strength + 1) * 20}%` }}
                />
            </div>
            
            <div className="flex flex-col gap-2">
                <label className="text-xs font-semibold uppercase tracking-wider text-slate-500 flex justify-between">
                    <span>Generated Password</span>
                    <span className={`transition-colors duration-300 ${
                        strength > 2 ? 'text-emerald-600' : 
                        strength === 2 ? 'text-yellow-600' : 'text-red-500'
                    }`}>
                        {getStrengthLabel()}
                    </span>
                </label>
                <div className="relative">
                    <div className="break-all font-mono text-2xl md:text-3xl text-slate-800 tracking-wide min-h-[3rem] flex items-center">
                        {password}
                    </div>
                </div>
            </div>

            <div className="mt-6 flex gap-3">
                <button 
                    onClick={() => handleCopy(password)}
                    className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-semibold transition-all duration-200 ${
                        copied 
                        ? 'bg-emerald-500/10 text-emerald-600 border border-emerald-500/30' 
                        : 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/25 active:scale-95'
                    }`}
                >
                    {copied ? <Check size={20} /> : <Copy size={20} />}
                    {copied ? 'Copied!' : 'Copy Password'}
                </button>
                <button 
                    onClick={generatePassword}
                    className="p-3 rounded-xl bg-white hover:bg-slate-50 text-slate-600 transition-all active:rotate-180 duration-500 border border-slate-200 shadow-sm"
                    title="Generate New"
                >
                    <RefreshCw size={24} />
                </button>
            </div>
        </div>

        {/* Controls */}
        <div className="bg-white rounded-2xl p-6 shadow-xl border border-slate-200 space-y-6">
            
            {/* Length Slider */}
            <div className="space-y-4">
                <div className="flex justify-between items-center">
                    <label className="text-slate-700 font-medium flex items-center gap-2">
                        <Settings size={16} />
                        Password Length
                    </label>
                    <span className="bg-slate-100 px-3 py-1 rounded-lg text-indigo-600 font-mono font-bold border border-slate-200">
                        {length}
                    </span>
                </div>
                <input 
                    type="range" 
                    min="6" 
                    max="64" 
                    value={length} 
                    onChange={(e) => setLength(parseInt(e.target.value))}
                    className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"
                />
            </div>

            <div className="h-px bg-slate-200 w-full" />

            {/* Toggles Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Toggle 
                    label="Uppercase (A-Z)" 
                    checked={includeUpper} 
                    onChange={setIncludeUpper} 
                />
                <Toggle 
                    label="Lowercase (a-z)" 
                    checked={includeLower} 
                    onChange={setIncludeLower} 
                />
                <Toggle 
                    label="Numbers (0-9)" 
                    checked={includeNumbers} 
                    onChange={setIncludeNumbers} 
                />
                <Toggle 
                    label="Symbols (!@#...)" 
                    checked={includeSymbols} 
                    onChange={setIncludeSymbols} 
                />
                 <Toggle 
                    label="No Ambiguous (I, l, 1...)" 
                    checked={excludeAmbiguous} 
                    onChange={setExcludeAmbiguous} 
                    tooltip="Removes characters that look similar"
                />
            </div>
        </div>

        {/* History */}
        {history.length > 0 && (
            <div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-lg">
                <div className="flex justify-between items-center mb-4">
                    <h3 className="text-slate-500 font-medium flex items-center gap-2">
                        <History size={16} />
                        Recent Passwords
                    </h3>
                    <button 
                        onClick={() => setHistory([])}
                        className="text-xs text-slate-400 hover:text-red-500 flex items-center gap-1 transition-colors"
                    >
                        <Trash2 size={12} /> Clear
                    </button>
                </div>
                <div className="space-y-2">
                    {history.slice(1, 6).map((pastPwd, index) => (
                        <div key={index} className="flex justify-between items-center p-3 bg-slate-50 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors group">
                            <span className="font-mono text-slate-600 text-sm truncate max-w-[200px] md:max-w-[300px]">
                                {pastPwd}
                            </span>
                            <button 
                                onClick={() => handleCopy(pastPwd)}
                                className="text-slate-400 hover:text-indigo-600 opacity-0 group-hover:opacity-100 transition-all p-1"
                                title="Copy"
                            >
                                <Copy size={16} />
                            </button>
                        </div>
                    ))}
                    {history.length <= 1 && (
                        <div className="text-center text-slate-400 text-sm py-2 italic">
                            Generate more passwords to see history
                        </div>
                    )}
                </div>
            </div>
        )}

      </div>
    </div>
  );
}

// Subcomponent for cleaner toggle code
function Toggle({ label, checked, onChange, tooltip }) {
    return (
        <label className="flex items-center justify-between cursor-pointer group p-2 rounded-lg hover:bg-slate-50 transition-colors">
            <span className="text-slate-600 group-hover:text-slate-900 transition-colors select-none text-sm">
                {label}
            </span>
            <div className="relative">
                <input 
                    type="checkbox" 
                    className="sr-only peer"
                    checked={checked}
                    onChange={(e) => onChange(e.target.checked)}
                />
                <div className="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
            </div>
        </label>
    );
}