'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useFormState, useFormStatus } from 'react-dom';
import { useCart } from '@/lib/cart-context';
import { placeOrder, type PlaceOrderState } from '@/app/checkout/actions';
import { ROUTES, orderRoute } from '@/lib/routes';

const initialState: PlaceOrderState = undefined;

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

export function CheckoutForm() {
  const { items, subtotal, clearCart } = useCart();
  const router = useRouter();
  const [state, formAction] = useFormState(placeOrder, initialState);
  const [paymentMethod, setPaymentMethod] = useState<'bank_transfer' | 'cod'>('bank_transfer');
  const errors = state?.errors ?? {};

  useEffect(() => {
    if (state?.success && state.order) {
      clearCart();
      router.push(orderRoute(state.order.order_id));
    }
    // Only re-run when the action's result actually changes.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [state]);

  if (items.length === 0) {
    return (
      <div className="mt-6 rounded-md border border-navy-100 bg-beige px-4 py-6 text-center text-sm text-navy-600">
        Your cart is empty.{' '}
        <Link href={ROUTES.shop} className="font-semibold text-gold-600 hover:text-gold-700">Browse the shop</Link>
      </div>
    );
  }

  const itemsJson = JSON.stringify(items.map((i) => ({ product_id: i.productId, quantity: i.quantity })));

  return (
    <div className="mt-6 grid gap-8 lg:grid-cols-3">
      <form action={formAction} className="space-y-5 lg:col-span-2">
        <input type="hidden" name="items_json" value={itemsJson} />

        {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">
            <ul className="list-inside list-disc">
              {Object.values(errors).flat().map((error) => (
                <li key={error}>{error}</li>
              ))}
            </ul>
          </div>
        )}

        <div>
          <label className="block text-sm font-semibold text-navy-800">Shipping Address</label>
          <textarea
            name="shipping_address"
            rows={3}
            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">Payment Method</label>
          <div className="mt-2 space-y-2">
            <label className="flex items-center gap-2 text-sm text-navy-700">
              <input
                type="radio"
                name="payment_method"
                value="bank_transfer"
                checked={paymentMethod === 'bank_transfer'}
                onChange={() => setPaymentMethod('bank_transfer')}
                className="text-gold-500 focus:ring-gold-500"
              />
              Bank Transfer
            </label>
            <label className="flex items-center gap-2 text-sm text-navy-700">
              <input
                type="radio"
                name="payment_method"
                value="cod"
                checked={paymentMethod === 'cod'}
                onChange={() => setPaymentMethod('cod')}
                className="text-gold-500 focus:ring-gold-500"
              />
              Cash on Delivery
            </label>
          </div>
        </div>

        {paymentMethod === 'bank_transfer' && (
          <div className="space-y-4 rounded-md border border-navy-100 bg-beige p-4">
            <div>
              <label className="block text-sm font-semibold text-navy-800">Bank Transfer Reference</label>
              <input
                type="text"
                name="bank_reference"
                required
                className="mt-1.5 w-full rounded-md border-navy-100 text-sm focus:border-gold-500 focus:ring-gold-500"
              />
              <p className="mt-1 text-xs text-navy-500">Your own transaction/reference number from the transfer.</p>
            </div>
            <div>
              <label className="block text-sm font-semibold text-navy-800">Proof of Transfer (optional)</label>
              <input
                type="file"
                name="receipt"
                accept="image/jpeg,image/png,application/pdf"
                className="mt-1.5 w-full text-sm text-navy-600"
              />
            </div>
          </div>
        )}

        <SubmitButton />
      </form>

      <div className="card h-fit p-6">
        <h2 className="font-serif text-lg font-bold text-navy-800">Order Summary</h2>
        <ul className="mt-4 space-y-2 text-sm">
          {items.map((item) => (
            <li key={item.productId} className="flex justify-between text-navy-600">
              <span>{item.name} × {item.quantity}</span>
              <span>Rs. {(item.price * item.quantity).toLocaleString()}</span>
            </li>
          ))}
        </ul>
        <div className="mt-4 flex justify-between border-t border-navy-100 pt-4 text-sm font-semibold text-navy-800">
          <span>Subtotal</span>
          <span>Rs. {subtotal.toLocaleString()}</span>
        </div>
        <p className="mt-1 text-xs text-navy-400">Final shipping cost is confirmed after your order is placed.</p>
      </div>
    </div>
  );
}