import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
  Badge,
  Button,
  ToggleGroup,
  ToggleGroupItem,
} from "@cronus-ui/ui";
import {
  Headphones,
  Heart,
  Minus,
  Plus,
  RotateCcw,
  ShieldCheck,
  ShoppingCart,
  Star,
  StarHalf,
  Truck,
} from "lucide-react";
import { productById, RATING_SUMMARY } from "../lib/demo-store.js";

const product = productById("aurora");

export function ProductDetailBlock() {
  return (
    <section
      aria-label="Product detail"
      className="mx-auto grid w-full max-w-5xl gap-8 lg:grid-cols-[1.05fr_1fr]"
    >
      {/* Product art */}
      <div className="relative flex aspect-square items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary/25 to-info/15">
        <Headphones className="size-28 text-fg/40" aria-hidden="true" />
        <div className="absolute start-4 top-4">
          <Badge variant="primary">New arrival</Badge>
        </div>
        <div className="absolute bottom-4 end-4">
          <Badge variant="secondary">Photo 1 of 4</Badge>
        </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>

        <p className="text-sm leading-relaxed text-fg-secondary">
          Flagship over-ear headphones with adaptive noise cancellation, spatial audio and a
          40-hour battery — wrapped in a machined-aluminum frame with memory-foam earcups.
        </p>

        <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-col gap-2">
          <span className="text-sm font-medium text-fg">Quantity</span>
          <div className="flex flex-wrap items-center gap-3">
            <div className="flex items-center rounded-lg border border-border">
              <Button variant="ghost" size="icon" className="rounded-e-none">
                <Minus className="size-4" aria-hidden="true" />
                <span className="sr-only">Decrease quantity</span>
              </Button>
              <span className="w-10 text-center text-sm font-medium text-fg">1</span>
              <Button variant="ghost" size="icon" className="rounded-s-none">
                <Plus className="size-4" aria-hidden="true" />
                <span className="sr-only">Increase quantity</span>
              </Button>
            </div>
            <Button variant="primary" size="lg" className="flex-1">
              <ShoppingCart className="size-4" aria-hidden="true" />
              Add to cart
            </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>
        </div>

        <div className="flex flex-wrap gap-x-5 gap-y-2 text-sm text-fg-secondary">
          <span className="flex items-center gap-2">
            <Truck className="size-4 text-fg-tertiary" aria-hidden="true" />
            Free 2-day shipping
          </span>
          <span className="flex items-center gap-2">
            <RotateCcw className="size-4 text-fg-tertiary" aria-hidden="true" />
            60-day returns
          </span>
          <span className="flex items-center gap-2">
            <ShieldCheck className="size-4 text-fg-tertiary" aria-hidden="true" />
            2-year warranty
          </span>
        </div>

        <Accordion type="single" collapsible defaultValue="details" className="w-full">
          <AccordionItem value="details">
            <AccordionTrigger>Product details</AccordionTrigger>
            <AccordionContent>
              <ul className="flex list-disc flex-col gap-1.5 ps-4 text-sm text-fg-secondary">
                <li>Adaptive ANC with a studio-tuned transparency mode</li>
                <li>40-hour battery — a 5-minute charge adds 4 hours</li>
                <li>Bluetooth 5.4 with multipoint pairing</li>
                <li>254 g machined-aluminum frame, foldable</li>
              </ul>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="shipping">
            <AccordionTrigger>Shipping &amp; returns</AccordionTrigger>
            <AccordionContent>
              <p className="text-sm text-fg-secondary">
                Orders placed before 2 PM ship the same day. Free 2-day shipping across the US
                and free returns within 60 days — no restocking fee.
              </p>
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="box">
            <AccordionTrigger>In the box</AccordionTrigger>
            <AccordionContent>
              <p className="text-sm text-fg-secondary">
                Aurora headphones, hard-shell travel case, USB-C cable, 3.5 mm audio cable and
                a quick-start guide.
              </p>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </section>
  );
}