// Login page — Apple-style centered hero with frosted card.

import { useState } from 'react'
import { useLocation } from 'wouter'
import { motion } from 'framer-motion'
import { ArrowRight, Shield, Wifi, Zap } from 'lucide-react'
import { api, setToken } from '../lib/api'
import { Button, Card, Input } from '../components/ui'

export function LoginPage() {
  const [, navigate] = useLocation()
  const [username, setUsername] = useState('admin')
  const [password, setPassword] = useState('admin')
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
    setLoading(true)
    try {
      const { token } = await api.login(username, password)
      setToken(token)
      navigate('/')
    } catch (err) {
      setError((err as Error).message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen flex flex-col items-center justify-center px-6">
      {/* Hero */}
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
        className="text-center max-w-2xl"
      >
        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-[#0a84ff] to-[#5856d6] mb-8 shadow-2xl shadow-blue-500/30">
          <Wifi className="w-8 h-8 text-white" strokeWidth={2} />
        </div>
        <h1 className="text-hero text-gradient mb-4">
          client2server
        </h1>
        <p className="text-body-lg text-ink-400 mb-12 max-w-md mx-auto">
          Real-time event monitoring and command control for your OpenWrt fleet.
        </p>

        {/* Login card */}
        <Card className="max-w-sm mx-auto text-left" padding="lg">
          <form onSubmit={onSubmit} className="flex flex-col gap-4">
            <Input
              label="Username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              autoFocus
              required
            />
            <Input
              label="Password"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
            {error && (
              <p className="text-caption text-rose-400">{error}</p>
            )}
            <Button type="submit" size="lg" disabled={loading} className="mt-2 w-full">
              {loading ? 'Signing in…' : (<>Sign in <ArrowRight className="w-4 h-4" /></>)}
            </Button>
          </form>
        </Card>

        <p className="text-caption text-ink-500 mt-6">
          Default credentials: <code className="text-ink-300">admin</code> / <code className="text-ink-300">admin</code>
        </p>
      </motion.div>

      {/* Features row */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3, duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
        className="mt-20 grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-4xl w-full"
      >
        {[
          { icon: Zap, title: 'Real-time', desc: 'Sub-second event delivery via Server-Sent Events' },
          { icon: Shield, title: 'Secure', desc: 'JWT auth with role-based access control' },
          { icon: Wifi, title: 'Bi-directional', desc: 'Send commands to any router in your fleet' },
        ].map((f, i) => (
          <div key={i} className="text-center">
            <f.icon className="w-6 h-6 mx-auto mb-2 text-ink-500" />
            <h3 className="text-body font-semibold text-ink-200 mb-1">{f.title}</h3>
            <p className="text-caption text-ink-500">{f.desc}</p>
          </div>
        ))}
      </motion.div>
    </div>
  )
}
