import { Badge, Button, ToggleGroup, ToggleGroupItem } from "@cronus-ui/ui";
import { productById, RATING_SUMMARY } from "../lib/demo-store.js";
import { Headphones, Heart, ShoppingCart, Star, StarHalf, Truck } from "lucide-react";

const product = productById("aurora");

interface GalleryShot {
  id: string;
  label: string;
  gradient: string;
  active?: boolean;
}

const galleryShots: GalleryShot[] = [
  { id: "front", label: "Front view", gradient: "from-primary/30 to-info/20", active: true },
  { id: "side", label: "Side profile", gradient: "from-info/30 to-success/20" },
  { id: "case", label: "Travel case", gradient: "from-warning/30 to-primary/20" },
  { id: "earcup", label: "Earcup detail", gradient: "from-success/30 to-info/20" },
];

export function ProductDetailGalleryBlock() {
  return (
    <section
      aria-label="Product detail"
      className="mx-auto grid w-full max-w-5xl gap-8 lg:grid-cols-[1.1fr_1fr]"
    >
      {/* Gallery */}
      <div className="flex flex-col-reverse gap-3 sm:flex-row">
        <div className="flex gap-3 sm:flex-col">
          {galleryShots.map((shot) => (
            <button
              key={shot.id}
              type="button"
              aria-pressed={shot.active === true}
              className={`relative size-16 shrink-0 overflow-hidden rounded-xl bg-gradient-to-br ${shot.gradient}`}
            >
              {shot.active ? (
                <span
                  aria-hidden="true"
                  className="absolute inset-0 rounded-xl ring-2 ring-inset ring-primary"
                />
              ) : null}
              <span className="sr-only">{shot.label}</span>
            </button>
          ))}
        </div>
        <div className="relative flex min-h-64 flex-1 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary/30 to-info/20">
          <Headphones className="size-24 text-fg/40" aria-hidden="true" />
          <div className="absolute start-4 top-4">
            <Badge variant="primary">{product?.badge}</Badge>
          </div>
        </div>
      </div>

      {/* Details */}
      <div className="flex flex-col gap-5">
        <div className="flex flex-col gap-2">
          <span className="text-xs font-medium uppercase tracking-wide text-fg-tertiary">
            Aurora Audio · Over-ear
          </span>
          <h1 className="font-display text-3xl font-semibold text-fg">
            {product?.name}
          </h1>
          <div className="flex flex-wrap items-center gap-2">
            <span className="flex items-center gap-0.5">
              <Star className="size-4 fill-warning text-warning" aria-hidden="true" />
              <Star className="size-4 fill-warning text-warning" aria-hidden="true" />
              <Star className="size-4 fill-warning text-warning" aria-hidden="true" />
              <Star className="size-4 fill-warning text-warning" aria-hidden="true" />
              <StarHalf className="size-4 fill-warning text-warning" aria-hidden="true" />
            </span>
            <span className="text-sm font-medium text-fg">{product?.rating}</span>
            <a
              href="#reviews"
              className="text-sm text-fg-secondary underline-offset-4 hover:underline"
            >
              {RATING_SUMMARY.count} reviews
            </a>
          </div>
        </div>

        <div className="flex flex-wrap items-baseline gap-2">
          <span className="font-display text-3xl font-semibold text-fg">{product?.price}</span>
          <span className="text-base text-fg-tertiary line-through">$399.00</span>
          <Badge variant="success">Save $50</Badge>
        </div>

        <div className="grid grid-cols-3 gap-3">
          <div className="rounded-xl bg-surface-inset p-3 text-center">
            <span className="block font-display text-sm font-semibold text-fg">40 h</span>
            <span className="block text-xs text-fg-tertiary">Battery</span>
          </div>
          <div className="rounded-xl bg-surface-inset p-3 text-center">
            <span className="block font-display text-sm font-semibold text-fg">−48 dB</span>
            <span className="block text-xs text-fg-tertiary">Noise cancel</span>
          </div>
          <div className="rounded-xl bg-surface-inset p-3 text-center">
            <span className="block font-display text-sm font-semibold text-fg">254 g</span>
            <span className="block text-xs text-fg-tertiary">Weight</span>
          </div>
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-sm font-medium text-fg">Color</span>
          <ToggleGroup type="single" defaultValue="midnight" variant="outline" aria-label="Color">
            <ToggleGroupItem value="midnight">Midnight</ToggleGroupItem>
            <ToggleGroupItem value="fog">Fog Gray</ToggleGroupItem>
            <ToggleGroupItem value="sandstone">Sandstone</ToggleGroupItem>
          </ToggleGroup>
        </div>

        <div className="flex flex-wrap items-center gap-3">
          <Button variant="primary" size="lg" className="flex-1">
            <ShoppingCart className="size-4" aria-hidden="true" />
            Add to cart — {product?.price}
          </Button>
          <Button variant="outline" size="icon" className="size-11">
            <Heart className="size-4" aria-hidden="true" />
            <span className="sr-only">Add to wishlist</span>
          </Button>
        </div>

        <p className="flex items-center gap-2 text-sm text-fg-secondary">
          <Truck className="size-4 text-fg-tertiary" aria-hidden="true" />
          Free 2-day shipping · Order within 6 hours for Thursday delivery
        </p>
      </div>
    </section>
  );
}