"use client";

import Link from "next/link";
import Image from "next/image";
import { Minus, Plus, Trash2 } from "lucide-react";

import { GlassCard } from "@/components/shared/glass-card";
import { Button } from "@/components/ui/button";
import { ProceedToCheckoutButton } from "@/components/cart/proceed-to-checkout-button";
import { ButtonLink } from "@/components/ui/button-link";
import { products } from "@/lib/data/catalog";
import { calculateTotals } from "@/lib/payments/checkout";
import { useCartStore } from "@/store/cart-store";

export function CartView() {
  const lines = useCartStore((s) => s.lines);
  const coupon = useCartStore((s) => s.coupon);
  const setCoupon = useCartStore((s) => s.setCoupon);
  const addItem = useCartStore((s) => s.addItem);
  const removeItem = useCartStore((s) => s.removeItem);
  const setQuantity = useCartStore((s) => s.setQuantity);

  const { subtotal, discount, total, coupon: normalized } = calculateTotals(
    lines,
    coupon,
  );

  if (!lines.length) {
    return (
      <GlassCard className="mx-auto max-w-lg p-10 text-center">
        <p className="font-display text-2xl">YOUR CART IS EMPTY</p>
        <p className="mt-2 text-muted-foreground">
          Add a program or ebook to start your transformation.
        </p>
        <ButtonLink href="/programs" className="mt-8 rounded-full px-8">
          Browse programs
        </ButtonLink>
      </GlassCard>
    );
  }

  return (
    <div className="mx-auto grid max-w-5xl gap-8 lg:grid-cols-[1fr_320px]">
      <div className="space-y-4">
        {lines.map((line) => {
          const p = products.find((x) => x.id === line.productId);
          if (!p) return null;
          return (
            <GlassCard key={line.productId} className="flex gap-4 p-4 sm:items-center">
              <div className="relative size-24 shrink-0 overflow-hidden rounded-xl sm:size-28">
                <Image src={p.image} alt={p.title} fill className="object-cover" sizes="80px" />
              </div>
              <div className="min-w-0 flex-1">
                <Link href={`/programs#${p.slug}`} className="font-display text-xl hover:text-primary">
                  {p.title}
                </Link>
                <p className="text-sm text-muted-foreground">₹{p.priceInr} each</p>
                <div className="mt-3 flex items-center gap-2">
                  <Button
                    type="button"
                    size="icon-xs"
                    variant="outline"
                    onClick={() =>
                      setQuantity(line.productId, Math.max(1, line.quantity - 1))
                    }
                  >
                    <Minus className="size-3" />
                  </Button>
                  <span className="w-8 text-center text-sm font-semibold">{line.quantity}</span>
                  <Button
                    type="button"
                    size="icon-xs"
                    variant="outline"
                    onClick={() => addItem(line.productId)}
                  >
                    <Plus className="size-3" />
                  </Button>
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon-xs"
                    className="ml-auto text-destructive"
                    onClick={() => removeItem(line.productId)}
                  >
                    <Trash2 className="size-4" />
                  </Button>
                </div>
              </div>
              <div className="text-right font-semibold">
                ₹{p.priceInr * line.quantity}
              </div>
            </GlassCard>
          );
        })}
      </div>

      <GlassCard className="h-fit space-y-4 p-6">
        <p className="text-xs font-semibold uppercase tracking-widest text-primary">
          Summary
        </p>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Subtotal</span>
          <span>₹{subtotal}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-muted-foreground">Discount</span>
          <span>- ₹{discount}</span>
        </div>
        <div className="border-t border-white/10 pt-4">
          <label className="text-xs text-muted-foreground">Coupon</label>
          <div className="mt-1 flex gap-2">
            <input
              defaultValue={coupon ?? ""}
              placeholder="ELITE35"
              className="flex-1 rounded-lg border border-white/15 bg-white/5 px-3 py-2 text-sm"
              onBlur={(e) => setCoupon(e.target.value || undefined)}
            />
          </div>
          {normalized ? (
            <p className="mt-2 text-xs text-primary">Applied: {normalized}</p>
          ) : null}
        </div>
        <div className="flex justify-between font-display text-2xl">
          <span>Total</span>
          <span className="text-primary">₹{total}</span>
        </div>
        <ProceedToCheckoutButton className="w-full rounded-xl py-6 text-center">
          Checkout
        </ProceedToCheckoutButton>
        <p className="text-muted-foreground text-center text-xs">
          Sign in required — you&apos;ll return here to pay after login or Google.
        </p>
      </GlassCard>
    </div>
  );
}