import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { LockIcon, ArrowRightIcon } from 'lucide-react';
const STORAGE_KEY = 'io-styleguide-unlocked';
type PasswordGateProps = {
  password: string;
  children: React.ReactNode;
};
export function PasswordGate({ password, children }: PasswordGateProps) {
  const [unlocked, setUnlocked] = useState(false);
  const [input, setInput] = useState('');
  const [error, setError] = useState('');
  useEffect(() => {
    if (sessionStorage.getItem(STORAGE_KEY) === 'true') {
      setUnlocked(true);
    }
  }, []);
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input === password) {
      sessionStorage.setItem(STORAGE_KEY, 'true');
      setUnlocked(true);
    } else {
      setError('Incorrect password. Please try again.');
    }
  };
  if (unlocked) return <>{children}</>;
  return (
    <main className="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-brand-ink px-4">
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          backgroundImage:
          'linear-gradient(rgba(13,208,202,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(13,208,202,0.05) 1px, transparent 1px)',
          backgroundSize: '48px 48px'
        }}
        aria-hidden="true" />
      
      <motion.div
        initial={{
          opacity: 0,
          y: 20
        }}
        animate={{
          opacity: 1,
          y: 0
        }}
        transition={{
          duration: 0.5
        }}
        className="relative w-full max-w-sm rounded-2xl bg-white p-8 text-center shadow-lift">
        
        <span className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-brand-mist">
          <LockIcon size={20} className="text-brand-deep" aria-hidden="true" />
        </span>
        <h1 className="mt-5 font-display text-xl font-bold text-brand-ink">
          Internal resource
        </h1>
        <p className="mt-2 text-sm leading-relaxed text-brand-ink/60">
          This page is for the IntellectOne team and design partners. Enter the
          password to continue.
        </p>
        <form onSubmit={handleSubmit} noValidate className="mt-6">
          <label htmlFor="gate-password" className="sr-only">
            Password
          </label>
          <input
            id="gate-password"
            type="password"
            value={input}
            onChange={(e) => {
              setInput(e.target.value);
              setError('');
            }}
            placeholder="Password"
            autoFocus
            aria-invalid={!!error}
            aria-describedby={error ? 'gate-error' : undefined}
            className={`w-full rounded-xl border bg-white px-4 py-3 text-center text-sm text-brand-ink placeholder:text-brand-ink/35 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-mid/40 ${error ? 'border-red-400 focus:border-red-400' : 'border-brand-ink/15 focus:border-brand-mid'}`} />
          
          {error &&
          <p
            id="gate-error"
            className="mt-2 text-xs font-medium text-red-600"
            role="alert">
            
              {error}
            </p>
          }
          <button
            type="submit"
            className="group mt-4 inline-flex w-full items-center justify-center gap-2 rounded-full bg-brand-ink px-7 py-3.5 font-display text-sm font-bold text-white transition-colors hover:bg-brand-deep">
            
            Unlock
            <ArrowRightIcon
              size={16}
              className="transition-transform group-hover:translate-x-0.5"
              aria-hidden="true" />
            
          </button>
        </form>
      </motion.div>
    </main>);

}