'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useFormState, useFormStatus } from 'react-dom';
import { submitLead, type LeadFormState } from '@/app/leads/actions';
import { messageThreadRoute } from '@/lib/routes';

const initialState: LeadFormState = undefined;

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="btn-primary disabled:opacity-60">
      {pending ? 'Sending…' : 'Send Inquiry'}
    </button>
  );
}

export function InquiryForm({ productId, redirectTo }: { productId: number; redirectTo: string }) {
  const [state, formAction] = useFormState(submitLead, initialState);
  const errors = state?.errors ?? {};
  const [quantity, setQuantity] = useState(1);

  if (state?.success) {
    return (
      <div className="mt-6 rounded-md border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
        Inquiry sent — the vendor has been notified.
        {state.conversationId && (
          <>
            {' '}
            <Link href={messageThreadRoute(state.conversationId)} className="font-semibold underline hover:no-underline">
              View the conversation &rarr;
            </Link>
          </>
        )}
      </div>
    );
  }

  return (
    <form action={formAction} className="mt-6 space-y-4 rounded-md border border-navy-100 bg-beige p-4">
      <input type="hidden" name="product_id" value={productId} />
      <input type="hidden" name="redirect_to" value={redirectTo} />
      <input type="hidden" name="quantity" value={quantity} />

      <p className="text-sm font-semibold text-navy-800">
        This item is sold directly by an independent artisan shop — send an inquiry instead of adding it to your cart.
      </p>

      {Object.keys(errors).length > 0 && (
        <div className="rounded-md border border-red-200 bg-red-100 px-3 py-2 text-xs text-red-700">
          <ul className="list-inside list-disc">
            {Object.values(errors).flat().map((error) => (
              <li key={error}>{error}</li>
            ))}
          </ul>
        </div>
      )}

      <div className="flex items-center gap-3">
        <label className="text-sm font-medium text-navy-800">Quantity</label>
        <div className="flex items-center rounded-md border border-navy-200 bg-white">
          <button
            type="button"
            aria-label="Decrease quantity"
            onClick={() => setQuantity((q) => Math.max(1, q - 1))}
            className="flex h-9 w-9 items-center justify-center text-navy-800 hover:bg-beige"
          >
            &#8722;
          </button>
          <span className="flex h-9 w-10 items-center justify-center border-x border-navy-100 text-sm">{quantity}</span>
          <button
            type="button"
            aria-label="Increase quantity"
            onClick={() => setQuantity((q) => q + 1)}
            className="flex h-9 w-9 items-center justify-center text-navy-800 hover:bg-beige"
          >
            +
          </button>
        </div>
      </div>

      <div>
        <label className="block text-sm font-semibold text-navy-800">Message to the seller</label>
        <textarea
          name="message"
          rows={3}
          required
          maxLength={2000}
          placeholder="I'm interested in this item — is it available in..."
          className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
        />
      </div>

      <SubmitButton />
    </form>
  );
}