"use client";

import { FormEvent, useState } from "react";
import Container from "@/components/ui/Container";
import { Button, ButtonLink } from "@/components/ui/Button";
import { useCart } from "@/context/CartContext";
import { checkout } from "@/lib/store-api";

export default function CheckoutPage() {
  const { cart, loading } = useCart();
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    const form = new FormData(e.currentTarget);
    try {
      const { checkoutUrl } = await checkout({
        customerEmail: String(form.get("customerEmail") || ""),
        shippingName: String(form.get("shippingName") || "") || undefined,
        shippingAddress: String(form.get("shippingAddress") || "") || undefined,
        shippingCity: String(form.get("shippingCity") || "") || undefined,
        shippingState: String(form.get("shippingState") || "") || undefined,
        shippingPostalCode: String(form.get("shippingPostalCode") || "") || undefined,
        shippingCountry: String(form.get("shippingCountry") || "") || undefined
      });
      window.location.href = checkoutUrl;
    } catch (err) {
      setError(err instanceof Error ? err.message : "Checkout failed. Please try again.");
      setSubmitting(false);
    }
  }

  if (loading) {
    return (
      <section className="py-16">
        <Container className="max-w-2xl mx-auto text-center text-sm text-neutral-500">Loading…</Container>
      </section>
    );
  }

  if (!cart || cart.items.length === 0) {
    return (
      <section className="py-16">
        <Container className="max-w-2xl mx-auto text-center">
          <p className="text-neutral-600">Your cart is empty.</p>
          <div className="mt-6">
            <ButtonLink href="/products">Browse Products</ButtonLink>
          </div>
        </Container>
      </section>
    );
  }

  return (
    <section className="py-16">
      <Container className="max-w-2xl mx-auto">
        <h1 className="font-display text-3xl text-neutral-900">Checkout</h1>
        <p className="mt-2 text-sm text-neutral-600">
          You&apos;ll be redirected to Stripe&apos;s secure checkout to enter payment details.
        </p>

        <div className="mt-8 rounded-xl2 border border-neutral-200 bg-neutral-100 p-6">
          {cart.items.map((item) => (
            <div key={item.variantId} className="flex justify-between text-sm text-neutral-700 py-1">
              <span>{item.productName} × {item.quantity}</span>
              <span>${item.lineTotal.toFixed(2)}</span>
            </div>
          ))}
          <div className="mt-3 pt-3 border-t border-neutral-200 flex justify-between font-semibold text-neutral-900">
            <span>Subtotal</span>
            <span>${cart.subtotal.toFixed(2)} {cart.currency}</span>
          </div>
        </div>

        <form onSubmit={handleSubmit} className="mt-8 flex flex-col gap-5">
          <Field label="Email" name="customerEmail" type="email" required />
          <Field label="Full Name" name="shippingName" />
          <Field label="Shipping Address" name="shippingAddress" />
          <div className="grid grid-cols-2 gap-5">
            <Field label="City" name="shippingCity" />
            <Field label="State" name="shippingState" />
          </div>
          <div className="grid grid-cols-2 gap-5">
            <Field label="Postal Code" name="shippingPostalCode" />
            <Field label="Country" name="shippingCountry" />
          </div>

          {error ? <p className="text-sm text-red-600">{error}</p> : null}

          <Button type="submit" disabled={submitting}>
            {submitting ? "Redirecting…" : "Pay with Card"}
          </Button>
        </form>
      </Container>
    </section>
  );
}

function Field({
  label,
  name,
  type = "text",
  required
}: {
  label: string;
  name: string;
  type?: string;
  required?: boolean;
}) {
  return (
    <div>
      <label className="text-xs font-semibold uppercase tracking-wide text-neutral-600">{label}</label>
      <input
        name={name}
        type={type}
        required={required}
        className="mt-2 w-full rounded-lg border border-neutral-300 px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
      />
    </div>
  );
}