"use client";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { useCart } from "../_lib/useCart";

export default function CartPage() {
  const params = useParams<{ orgSlug: string }>();
  const router = useRouter();
  const { cart, loading, remove } = useCart(params.orgSlug);

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

  const items = cart?.items ?? [];

  return (
    <>
      <h3 className="mb-4">Your Cart</h3>

      {items.length === 0 ? (
        <div className="text-center py-9 text-body-tertiary">
          <span className="fa-solid fa-cart-shopping fs-1 mb-3 d-block" />
          Your cart is empty.
          <div className="mt-3"><Link href={`/${params.orgSlug}`} className="btn btn-primary btn-sm">Start Shopping</Link></div>
        </div>
      ) : (
        <div className="row g-4">
          <div className="col-12 col-lg-8">
            <div className="card">
              <div className="card-body p-0">
                <table className="table mb-0">
                  <thead><tr><th>Item</th><th>Qty</th><th className="text-end">Price</th><th className="text-end">Total</th><th /></tr></thead>
                  <tbody>
                    {items.map((i) => (
                      <tr key={i.id}>
                        <td className="d-flex align-items-center gap-2">
                          {i.product_image ? (
                            <img src={i.product_image} alt={i.product_name} width={48} height={48} className="rounded object-fit-cover" />
                          ) : (
                            <div className="bg-body-tertiary rounded d-flex align-items-center justify-content-center" style={{ width: 48, height: 48 }}>
                              <span className="fa-solid fa-image text-body-tertiary" />
                            </div>
                          )}
                          <Link href={`/${params.orgSlug}/products/${i.product}`} className="text-decoration-none text-dark">{i.product_name}</Link>
                        </td>
                        <td>{i.quantity}</td>
                        <td className="text-end">{i.unit_price}</td>
                        <td className="text-end fw-semibold">{i.line_total}</td>
                        <td>
                          <button className="btn btn-sm btn-link text-danger" onClick={() => remove(i.product)}>
                            <span className="fa-solid fa-trash" />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div className="col-12 col-lg-4">
            <div className="card">
              <div className="card-body">
                <div className="d-flex justify-content-between fs-5 fw-bold mb-3">
                  <span>Subtotal</span><span>{cart?.subtotal}</span>
                </div>
                <p className="text-body-tertiary small">Taxes and shipping calculated at checkout.</p>
                <button className="btn btn-primary w-100" onClick={() => router.push(`/${params.orgSlug}/checkout`)}>
                  Proceed to Checkout
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}