'use client'

import React, { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { Fingerprint, ArrowRight, Mail, Lock, Check, Activity, ShieldCheck } from 'lucide-react'

interface AuthState {
  status: 'idle' | 'scanning' | 'authorized' | 'error'
  progress: number
}

export default function VelocityTerminal() {
  const [state, setState] = useState<AuthState>({ status: 'idle', progress: 0 })
  const [formData, setFormData] = useState({ id: '', key: '' })

  const handleInitialize = async (e: React.FormEvent) => {
    e.preventDefault()
    setState({ status: 'scanning', progress: 0 })

    for (let i = 0; i <= 100; i += 10) {
      await new Promise((r) => setTimeout(r, 50))
      setState((prev) => ({ ...prev, progress: i }))
    }
    setState({ status: 'authorized', progress: 100 })
  }

  return (
    <div className="grid place-items-center w-full h-full p-6 font-sans antialiased bg-transparent">

      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="relative w-full max-w-[420px] mx-auto"
      >
        <div className="relative rounded-[2.5rem] border border-zinc-200 bg-zinc-100/90 dark:bg-zinc-900/80 dark:border-zinc-700 shadow-xl backdrop-blur-xl p-8 sm:p-10 md:p-12">
          <header className="mb-10 flex flex-col items-center text-center">
            <div className="relative mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-white dark:bg-black shadow-inner border border-zinc-200 dark:border-zinc-800">
              <Fingerprint
                size={38}
                strokeWidth={1}
                className={`transition-all duration-700 ${
                  state.status === 'authorized'
                    ? 'text-emerald-500 drop-shadow-[0_0_8px_rgba(16,185,129,0.4)]'
                    : 'text-zinc-400'
                }`}
              />
              {state.status === 'scanning' && (
                <motion.div
                  initial={{ top: '20%' }}
                  animate={{ top: '80%' }}
                  className="absolute inset-x-4 h-px bg-emerald-400 shadow-[0_0_10px_rgba(52,211,153,1)] z-10"
                  transition={{ duration: 1.2, repeat: Infinity, ease: 'easeInOut' }}
                />
              )}
            </div>

            <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
              Velocity <span className="text-zinc-400 font-light">Vault</span>
            </h1>
            <p className="mt-1 text-[9px] font-bold uppercase tracking-[0.3em] text-zinc-400 dark:text-zinc-500">
              Secure Interface Protocol
            </p>
          </header>

          {/* SOCIAL LOGOS - CLEAN & FREE VIEW */}
          <div className="mb-10 flex justify-center gap-8">
            {[
              { key: 'apple', src: '/apple-logo.png' },
              { key: 'google', src: '/social.png' },
              { key: 'github', src: '/github.png' },
            ].map((provider) => (
              <motion.button
                key={provider.key}
                whileHover={{ y: -2 }}
                className="opacity-40 transition-all hover:opacity-100"
              >
                <img
                  src={provider.src}
                  alt={provider.key}
                  className="h-5 w-5 object-contain grayscale"
                />
              </motion.button>
            ))}
          </div>

          <form className="space-y-8" onSubmit={handleInitialize}>
            <div className="space-y-6">
              <div className="group relative">
                <div className="flex items-center gap-4 border-b border-zinc-200 dark:border-zinc-700 pb-2 transition-all group-focus-within:border-emerald-500">
                  <Mail
                    size={16}
                    className="text-zinc-300 dark:text-zinc-500 group-focus-within:text-emerald-500"
                  />
                  <input
                    required
                    type="email"
                    value={formData.id}
                    onChange={(e) => setFormData({ ...formData, id: e.target.value })}
                    placeholder="IDENTIFIER"
                    className="w-full bg-transparent text-[10px] font-bold tracking-[0.2em] text-zinc-800 dark:text-zinc-100 outline-none placeholder:text-zinc-300 dark:placeholder:text-zinc-500 uppercase"
                  />
                </div>
              </div>

              <div className="group relative">
                <div className="flex items-center gap-4 border-b border-zinc-200 dark:border-zinc-700 pb-2 transition-all group-focus-within:border-emerald-500">
                  <Lock
                    size={16}
                    className="text-zinc-300 dark:text-zinc-500 group-focus-within:text-emerald-500"
                  />
                  <input
                    required
                    type="password"
                    value={formData.key}
                    onChange={(e) => setFormData({ ...formData, key: e.target.value })}
                    placeholder="PROTOCOL_KEY"
                    className="w-full bg-transparent text-[10px] font-bold tracking-[0.2em] text-zinc-800 dark:text-zinc-100 outline-none placeholder:text-zinc-300 dark:placeholder:text-zinc-500 uppercase"
                  />
                </div>
              </div>
            </div>

            {/* ACTION BUTTON */}
            <button
              disabled={state.status !== 'idle'}
              className="group relative h-14 w-full overflow-hidden rounded-xl bg-zinc-900 transition-all hover:bg-zinc-800 disabled:bg-zinc-200"
            >
              <AnimatePresence mode="wait">
                {state.status === 'idle' && (
                  <motion.div
                    key="idle"
                    className="flex items-center justify-center gap-3 text-[10px] font-bold tracking-[0.3em] text-white uppercase"
                  >
                    <span>Initialize Access</span>
                    <ArrowRight
                      size={14}
                      className="group-hover:translate-x-1 transition-transform"
                    />
                  </motion.div>
                )}
                {state.status === 'scanning' && (
                  <motion.div
                    key="scanning"
                    className="relative flex h-full items-center justify-center"
                  >
                    <motion.div
                      className="absolute inset-y-0 left-0 bg-emerald-500"
                      initial={{ width: 0 }}
                      animate={{ width: `${state.progress}%` }}
                    />
                    <span className="relative z-10 text-[10px] font-bold tracking-[0.3em] text-white">
                      VERIFYING_{state.progress}%
                    </span>
                  </motion.div>
                )}
                {state.status === 'authorized' && (
                  <motion.div
                    key="auth"
                    className="flex items-center justify-center gap-2 text-emerald-400 text-[10px] font-bold tracking-[0.3em]"
                  >
                    <Check size={16} strokeWidth={3} />
                    <span>SECURE_READY</span>
                  </motion.div>
                )}
              </AnimatePresence>
            </button>
          </form>

          <footer className="mt-10 flex items-center justify-between border-t border-zinc-200 pt-6 font-mono text-[8px] tracking-[0.1em] text-zinc-400 uppercase">
            <div className="flex items-center gap-2">
              <ShieldCheck size={12} className="text-zinc-300" />
              <span>Identity Verified</span>
            </div>
            <span>Encrypted Session</span>
          </footer>
        </div>
      </motion.div>
    </div>
  )
}