"use client"

import { useMemo } from "react"
import { cn } from "@/lib/utils"
import { VIDEO_FILTERS, type VideoFilterId } from "@/lib/video-filters"

// A compact horizontal sheet of filter chips. Mirrors the Snapchat /
// Instagram Stories pattern: a floating row of round swatch previews
// with the filter's label beneath each, the selected chip highlighted
// with a ring. The list scrolls horizontally on mobile to keep the
// footprint small; on desktop it centers.
//
// The tray is organised into two pill-shaped tab groups — Beauty and
// Effects — with a small divider between them. The default "Normal"
// chip lives in the Beauty group (it's conceptually "no beauty") so
// users always have a zero-effect escape hatch visible.
export function FilterTray({
  active,
  onChange,
  className,
}: {
  active: VideoFilterId
  onChange: (id: VideoFilterId) => void
  className?: string
}) {
  const groups = useMemo(() => {
    const beauty = VIDEO_FILTERS.filter(
      (f) => f.id === "none" || f.id.startsWith("beauty-"),
    )
    const effects = VIDEO_FILTERS.filter(
      (f) => f.id !== "none" && !f.id.startsWith("beauty-"),
    )
    return { beauty, effects }
  }, [])

  return (
    <div
      role="radiogroup"
      aria-label="Video filter"
      className={cn(
        "pointer-events-auto flex max-w-full items-stretch gap-3 overflow-x-auto rounded-2xl border border-border bg-background/90 px-3 py-2 shadow-xl ring-1 ring-black/5 backdrop-blur-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:justify-center",
        className,
      )}
    >
      <FilterGroup
        label="Beauty"
        filters={groups.beauty}
        active={active}
        onChange={onChange}
      />
      <div
        aria-hidden="true"
        className="mx-1 my-2 w-px shrink-0 bg-border"
      />
      <FilterGroup
        label="Effects"
        filters={groups.effects}
        active={active}
        onChange={onChange}
      />
    </div>
  )
}

function FilterGroup({
  label,
  filters,
  active,
  onChange,
}: {
  label: string
  filters: typeof VIDEO_FILTERS
  active: VideoFilterId
  onChange: (id: VideoFilterId) => void
}) {
  return (
    <div className="flex shrink-0 flex-col items-start gap-1">
      <span className="px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
        {label}
      </span>
      <div className="flex items-end gap-3">
        {filters.map((f) => {
          const selected = f.id === active
          return (
            <button
              key={f.id}
              type="button"
              role="radio"
              aria-checked={selected}
              onClick={() => onChange(f.id)}
              className={cn(
                "flex shrink-0 flex-col items-center gap-1 rounded-xl p-1 text-[11px] font-medium text-foreground transition-transform",
                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
                selected ? "scale-[1.04]" : "hover:scale-[1.03]",
              )}
            >
              <span
                aria-hidden="true"
                className={cn(
                  "relative block h-11 w-11 overflow-hidden rounded-full ring-2 transition-all",
                  selected
                    ? "ring-primary ring-offset-2 ring-offset-background"
                    : "ring-border",
                )}
                // Swatch is a small gradient preview; the CSS filter
                // from the preset is layered on top to hint at its look
                // even before the user has started their camera. For
                // `none` this evaluates to pass-through and still looks
                // clean.
                style={{
                  backgroundImage: f.swatch,
                  filter: f.css === "none" ? undefined : f.css,
                }}
              />
              <span className="max-w-[64px] truncate">{f.label}</span>
            </button>
          )
        })}
      </div>
    </div>
  )
}