import { Link } from "react-router-dom";
import { Minus, Plus, Trash2, ShoppingBag, ArrowRight } from "lucide-react";
import SiteLayout from "@/components/SiteLayout";
import { useCart } from "@/context/CartContext";
import { formatPrice } from "@/lib/currency";
import { Price } from "@/components/ui/Price";

export default function Cart() {
  const { lines, subtotal, updateQuantity, removeFromCart, hasPhysical } = useCart();

  const shippingEstimate = hasPhysical ? (subtotal >= 75 ? 0 : 7.99) : 0;
  const total = subtotal + shippingEstimate;

  return (
    <SiteLayout>
      <div className="max-w-6xl mx-auto px-4 md:px-6 py-10">
        <h1 className="text-3xl md:text-4xl font-extrabold text-slate-900 mb-2">
          Your Cart
        </h1>
        <p className="text-slate-500 mb-8">
          Review your items before heading to secure checkout.
        </p>

        {lines.length === 0 ? (
          <div className="text-center py-24 bg-white border border-slate-200 rounded-2xl">
            <ShoppingBag className="w-14 h-14 text-slate-300 mx-auto mb-4" />
            <h2 className="text-xl font-bold text-slate-900">
              Your cart is empty.
            </h2>
            <p className="text-slate-500 mt-1">
              Start browsing our shop to find something great.
            </p>
            <Link
              to="/shop"
              className="mt-6 inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-[#0b6e3e] text-white font-semibold hover:bg-[#0a8048]"
            >
              Browse shop <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        ) : (
          <div className="grid lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2 space-y-3">
              {lines.map((l) => (
                <div
                  key={`${l.product_id}-${l.variant_label}`}
                  className="flex gap-4 bg-white border border-slate-200 rounded-2xl p-4"
                >
                  <div className="w-24 h-24 md:w-32 md:h-32 rounded-xl bg-slate-50 overflow-hidden flex-shrink-0">
                    {l.image_url ? (
                      <img
                        src={l.image_url}
                        alt={l.name}
                        className="w-full h-full object-cover"
                      />
                    ) : null}
                  </div>
                  <div className="flex-1 min-w-0">
                    <Link
                      to={`/shop/${l.slug}`}
                      className="font-bold text-slate-900 hover:text-[#0b6e3e] line-clamp-2"
                    >
                      {l.name}
                    </Link>
                    {l.variant_label && (
                      <div className="text-xs text-slate-500 mt-0.5">
                        {l.variant_label}
                      </div>
                    )}
                    <div className="text-[#0b6e3e] font-extrabold mt-1">
                      <Price amount={l.unit_price} />
                    </div>
                    <div className="flex items-center gap-4 mt-3">
                      <div className="inline-flex items-center border border-slate-200 rounded-lg">
                        <button
                          onClick={() =>
                            updateQuantity(l.product_id, l.variant_label, l.quantity - 1)
                          }
                          className="p-2 hover:bg-slate-50"
                          aria-label="Decrease"
                        >
                          <Minus className="w-3.5 h-3.5" />
                        </button>
                        <span className="px-3 text-sm font-semibold">{l.quantity}</span>
                        <button
                          onClick={() =>
                            updateQuantity(l.product_id, l.variant_label, l.quantity + 1)
                          }
                          disabled={l.stock >= 0 && l.quantity >= l.stock}
                          className="p-2 hover:bg-slate-50 disabled:opacity-40"
                          aria-label="Increase"
                        >
                          <Plus className="w-3.5 h-3.5" />
                        </button>
                      </div>
                      <button
                        onClick={() => removeFromCart(l.product_id, l.variant_label)}
                        className="text-xs text-rose-600 hover:text-rose-700 inline-flex items-center gap-1"
                      >
                        <Trash2 className="w-3.5 h-3.5" /> Remove
                      </button>
                    </div>
                  </div>
                  <div className="text-right font-bold text-slate-900">
                    <Price amount={l.unit_price * l.quantity} />
                  </div>
                </div>
              ))}
            </div>

            {/* Summary */}
            <aside className="bg-white border border-slate-200 rounded-2xl p-6 h-fit sticky top-6">
              <h2 className="text-lg font-bold text-slate-900">Order Summary</h2>
              <div className="mt-4 space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-600">Subtotal</span>
                  <span className="font-semibold text-slate-900">
                    <Price amount={subtotal} />
                  </span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-600">Shipping</span>
                  <span className="font-semibold text-slate-900">
                    {hasPhysical ? (
                      shippingEstimate === 0 ? (
                        "Free"
                      ) : (
                        <Price amount={shippingEstimate} />
                      )
                    ) : (
                      "—"
                    )}
                  </span>
                </div>
                <div className="border-t border-slate-200 pt-2 flex justify-between">
                  <span className="font-bold text-slate-900">Total</span>
                  <span className="text-xl font-extrabold text-[#0b6e3e]">
                    <Price amount={total} />
                  </span>
                </div>
              </div>
              {hasPhysical && subtotal < 75 && (
                <div className="mt-3 text-xs text-slate-500">
                  Add <span className="font-semibold text-[#0b6e3e]"><Price amount={75 - subtotal} /></span> more for free shipping.
                </div>
              )}
              <Link
                to="/shop/checkout"
                className="mt-5 block text-center py-3 rounded-xl bg-[#0b6e3e] text-white font-bold hover:bg-[#0a8048]"
              >
                Proceed to Checkout
              </Link>
              <Link
                to="/shop"
                className="mt-2 block text-center text-sm text-slate-500 hover:text-[#0b6e3e]"
              >
                Continue shopping
              </Link>
            </aside>
          </div>
        )}
      </div>
    </SiteLayout>
  );
}