"use client";

import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SelectOption {
  value: string;
  label: string;
}

export interface SelectProps {
  label: string;
  placeholder?: string;
  options: SelectOption[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  hint?: string;
  error?: string;
  required?: boolean;
  name?: string;
}

/** Accessible dropdown built on Radix Select — full keyboard nav and screen-reader semantics out of the box. */
export function Select({
  label,
  placeholder = "Select an option",
  options,
  value,
  defaultValue,
  onValueChange,
  hint,
  error,
  required,
  name,
}: SelectProps) {
  const id = React.useId();

  return (
    <div className="flex flex-col gap-1.5">
      <label htmlFor={id} className="text-label font-medium uppercase text-ink-soft">
        {label}
        {required && <span className="text-primary"> *</span>}
      </label>
      <SelectPrimitive.Root value={value} defaultValue={defaultValue} onValueChange={onValueChange} name={name}>
        <SelectPrimitive.Trigger
          id={id}
          aria-invalid={!!error}
          className={cn(
            "flex h-11 w-full items-center justify-between rounded-md border border-line bg-paper px-3.5 text-body-md text-ink",
            "transition-colors duration-150 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30",
            "data-[placeholder]:text-slate",
            error && "border-error focus:border-error focus:ring-error/30"
          )}
        >
          <SelectPrimitive.Value placeholder={placeholder} />
          <SelectPrimitive.Icon>
            <ChevronDown className="size-4 text-slate" aria-hidden="true" />
          </SelectPrimitive.Icon>
        </SelectPrimitive.Trigger>
        <SelectPrimitive.Portal>
          <SelectPrimitive.Content
            position="popper"
            sideOffset={6}
            className="z-50 max-h-72 overflow-hidden rounded border border-line bg-paper shadow-3"
          >
            <SelectPrimitive.Viewport className="p-1">
              {options.map((opt) => (
                <SelectPrimitive.Item
                  key={opt.value}
                  value={opt.value}
                  className={cn(
                    "relative flex h-10 cursor-pointer select-none items-center rounded-sm px-3 pr-8 text-body-sm text-ink outline-none",
                    "data-[highlighted]:bg-tag-bg data-[highlighted]:text-primary-strong"
                  )}
                >
                  <SelectPrimitive.ItemText>{opt.label}</SelectPrimitive.ItemText>
                  <SelectPrimitive.ItemIndicator className="absolute right-3 flex items-center">
                    <Check className="size-4 text-primary" aria-hidden="true" />
                  </SelectPrimitive.ItemIndicator>
                </SelectPrimitive.Item>
              ))}
            </SelectPrimitive.Viewport>
          </SelectPrimitive.Content>
        </SelectPrimitive.Portal>
      </SelectPrimitive.Root>
      {hint && !error && <p className="text-caption text-slate">{hint}</p>}
      {error && (
        <p className="text-caption text-error" role="alert">
          {error}
        </p>
      )}
    </div>
  );
}