import { RiAddLine, RiSubtractLine } from "@remixicon/react";
import Image from "next/image";
import { Button } from "../ui/button";

export type CartItem = {
  id: string;
  name: string;
  details: string;
  quantity: number;
  price: number;
  image: string;
  maxQuantity: number;
};

function TrashIcon() {
  return (
    <svg
      className="h-4 w-4"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
    </svg>
  );
}

export function CartItemsSection({
  items,
  onUpdateQuantity,
  onRemove,
  busyId,
}: {
  items: CartItem[];
  onUpdateQuantity?: (id: string, quantity: number) => void;
  onRemove?: (id: string) => void;
  busyId?: string | null;
}) {
  return (
    <section className="flex-1">
      <div className="overflow-hidden rounded-[18px] border border-[#d6d6d6]">
        <div className="hidden grid-cols-12 gap-4 border-b border-[#d6d6d6] px-6 py-4 text-xs font-semibold uppercase tracking-wide text-[#676767] md:grid">
          <div className="col-span-5">Product Code</div>
          <div className="col-span-3 text-center">Quantity</div>
          <div className="col-span-2 text-center">Total</div>
          <div className="col-span-2 text-right">Action</div>
        </div>

        {items.map((item) => {
          const itemTotal = item.price * item.quantity;
          const busy = busyId === item.id;
          return (
            <div
              key={item.id}
              className="border-b border-[#d6d6d6] p-4 last:border-b-0 md:grid md:grid-cols-12 md:items-center md:gap-4 md:px-6"
            >
              {/* Product + Delete */}
              <div className="flex justify-between gap-3 md:col-span-5">
                <div className="flex gap-3">
                  <div className="h-16 w-16 shrink-0 overflow-hidden rounded-xl">
                    <Image
                      src={item.image}
                      alt={item.name}
                      width={64}
                      height={64}
                      className="h-full w-full object-cover"
                    />
                  </div>

                  <div>
                    <h3 className="text-sm font-semibold md:text-base">
                      {item.name}
                    </h3>

                    <p className="text-xs text-muted-foreground">
                      {item.details}
                    </p>
                  </div>
                </div>

                <button
                  onClick={() => onRemove?.(item.id)}
                  disabled={busy}
                  aria-label={`Remove ${item.name}`}
                  className="self-start rounded-full p-2 text-muted-foreground hover:text-red-500 md:hidden disabled:opacity-40"
                >
                  <TrashIcon />
                </button>
              </div>

              {/* Mobile Qty + Price */}
              <div className="mt-4 flex items-center justify-between md:hidden">
                <div className="flex items-center gap-1 rounded-full border border-[#cfcfcf] p-1">
                  <Button
                    size="icon-sm"
                    variant="ghost"
                    onClick={() => onUpdateQuantity?.(item.id, Math.max(1, item.quantity - 1))}
                    disabled={item.quantity <= 1 || busy}
                  >
                    <RiSubtractLine />
                  </Button>

                  <span className="min-w-10 text-center text-sm font-medium">
                    {item.quantity}
                  </span>

                  <Button
                    size="icon-sm"
                    variant="ghost"
                    onClick={() => onUpdateQuantity?.(item.id, Math.min(item.maxQuantity, item.quantity + 1))}
                    disabled={item.quantity >= item.maxQuantity || busy}
                  >
                    <RiAddLine />
                  </Button>
                </div>

                <p className="text-lg font-bold">
                  {itemTotal.toLocaleString("en-BD")} ৳
                </p>
              </div>

              {/* Desktop */}
              <div className="hidden justify-center md:col-span-3 md:flex">
                {/* Qty Controls */}
                <div className="flex items-center gap-1">
                  <Button
                    size="icon-sm"
                    variant="outline"
                    className="border-[#cfcfcf]"
                    onClick={() => onUpdateQuantity?.(item.id, Math.max(1, item.quantity - 1))}
                    disabled={item.quantity <= 1 || busy}
                  >
                    <RiSubtractLine />
                  </Button>

                  <span className="min-w-16 rounded-full border border-[#cfcfcf] px-4 py-1 text-center text-sm font-medium">
                    {item.quantity}
                  </span>

                  <Button
                    size="icon-sm"
                    variant="outline"
                    className="border-[#cfcfcf]"
                    onClick={() => onUpdateQuantity?.(item.id, Math.min(item.maxQuantity, item.quantity + 1))}
                    disabled={item.quantity >= item.maxQuantity || busy}
                  >
                    <RiAddLine />
                  </Button>
                </div>
              </div>

              <div className="hidden text-center text-lg font-bold md:col-span-2 md:block">
                {itemTotal.toLocaleString("en-BD")} ৳
              </div>

              <div className="hidden justify-end md:col-span-2 md:flex">
                <button
                  onClick={() => onRemove?.(item.id)}
                  disabled={busy}
                  aria-label={`Remove ${item.name}`}
                  className="rounded-full p-2 text-muted-foreground hover:text-red-500 disabled:opacity-40"
                >
                  <TrashIcon />
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}