import Link from 'next/link';
import { registerCustomer } from '../actions';
import Turnstile from '@/components/Turnstile';

const ERROR_MESSAGES: Record<string, string> = {
  missing: 'Name, email, and password are required.',
  mismatch: "Passwords don't match.",
  weak: 'Password must be at least 8 characters.',
  taken: 'An account with that email already exists.',
  captcha: 'CAPTCHA verification failed — please try again.',
};

export default function RegisterPage({ searchParams }: { searchParams: { error?: string; next?: string } }) {
  const error = searchParams.error ? (ERROR_MESSAGES[searchParams.error] ?? 'Something went wrong.') : null;
  const next = searchParams.next ?? '/account';

  return (
    <div className="mx-auto max-w-md px-6 py-16">
      <h1 className="font-display text-3xl">Create an account</h1>
      <p className="mt-2 text-sm text-muted">
        Already have one?{' '}
        <Link href={`/account/login?next=${encodeURIComponent(next)}`} className="text-clay hover:text-clay-dark">
          Log in
        </Link>
      </p>

      {error && (
        <p className="mt-6 border border-splash-pink/40 bg-splash-pink/10 px-4 py-3 text-sm text-splash-pink">
          {error}
        </p>
      )}

      <form action={registerCustomer} className="mt-8 space-y-6">
        <input type="hidden" name="next" value={next} />
        <div>
          <label htmlFor="name" className="tag-label mb-2 block">
            Name
          </label>
          <input id="name" name="name" required className="w-full border border-line px-3 py-2 text-sm" />
        </div>
        <div>
          <label htmlFor="email" className="tag-label mb-2 block">
            Email
          </label>
          <input id="email" name="email" type="email" required className="w-full border border-line px-3 py-2 text-sm" />
        </div>
        <div>
          <label htmlFor="password" className="tag-label mb-2 block">
            Password
          </label>
          <input
            id="password"
            name="password"
            type="password"
            required
            minLength={8}
            className="w-full border border-line px-3 py-2 text-sm"
          />
        </div>
        <div>
          <label htmlFor="confirmPassword" className="tag-label mb-2 block">
            Confirm password
          </label>
          <input
            id="confirmPassword"
            name="confirmPassword"
            type="password"
            required
            minLength={8}
            className="w-full border border-line px-3 py-2 text-sm"
          />
        </div>
        <Turnstile />

        <button
          type="submit"
          className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark disabled:cursor-not-allowed disabled:opacity-50"
        >
          Create account
        </button>
        <p className="text-xs text-muted">
          By creating an account you agree to our{' '}
          <Link href="/privacy" className="text-clay hover:text-clay-dark">
            Privacy Policy
          </Link>
          .
        </p>
      </form>
    </div>
  );
}
