import { getCurrentCustomer } from '@/lib/auth';
import { sendContactMessage } from './actions';
import Turnstile from '@/components/Turnstile';

const ERROR_MESSAGES: Record<string, string> = {
  missing: 'Name, email, and a message are required.',
  captcha: 'CAPTCHA verification failed — please try again.',
};

export default async function ContactPage({
  searchParams,
}: {
  searchParams: { sent?: string; error?: string };
}) {
  const customer = await getCurrentCustomer();
  const error = searchParams.error ? (ERROR_MESSAGES[searchParams.error] ?? 'Something went wrong.') : null;

  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <p className="tag-label text-splash-pink">Contact</p>
      <h1 className="mt-2 font-display text-3xl">Get in touch</h1>
      <p className="mt-2 text-sm text-muted">
        Question about an order, a template, or anything else? Send us a message and we&apos;ll get
        back to you.
      </p>

      {searchParams.sent === '1' ? (
        <div className="mt-10 border border-splash-blue bg-splash-blue/5 p-6 text-sm">
          Thanks — we&apos;ve got your message and will be in touch soon.
        </div>
      ) : (
        <form action={sendContactMessage} className="mt-10 space-y-6">
          {error && (
            <p className="border border-splash-pink/40 bg-splash-pink/10 px-4 py-3 text-sm text-splash-pink">
              {error}
            </p>
          )}

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="name" className="tag-label mb-2 block">
                Your name
              </label>
              <input
                id="name"
                name="name"
                required
                defaultValue={customer?.name ?? ''}
                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
                defaultValue={customer?.email ?? ''}
                className="w-full border border-line px-3 py-2 text-sm"
              />
            </div>
          </div>

          <div>
            <label htmlFor="message" className="tag-label mb-2 block">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              required
              rows={5}
              className="w-full border border-line px-3 py-2 text-sm"
              placeholder="How can we help?"
            />
          </div>

          <Turnstile />

          <button type="submit" className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark">
            Send message
          </button>
        </form>
      )}
    </div>
  );
}