// Password Generator — cryptographically random passwords with strength meter.

window.TOOL_HANDLERS['password-gen'] = function PasswordGenTool() {
  const [length, setLength] = React.useState(16);
  const [upper, setUpper] = React.useState(true);
  const [nums, setNums] = React.useState(true);
  const [syms, setSyms] = React.useState(true);
  const [password, setPassword] = React.useState('');
  const [copied, setCopied] = React.useState(false);

  const generate = React.useCallback(() => {
    let pool = 'abcdefghijklmnopqrstuvwxyz';
    if (upper) pool += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    if (nums) pool += '0123456789';
    if (syms) pool += '!@#$%^&*()-_=+[]{}<>?';
    const arr = new Uint32Array(length);
    crypto.getRandomValues(arr);
    let out = '';
    for (let i = 0; i < length; i++) out += pool[arr[i] % pool.length];
    setPassword(out); setCopied(false);
  }, [length, upper, nums, syms]);

  React.useEffect(() => { generate(); }, [generate]);

  const copy = () => { navigator.clipboard.writeText(password); setCopied(true); setTimeout(() => setCopied(false), 1500); };

  const strength = React.useMemo(() => {
    let s = Math.min(length * 4, 40);
    if (upper) s += 15; if (nums) s += 15; if (syms) s += 20;
    s = Math.min(100, s);
    return {
      score: s,
      label: s < 40 ? 'Weak' : s < 70 ? 'Good' : s < 90 ? 'Strong' : 'Excellent',
      color: s < 40 ? '#c8321f' : s < 70 ? '#b8700a' : s < 90 ? '#10805a' : '#0e9488',
    };
  }, [length, upper, nums, syms]);

  return (
    <div className="mini-tool">
      <div className="pw-display">
        <code className="pw-text">{password}</code>
        <div className="pw-actions">
          <button className="icon-btn" onClick={generate} aria-label="Regenerate"><window.Icon name="rotate" size={16} /></button>
          <button className="icon-btn" onClick={copy} aria-label="Copy" style={copied ? { color: 'var(--id-success)', borderColor: 'var(--id-success)' } : {}}>
            <window.Icon name={copied ? 'check' : 'doc'} size={16} />
          </button>
        </div>
      </div>
      <div className="pw-strength">
        <div className="pw-bar"><div className="pw-fill" style={{ width: strength.score + '%', background: strength.color }} /></div>
        <span style={{ color: strength.color }}>{strength.label}</span>
      </div>
      <div className="cmp-slider-row" style={{ marginTop: 20 }}>
        <div className="cmp-label"><span>Length</span><span className="val">{length}</span></div>
        <input type="range" min="6" max="48" value={length} onChange={(e) => setLength(+e.target.value)} className="cmp-slider" />
      </div>
      <div className="pw-opts">
        <label className="pw-opt"><input type="checkbox" checked={upper} onChange={(e) => setUpper(e.target.checked)} /> Uppercase A–Z</label>
        <label className="pw-opt"><input type="checkbox" checked={nums} onChange={(e) => setNums(e.target.checked)} /> Numbers 0–9</label>
        <label className="pw-opt"><input type="checkbox" checked={syms} onChange={(e) => setSyms(e.target.checked)} /> Symbols !@#$</label>
      </div>
    </div>
  );
};