'use client';

import { useState } from 'react';
import Link from 'next/link';
import { loginCustomer } from '@/app/account/actions';

export default function AccountLoginPage() {
  const [status, setStatus] = useState<{ error?: string } | null>(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);
    const formData = new FormData(e.currentTarget);
    const result = await loginCustomer(formData);
    setStatus(result);
    setLoading(false);
  }

  return (
    <div className="container mx-auto px-4 py-16">
      <div className="mx-auto max-w-md rounded-xl border bg-card p-8">
        <h1 className="text-2xl font-bold">Sign in to your account</h1>
        <p className="text-sm text-muted-foreground">View your order history and track deliveries.</p>

        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
          <div className="space-y-1">
            <label className="text-sm font-medium">Email</label>
            <input name="email" type="email" required className="w-full rounded-lg border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring" placeholder="john@example.com" />
          </div>
          <div className="space-y-1">
            <label className="text-sm font-medium">Password</label>
            <input name="password" type="password" required className="w-full rounded-lg border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring" placeholder="••••••" />
          </div>

          {status?.error && <p className="text-sm text-destructive">{status.error}</p>}

          <button type="submit" disabled={loading} className="w-full rounded-lg bg-primary py-2 font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50">
            {loading ? 'Signing in...' : 'Sign in'}
          </button>
        </form>

        <p className="mt-4 text-center text-sm text-muted-foreground">
          Don&apos;t have an account?{' '}
          <Link href="/account/register" className="text-primary hover:underline">
            Register
          </Link>
        </p>
      </div>
    </div>
  );
}