'use client';

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

export default function RegisterPage() {
  const [status, setStatus] = useState<{ error?: string; success?: 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 registerCustomer(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">Create an account</h1>
        <p className="text-sm text-muted-foreground">Track your orders and checkout faster.</p>

        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
          <div className="space-y-1">
            <label className="text-sm font-medium">Full name</label>
            <input name="name" required className="w-full rounded-lg border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring" placeholder="John Doe" />
          </div>
          <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 minLength={6} className="w-full rounded-lg border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring" placeholder="••••••" />
            <p className="text-xs text-muted-foreground">At least 6 characters</p>
          </div>

          {status?.error && <p className="text-sm text-destructive">{status.error}</p>}
          {status?.success && <p className="text-sm text-green-600">{status.success}</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 ? 'Creating account...' : 'Create account'}
          </button>
        </form>

        <p className="mt-4 text-center text-sm text-muted-foreground">
          Already have an account?{' '}
          <Link href="/account/login" className="text-primary hover:underline">
            Sign in
          </Link>
        </p>
      </div>
    </div>
  );
}