"use client";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import CommonError from "@/app/components/CommonError";
import { fetchStorefrontInfo, StorefrontInfo } from "../_lib/storeApiCalls";
import { useCart } from "../_lib/useCart";
import { useCheckout } from "./components/_hooks";

export default function CheckoutPage() {
  const params = useParams<{ orgSlug: string }>();
  const { cart, loading: cartLoading } = useCart(params.orgSlug);
  const [info, setInfo] = useState<StorefrontInfo | null>(null);
  const t = useCheckout(params.orgSlug, info);

  useEffect(() => {
    fetchStorefrontInfo(params.orgSlug).then(setInfo).catch(() => {});
  }, [params.orgSlug]);

  if (cartLoading) return <div className="text-center py-9"><div className="spinner-border text-primary" /></div>;

  if (!cart || cart.items.length === 0) {
    return <div className="alert alert-subtle-warning">Your cart is empty. Add something before checking out.</div>;
  }

  const subtotal = parseFloat(cart.subtotal);
  const shippingFee = t.deliveryMethod === "delivery" ? parseFloat(info?.flat_shipping_fee ?? "0") : 0;
  const freeOver = info?.free_shipping_over ? parseFloat(info.free_shipping_over) : null;
  const effectiveShipping = freeOver !== null && subtotal >= freeOver ? 0 : shippingFee;

  return (
    <>
      <h3 className="mb-4">Checkout</h3>
      <CommonError message={t.error} type="error" />

      <div className="row g-4">
        <div className="col-12 col-lg-8">
          <form onSubmit={t.handleSubmit}>
            <div className="card mb-3">
              <div className="card-header"><h6 className="mb-0">Delivery Method</h6></div>
              <div className="card-body d-flex gap-4">
                {info?.allow_delivery && (
                  <div className="form-check">
                    <input className="form-check-input" type="radio" id="delivery" checked={t.deliveryMethod === "delivery"} onChange={() => t.setDeliveryMethod("delivery")} />
                    <label className="form-check-label" htmlFor="delivery">Home Delivery</label>
                  </div>
                )}
                {info?.allow_pickup && (
                  <div className="form-check">
                    <input className="form-check-input" type="radio" id="pickup" checked={t.deliveryMethod === "pickup"} onChange={() => t.setDeliveryMethod("pickup")} />
                    <label className="form-check-label" htmlFor="pickup">Store Pickup</label>
                  </div>
                )}
              </div>
            </div>

            <div className="card mb-3">
              <div className="card-header"><h6 className="mb-0">Contact & {t.deliveryMethod === "delivery" ? "Shipping" : "Pickup"} Details</h6></div>
              <div className="card-body row g-3">
                <div className="col-md-6">
                  <label className="form-label">Full Name</label>
                  <input className="form-control" value={t.name} onChange={(e) => t.setName(e.target.value)} required />
                </div>
                <div className="col-md-6">
                  <label className="form-label">Phone</label>
                  <input className="form-control" value={t.phone} onChange={(e) => t.setPhone(e.target.value)} required />
                </div>
                <div className="col-md-6">
                  <label className="form-label">Email {!t.isLoggedIn && "(for order tracking)"}</label>
                  <input className="form-control" type="email" value={t.email} onChange={(e) => t.setEmail(e.target.value)} />
                </div>
                {t.deliveryMethod === "delivery" && (
                  <>
                    <div className="col-md-8">
                      <label className="form-label">Delivery Address</label>
                      <input className="form-control" value={t.address} onChange={(e) => t.setAddress(e.target.value)} required />
                    </div>
                    <div className="col-md-4">
                      <label className="form-label">City</label>
                      <input className="form-control" value={t.city} onChange={(e) => t.setCity(e.target.value)} required />
                    </div>
                  </>
                )}
              </div>
            </div>

            <div className="card mb-3">
              <div className="card-header"><h6 className="mb-0">Payment</h6></div>
              <div className="card-body">
                <div className="form-check mb-2">
                  <input className="form-check-input" type="radio" id="cod" checked={t.paymentMethod === "cash_on_delivery"} onChange={() => t.setPaymentMethod("cash_on_delivery")} />
                  <label className="form-check-label" htmlFor="cod">Cash on Delivery / Pay at Pickup</label>
                </div>
                <p className="text-body-tertiary small mb-0">No online payment gateway is connected yet — orders are settled in person for now.</p>
              </div>
            </div>

            <button className="btn btn-primary btn-lg w-100" disabled={t.submitting}>
              {t.submitting ? "Placing order..." : "Place Order"}
            </button>
          </form>
        </div>

        <div className="col-12 col-lg-4">
          <div className="card">
            <div className="card-header"><h6 className="mb-0">Order Summary</h6></div>
            <div className="card-body">
              {cart.items.map((i) => (
                <div key={i.id} className="d-flex justify-content-between small mb-2">
                  <span>{i.product_name} × {i.quantity}</span>
                  <span>{i.line_total}</span>
                </div>
              ))}
              <hr />
              <div className="d-flex justify-content-between"><span>Subtotal</span><span>{cart.subtotal}</span></div>
              <div className="d-flex justify-content-between"><span>Shipping</span><span>{effectiveShipping.toFixed(2)}</span></div>
              <hr />
              <div className="d-flex justify-content-between fw-bold fs-5">
                <span>Total</span><span>{(subtotal + effectiveShipping).toFixed(2)}</span>
              </div>
              <p className="text-body-tertiary small mt-2 mb-0">Final tax-inclusive total is confirmed on the order confirmation page.</p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}