'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import Image from 'next/image'
import { useStore } from '@/lib/store'
import { Loader2, ArrowRight, Eye, EyeOff } from 'lucide-react'

// Logo Component - Puma Image
function Logo() {
  return (
    <Image
      src="/pounce-logo.png"
      alt="pounce"
      width={48}
      height={48}
      className="w-12 h-12"
    />
  )
}

export default function LoginPage() {
  const router = useRouter()
  const { login } = useStore()
  
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
    setLoading(true)

    try {
      await login(email, password)
      router.push('/dashboard')
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Authentication failed')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center px-4 sm:px-6 py-8 sm:py-12 relative">
      {/* Ambient glow */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[400px] h-[300px] bg-accent/[0.02] rounded-full blur-3xl" />
      </div>
      
      <div className="relative w-full max-w-sm animate-fade-in">
        {/* Logo */}
        <Link href="/" className="flex justify-center mb-12 sm:mb-16 hover:opacity-80 transition-opacity duration-300">
          <Logo />
        </Link>

        {/* Header */}
        <div className="text-center mb-8 sm:mb-10">
          <h1 className="font-display text-[2rem] sm:text-[2.5rem] md:text-[3rem] leading-[1.1] tracking-[-0.03em] text-foreground mb-2 sm:mb-3">Welcome back</h1>
          <p className="text-body-sm sm:text-body text-foreground-muted">
            Sign in to access your watchlist
          </p>
        </div>

        {/* Form */}
        <form onSubmit={handleSubmit} className="space-y-3 sm:space-y-4">
          {error && (
            <div className="p-3 sm:p-4 bg-danger-muted border border-danger/20 rounded-2xl">
              <p className="text-danger text-body-xs sm:text-body-sm text-center">{error}</p>
            </div>
          )}

          <div className="space-y-2.5 sm:space-y-3">
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Email address"
              required
              className="input-elegant text-body-sm sm:text-body"
            />
            <div className="relative">
            <input
                type={showPassword ? 'text' : 'password'}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="Password"
              required
              minLength={8}
                className="input-elegant text-body-sm sm:text-body pr-12"
            />
              <button
                type="button"
                onClick={() => setShowPassword(!showPassword)}
                className="absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 text-foreground-muted hover:text-foreground transition-colors duration-200"
                aria-label={showPassword ? 'Hide password' : 'Show password'}
              >
                {showPassword ? (
                  <EyeOff className="w-4 h-4 sm:w-5 sm:h-5" />
                ) : (
                  <Eye className="w-4 h-4 sm:w-5 sm:h-5" />
                )}
              </button>
            </div>
          </div>

          <button
            type="submit"
            disabled={loading}
            className="w-full py-3 sm:py-4 bg-foreground text-background text-ui-sm sm:text-ui font-medium rounded-xl
                       hover:bg-foreground/90 disabled:opacity-50 disabled:cursor-not-allowed
                       transition-all duration-300 flex items-center justify-center gap-2 sm:gap-2.5"
          >
            {loading ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <>
                Continue
                <ArrowRight className="w-3.5 sm:w-4 h-3.5 sm:h-4" />
              </>
            )}
          </button>
        </form>

        {/* Register Link */}
        <p className="mt-8 sm:mt-10 text-center text-body-xs sm:text-body-sm text-foreground-muted">
          Don&apos;t have an account?{' '}
          <Link href="/register" className="text-foreground hover:text-accent transition-colors duration-300">
            Create one
          </Link>
        </p>
      </div>
    </div>
  )
}