'use client'
import { useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { useCustomerAuth } from '@/hooks/useCustomerAuth'

export default function AccountLoginPage() {
  const { login, loading, error } = useCustomerAuth()
  const router = useRouter()
  const [form, setForm] = useState({ email: '', password: '' })

  const set = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
    setForm(p => ({ ...p, [k]: e.target.value }))

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      await login(form.email, form.password)
      router.push('/account/orders')
    } catch {}
  }

  return (
    <main className="min-h-screen flex items-center justify-center px-4 py-20 bg-background">
      <div className="w-full max-w-md">
        <h1 className="text-2xl font-bold mb-2 text-foreground">Sign in</h1>
        <p className="text-muted-foreground mb-8">Access your orders and account details</p>
        {error && <div className="mb-4 p-3 rounded-lg bg-destructive/10 text-destructive text-sm">{error}</div>}
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1.5 text-foreground">Email</label>
            <input type="email" required value={form.email} onChange={set('email')}
              className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
              placeholder="you@example.com" />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1.5 text-foreground">Password</label>
            <input type="password" required value={form.password} onChange={set('password')}
              className="w-full px-3 py-2.5 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary text-sm"
              placeholder="••••••••" />
          </div>
          <button type="submit" disabled={loading}
            className="w-full bg-primary text-primary-foreground py-2.5 rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50 text-sm">
            {loading ? 'Signing in...' : 'Sign in'}
          </button>
        </form>
        <p className="mt-6 text-center text-sm text-muted-foreground">
          Don't have an account?{' '}
          <Link href="/account/register" className="text-primary hover:underline font-medium">Create one</Link>
        </p>
      </div>
    </main>
  )
}