"use client";

import { useId, useState, type FormEvent } from "react";
import { ArrowRight, BadgeCheck, Clock3, Gavel, ShieldCheck } from "lucide-react";
import { requestQuote } from "@/lib/home/quotePrefill";
import { cn } from "@/lib/utils";
import { MESSAGES, isPincode, quantityError } from "@/lib/validation";
import FieldError from "@/components/ui/FieldError";

/**
 * Hero side card: pick a product, quantity and pincode, then jump to the full
 * quote form with those already filled in. Nothing is submitted from here.
 */
export default function HeroQuickQuote({ products }: { products: string[] }) {
  const id = useId();
  const [product, setProduct] = useState<string | null>(null);
  const [quantity, setQuantity] = useState("");
  const [pincode, setPincode] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [fieldErrors, setFieldErrors] = useState<{ quantity?: string; pincode?: string }>({});

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    // Same rules as the full form and the API (B01): a bad quantity or
    // pincode is caught here instead of being carried into the lead.
    const next = {
      quantity: quantity.trim() ? quantityError(quantity) ?? undefined : undefined,
      pincode: pincode && !isPincode(pincode) ? MESSAGES.pincode : undefined,
    };
    setFieldErrors(next);
    if (!product) {
      setError("Pick a product to get quotes.");
      return;
    }
    if (next.quantity || next.pincode) return;
    setError(null);
    requestQuote({ product, quantity: quantity.trim(), pincode });
  };

  return (
    <div className="overflow-hidden rounded-3xl bg-white text-slate-900 shadow-[0_30px_80px_rgba(0,0,0,0.45)] ring-1 ring-white/20">
      <div className="bg-gradient-to-r from-[#CC1414] to-[#e0452f] px-5 py-4 text-white">
        <div className="flex items-center gap-3">
          <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/15">
            <Gavel size={20} aria-hidden />
          </span>
          <div>
            <p className="text-base font-bold leading-tight">Get quotes in 30 minutes</p>
            <p className="text-xs text-white/80">Verified sellers compete for your order</p>
          </div>
        </div>
      </div>

      <form onSubmit={onSubmit} className="space-y-4 p-5" noValidate>
        <fieldset>
          <legend className="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
            What do you need?
          </legend>
          <div className="flex flex-wrap gap-2">
            {products.map((name) => {
              const selected = product === name;
              return (
                <button
                  key={name}
                  type="button"
                  aria-pressed={selected}
                  onClick={() => {
                    setProduct(selected ? null : name);
                    setError(null);
                  }}
                  className={cn(
                    "rounded-full border px-3 py-1.5 text-xs font-semibold transition-all",
                    selected
                      ? "border-[#CC1414] bg-[#CC1414] text-white shadow-md shadow-red-500/25"
                      : "border-slate-200 bg-slate-50 text-slate-700 hover:border-[#CC1414]/40 hover:bg-red-50"
                  )}
                >
                  {name}
                </button>
              );
            })}
          </div>
        </fieldset>

        <div className="grid grid-cols-2 gap-3">
          <div>
            <label htmlFor={`${id}-qty`} className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">
              Quantity (MT)
            </label>
            <input
              id={`${id}-qty`}
              type="text"
              inputMode="decimal"
              placeholder="e.g. 25"
              value={quantity}
              aria-invalid={!!fieldErrors.quantity}
              aria-describedby={`${id}-qty-err`}
              onChange={(e) => setQuantity(e.target.value.replace(/[^\d.]/g, ""))}
              className="h-11 w-full rounded-xl border border-slate-200 px-3 text-sm placeholder:text-slate-400 focus:border-[#CC1414] focus:outline-none focus:ring-2 focus:ring-[#CC1414]/20"
            />
            <FieldError id={`${id}-qty-err`} message={fieldErrors.quantity} />
          </div>
          <div>
            <label htmlFor={`${id}-pin`} className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-500">
              Delivery pincode
            </label>
            <input
              id={`${id}-pin`}
              type="text"
              inputMode="numeric"
              autoComplete="postal-code"
              maxLength={6}
              placeholder="6-digit"
              value={pincode}
              aria-invalid={!!fieldErrors.pincode}
              aria-describedby={`${id}-pin-err`}
              onChange={(e) => setPincode(e.target.value.replace(/\D/g, ""))}
              className="h-11 w-full rounded-xl border border-slate-200 px-3 text-sm placeholder:text-slate-400 focus:border-[#CC1414] focus:outline-none focus:ring-2 focus:ring-[#CC1414]/20"
            />
            <FieldError id={`${id}-pin-err`} message={fieldErrors.pincode} />
          </div>
        </div>

        {error ? (
          <p role="alert" className="text-xs font-medium text-[#CC1414]">
            {error}
          </p>
        ) : null}

        <button
          type="submit"
          className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-slate-900 text-sm font-semibold text-white transition-colors hover:bg-[#CC1414]"
        >
          Get Free Quotes <ArrowRight size={16} aria-hidden />
        </button>

        <ul className="flex flex-wrap justify-between gap-2 border-t border-slate-100 pt-4 text-[11px] font-medium text-slate-500">
          <li className="flex items-center gap-1">
            <BadgeCheck size={14} className="text-emerald-600" aria-hidden /> Free
          </li>
          <li className="flex items-center gap-1">
            <ShieldCheck size={14} className="text-emerald-600" aria-hidden /> No obligation
          </li>
          <li className="flex items-center gap-1">
            <Clock3 size={14} className="text-emerald-600" aria-hidden /> Reply in 30 min
          </li>
        </ul>
      </form>
    </div>
  );
}