'use client';

import Link from 'next/link';
import { useFormState, useFormStatus } from 'react-dom';
import { submitVendorApplication, type VendorFormState } from '@/app/become-a-vendor/actions';
import { ROUTES } from '@/lib/routes';

const CRAFT_CATEGORIES = ['Wood Carvings', 'Brass & Metalwork', 'Masks', 'Batik & Textiles', 'Pottery & Ceramics', 'Jewellery', 'Other'];

const initialState: VendorFormState = undefined;

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60 sm:w-auto">
      {pending ? 'Submitting…' : 'Submit Application'}
    </button>
  );
}

export function VendorSignupForm({ planType, planName }: { planType: string; planName: string }) {
  const [state, formAction] = useFormState(submitVendorApplication, initialState);
  const errors = state?.errors ?? {};
  const values = state?.values ?? {};

  return (
    <form action={formAction} className="space-y-5">
      <input type="hidden" name="plan_type" value={planType} />
      <input type="hidden" name="plan_name" value={planName} />

      {Object.keys(errors).length > 0 && (
        <div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          <p className="font-semibold">Please fix the following:</p>
          <ul className="mt-1 list-inside list-disc">
            {Object.values(errors).flat().map((error) => (
              <li key={error}>{error}</li>
            ))}
          </ul>
        </div>
      )}

      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label className="block text-sm font-semibold text-navy-800">Business / Store Name *</label>
          <input type="text" name="business_name" defaultValue={values.business_name} required
                 className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500" />
        </div>
        <div>
          <label className="block text-sm font-semibold text-navy-800">Your Full Name *</label>
          <input type="text" name="owner_name" defaultValue={values.owner_name} required
                 className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500" />
        </div>
        <div>
          <label className="block text-sm font-semibold text-navy-800">Email Address *</label>
          <input type="email" name="email" defaultValue={values.email} required
                 className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500" />
        </div>
        <div>
          <label className="block text-sm font-semibold text-navy-800">Phone Number *</label>
          <input type="text" name="phone" defaultValue={values.phone} required
                 className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500" />
        </div>
        <div>
          <label className="block text-sm font-semibold text-navy-800">City</label>
          <input type="text" name="city" defaultValue={values.city}
                 className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500" />
        </div>
        <div>
          <label className="block text-sm font-semibold text-navy-800">Craft Category</label>
          <select name="craft_category" defaultValue={values.craft_category ?? ''}
                  className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500">
            <option value="">Select a category</option>
            {CRAFT_CATEGORIES.map((cat) => (
              <option key={cat} value={cat}>{cat}</option>
            ))}
          </select>
        </div>
      </div>

      <div>
        <label className="block text-sm font-semibold text-navy-800">Business Address</label>
        <input type="text" name="address" defaultValue={values.address}
               className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500" />
      </div>

      <div>
        <label className="block text-sm font-semibold text-navy-800">Tell Us About Your Craft</label>
        <textarea name="message" rows={4} defaultValue={values.message}
                  className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500" />
      </div>

      <div className="rounded-md border border-navy-100 bg-beige px-4 py-3 text-xs text-navy-600">
        <strong className="text-navy-800">No online payment is collected here.</strong>{' '}
        After you submit, your application status will be <strong>Pending Approval</strong>.
        Our team will contact you to verify your details and arrange payment
        (for paid plans) via bank transfer before your store goes live.
      </div>

      <p className="text-xs text-navy-400">
        By submitting this application, you agree to the{' '}
        <Link href={ROUTES.vendorTerms} className="font-semibold text-gold-600 hover:text-gold-700">
          Vendor Agreement and Listing Rules
        </Link>{' '}
        and the{' '}
        <Link href={ROUTES.termsOfUse} className="font-semibold text-gold-600 hover:text-gold-700">
          Marketplace Terms
        </Link>.
      </p>

      <SubmitButton />
    </form>
  );
}