import Image from "next/image";

import Button from "@/components/ui/Button";
import { cn } from "@/lib/utils";

interface CartItem {
  id: string;
  name: string;
  imageSrc: string;
  imageAlt?: string;
  size?: string;
  color?: string;
  price: string;
  oldPrice?: string;
  discountBadge?: string;
  checked?: boolean;
  quantity?: number;
}

interface CartShop {
  id: string;
  name: string;
  logoSrc?: string;
  checked?: boolean;
  items: CartItem[];
}

interface CartItemsListProps {
  shops?: CartShop[];
  className?: string;
}

const defaultShops: CartShop[] = [
  {
    id: "cozy",
    name: "Cozy",
    logoSrc: "/images/cozy-round.svg",
    checked: true,
    items: [
      {
        id: "calla-tote",
        name: "Calla Tote Bag - Espresso Brown",
        imageSrc: "/images/tote-gallery-1.png",
        size: "Small - 39.5",
        color: "Espresso Brown",
        price: "LKR 5,000.00",
        oldPrice: "LKR 5,600.00",
        discountBadge: "-40%",
        checked: true,
        quantity: 1,
      },
      {
        id: "satin-heel",
        name: "Satin Teardrop Heel",
        imageSrc: "/images/tote-gallery-3.png",
        size: "39",
        color: "Silver",
        price: "LKR 8,000.00",
        checked: true,
        quantity: 1,
      },
    ],
  },
  {
    id: "leafy",
    name: "Leafy",
    logoSrc: "/images/leafy-round.svg",
    items: [
      {
        id: "lana-perfume",
        name: "Lana Perfume",
        imageSrc: "/images/deal-banner-product.png",
        size: "40ml",
        color: "Green",
        price: "LKR 7,000.00",
        oldPrice: "LKR 9,000.00",
        discountBadge: "-40%",
        quantity: 1,
      },
      {
        id: "night-cream",
        name: "Leafy Special Night Cream",
        imageSrc: "/images/promo-beauty-card.png",
        size: "39",
        color: "Silver",
        price: "LKR 8,000.00",
        quantity: 1,
      },
      {
        id: "lana-serum",
        name: "Lana_Serum",
        imageSrc: "/images/deal-banner-product.png",
        size: "39",
        color: "Silver",
        price: "LKR 8,000.00",
        quantity: 1,
      },
    ],
  },
];

function Checkbox({ checked, label }: { checked?: boolean; label: string }) {
  return (
    <input
      type="checkbox"
      defaultChecked={checked}
      aria-label={label}
      className="h-4 w-4 shrink-0 rounded border-gray-300 accent-[#00AFC1]"
    />
  );
}

function IconButton({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <button
      type="button"
      aria-label={label}
      className="text-gray-500 transition-colors hover:text-gray-900"
    >
      {children}
    </button>
  );
}

export default function CartItemsList({ shops = defaultShops, className }: CartItemsListProps) {
  const totalCount = shops.reduce((count, shop) => count + shop.items.length, 0);

  return (
    <section className={cn("w-full bg-white text-gray-900", className)}>
      <div className="flex items-center gap-3 border-b border-gray-200 pb-6">
        <Checkbox label="Select all cart items" />
        <h2 className="text-sm font-medium text-gray-900">All Items ({totalCount})</h2>
      </div>

      <div className="divide-y divide-gray-200">
        {shops.map((shop) => (
          <div key={shop.id} className="py-7">
            <div className="mb-5 flex items-center gap-3 rounded-md bg-gray-50 px-3 py-3">
              <Checkbox checked={shop.checked} label={`Select ${shop.name} shop`} />
              {shop.logoSrc && (
                <div className="relative h-10 w-10 overflow-hidden rounded-full">
                  <Image src={shop.logoSrc} alt={shop.name} fill sizes="40px" className="object-cover" />
                </div>
              )}
              <span className="text-sm font-medium text-gray-900">{shop.name}</span>
              <Button
                variant="outline"
                className="ml-auto h-9 rounded-full border-[#00AFC1] px-5 text-xs text-[#00AFC1]"
              >
                Visit Store
              </Button>
            </div>

            <div className="space-y-6">
              {shop.items.map((item) => (
                <div key={item.id} className="grid grid-cols-[auto_72px_1fr] gap-4 sm:grid-cols-[auto_88px_1fr_auto] sm:items-center">
                  <Checkbox checked={item.checked} label={`Select ${item.name}`} />

                  <div className="relative h-20 w-[72px] overflow-hidden rounded bg-gray-100 sm:h-24 sm:w-24">
                    <Image
                      src={item.imageSrc}
                      alt={item.imageAlt ?? item.name}
                      fill
                      sizes="96px"
                      className="object-cover"
                    />
                  </div>

                  <div className="min-w-0 space-y-2">
                    <h3 className="text-sm font-medium text-gray-900">{item.name}</h3>
                    {(item.size || item.color) && (
                      <p className="text-xs text-gray-500">
                        {item.size && <>Size: {item.size}</>}
                        {item.size && item.color && <span> · </span>}
                        {item.color && <>Color: {item.color}</>}
                      </p>
                    )}
                    <div className="flex flex-wrap items-center gap-3">
                      <span className="text-base font-medium text-gray-900">{item.price}</span>
                      {item.oldPrice && (
                        <span className="text-sm text-red-500 line-through">{item.oldPrice}</span>
                      )}
                    </div>
                    {item.discountBadge && (
                      <span className="inline-flex rounded bg-red-500 px-2 py-1 text-[10px] font-semibold text-white">
                        {item.discountBadge}
                      </span>
                    )}
                  </div>

                  <div className="col-start-3 flex items-center gap-4 sm:col-start-auto">
                    <select
                      defaultValue={item.quantity ?? 1}
                      aria-label={`Quantity for ${item.name}`}
                      className="h-9 rounded-full bg-gray-100 px-4 text-sm text-gray-900 outline-none"
                    >
                      {[1, 2, 3, 4, 5].map((quantity) => (
                        <option key={quantity} value={quantity}>
                          {quantity}
                        </option>
                      ))}
                    </select>

                    <IconButton label={`Add ${item.name} to wishlist`}>
                      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z" />
                      </svg>
                    </IconButton>

                    <IconButton label={`Remove ${item.name}`}>
                      <svg className="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 7h12M10 11v6M14 11v6M9 7l1-2h4l1 2M8 7v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V7" />
                      </svg>
                    </IconButton>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
