"use client";

import { useActionState } from "react";
import { AlertCircle, Loader2, Send } from "lucide-react";
import { placeOrder, type CheckoutState } from "./actions";
import { Button } from "@/components/Button";

const initial: CheckoutState = { ok: false };

type Props = {
  defaultName: string;
  defaultEmail: string;
  defaultCountry: string;
};

export function CheckoutForm({ defaultName, defaultEmail, defaultCountry }: Props) {
  const [state, action, pending] = useActionState(placeOrder, initial);
  return (
    <form action={action} className="space-y-5">
      {state.message && !state.ok && (
        <div
          role="alert"
          className="flex items-start gap-2 rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800"
        >
          <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
          <span>{state.message}</span>
        </div>
      )}
      <div className="grid gap-4 md:grid-cols-2">
        <Field
          name="customerName"
          label="Full name"
          defaultValue={defaultName}
          required
          autoComplete="name"
          error={state.fieldErrors?.customerName}
        />
        <Field
          name="customerEmail"
          label="Email"
          type="email"
          defaultValue={defaultEmail}
          required
          autoComplete="email"
          error={state.fieldErrors?.customerEmail}
        />
        <Field
          name="customerPhone"
          label="Phone (optional)"
          type="tel"
          autoComplete="tel"
        />
        <Field
          name="shippingCountry"
          label="Country"
          defaultValue={defaultCountry}
          required
          autoComplete="country-name"
          error={state.fieldErrors?.shippingCountry}
        />
      </div>
      <label className="block">
        <span className="mb-1.5 block text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
          Shipping address <span className="text-red-600">*</span>
        </span>
        <textarea
          name="shippingAddress"
          required
          minLength={10}
          maxLength={1000}
          rows={4}
          placeholder="Address line 1&#10;City, Postcode&#10;Region"
          autoComplete="street-address"
          className="w-full rounded-md border border-[var(--color-line)] bg-white px-3 py-2 text-[14px] leading-relaxed focus:border-[var(--color-blue)] focus:outline-none focus:ring-2 focus:ring-[var(--color-mist)]"
        />
        {state.fieldErrors?.shippingAddress && (
          <span className="mt-1 block text-[12px] text-red-600">
            {state.fieldErrors.shippingAddress}
          </span>
        )}
      </label>
      <label className="block">
        <span className="mb-1.5 block text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
          Notes for our team (optional)
        </span>
        <textarea
          name="notes"
          maxLength={1000}
          rows={3}
          placeholder="Delivery windows, preferred courier, invoicing address, etc."
          className="w-full rounded-md border border-[var(--color-line)] bg-white px-3 py-2 text-[14px] focus:border-[var(--color-blue)] focus:outline-none focus:ring-2 focus:ring-[var(--color-mist)]"
        />
      </label>
      <Button type="submit" disabled={pending} variant="primary">
        {pending ? (
          <>
            <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
            Placing order…
          </>
        ) : (
          <>
            <Send className="h-4 w-4" aria-hidden />
            Place order
          </>
        )}
      </Button>
      <p className="text-[12px] text-[var(--color-slate)]">
        No card is charged now. We&rsquo;ll send an invoice with the final
        total (including precise shipping) within two working days.
      </p>
    </form>
  );
}

function Field(props: {
  name: string;
  label: string;
  type?: string;
  required?: boolean;
  defaultValue?: string;
  autoComplete?: string;
  error?: string;
}) {
  return (
    <label className="block">
      <span className="mb-1.5 block text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
        {props.label}
        {props.required && <span className="ml-1 text-red-600">*</span>}
      </span>
      <input
        name={props.name}
        type={props.type ?? "text"}
        required={props.required}
        defaultValue={props.defaultValue}
        autoComplete={props.autoComplete}
        className="w-full rounded-md border border-[var(--color-line)] bg-white px-3 py-2 text-[14px] focus:border-[var(--color-blue)] focus:outline-none focus:ring-2 focus:ring-[var(--color-mist)]"
      />
      {props.error && (
        <span className="mt-1 block text-[12px] text-red-600">{props.error}</span>
      )}
    </label>
  );
}
