"use client"

/**
 * Windows 11–style folder art (Icons8) + optional FA glyph on the pocket.
 * Static asset: `public/folders/icons8-folder-windows-11.svg`
 */

import * as React from "react"
import { cn } from "../../lib/utils"

/**
 * Color palette tones shared across folder hubs. Domain-specific palette
 * names (e.g. `LibraryFolderColorKey`) are structurally identical to
 * this union and pass through without conversion.
 */
export type FolderGlyphColorKey =
  | "brand"
  | "success"
  | "warning"
  | "destructive"
  | "muted"
  | "chart1"
  | "chart2"
  | "chart3"

/** Default asset path (override via `OsFolderGlyph` `src` prop if you ship a different file). */
export const OS_FOLDER_GLYPH_SRC = "/folders/icons8-folder-windows-11.svg"

/** Subtle hue tweak so “color” choice still reads on the shared yellow asset. */
const COLOR_TINT_FILTER: Record<FolderGlyphColorKey, string> = {
  brand: "hue-rotate(-42deg) saturate(1.25) brightness(0.97)",
  success: "hue-rotate(82deg) saturate(1.2) brightness(0.95)",
  warning: "hue-rotate(-5deg) saturate(1.35) brightness(1.02)",
  destructive: "hue-rotate(300deg) saturate(1.15) brightness(0.92)",
  muted: "saturate(0.15) brightness(1.08)",
  chart1: "hue-rotate(200deg) saturate(1.2) brightness(0.96)",
  chart2: "hue-rotate(95deg) saturate(1.15) brightness(0.96)",
  chart3: "hue-rotate(265deg) saturate(1.2) brightness(0.96)",
}

const SIZE_MAP = {
  /** Compact — folder inspector / column headers (matches ~36px row height). */
  xs: "h-9 w-[2.6rem]",
  sm: "h-[3.35rem] w-[3.85rem]",
  md: "h-[4.6rem] w-[5.25rem]",
  lg: "h-[6.5rem] w-[7.25rem]",
}

const ICON_TEXT: Record<keyof typeof SIZE_MAP, string> = {
  xs: "text-xs leading-none",
  sm: "text-lg",
  md: "text-2xl",
  lg: "text-4xl",
}

/** Darker version of each folder color for punched icon appearance. */
const ICON_COLOR: Record<FolderGlyphColorKey, string> = {
  brand: "text-orange-800 dark:text-orange-600",
  success: "text-emerald-800 dark:text-emerald-600",
  warning: "text-amber-800 dark:text-amber-600",
  destructive: "text-red-800 dark:text-red-600",
  muted: "text-slate-600 dark:text-slate-400",
  chart1: "text-blue-800 dark:text-blue-600",
  chart2: "text-lime-800 dark:text-lime-600",
  chart3: "text-purple-800 dark:text-purple-600",
}

export interface OsFolderGlyphProps {
  colorKey: FolderGlyphColorKey
  /** Font Awesome icon classes without weight (e.g. `fa-stethoscope`). */
  icon: string
  size?: keyof typeof SIZE_MAP
  className?: string
  variant?: "solid" | "outline"
  /**
   * When false, exposes `role="img"` + `aria-label` (use with a short label, e.g. sheet preview).
   * When true (default), hides the glyph from AT — parent control should name the action.
   */
  decorative?: boolean
  /** Required when `decorative={false}` */
  label?: string
}

export function OsFolderGlyph({
  colorKey,
  icon,
  size = "md",
  className,
  variant = "solid",
  decorative = true,
  label,
}: OsFolderGlyphProps) {
  const outline = variant === "outline"
  const tint = COLOR_TINT_FILTER[colorKey]

  return (
    <div
      className={cn(
        "group relative shrink-0 select-none transition-[transform,box-shadow] duration-200 ease-out",
        "hover:z-[1] hover:scale-105 motion-reduce:transform-none motion-reduce:hover:scale-100",
        SIZE_MAP[size],
        className,
      )}
      role={!decorative && label ? "img" : undefined}
      aria-label={!decorative ? label : undefined}
      aria-hidden={decorative ? true : undefined}
    >
      {/* Static SVG — design-system ships an HTML `<img>` so non-Next consumers
          (Vite, Remix, plain CRA) can use it without `next/image`. Folder
          grids render many of these at once; lazy-loading lets the browser
          skip off-screen glyphs until they scroll near the viewport. */}
      <img
        src={OS_FOLDER_GLYPH_SRC}
        alt=""
        width={240}
        height={240}
        draggable={false}
        loading="lazy"
        decoding="async"
        className={cn(
          "size-full object-contain",
          "transition-[filter] duration-200",
          outline && "opacity-75 saturate-[0.65]",
        )}
        style={outline ? undefined : { filter: tint }}
      />
      <span
        className={cn(
          "pointer-events-none absolute inset-0 flex items-center justify-center",
          size === "xs" ? "translate-y-[0.18rem]" : "translate-y-[0.35rem]",
          ICON_TEXT[size],
          outline
            ? "text-muted-foreground"
            : cn(ICON_COLOR[colorKey], "opacity-100"),
        )}
      >
        <i className={cn("fa-solid", icon)} aria-hidden="true" />
      </span>
    </div>
  )
}