"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export interface FloatingSelectOption {
  value: string;
  label: React.ReactNode;
  disabled?: boolean;
}

export interface FloatingSelectProps {
  id: string;
  label: string;
  value?: string;
  onValueChange?: (value: string) => void;
  options?: FloatingSelectOption[];
  children?: React.ReactNode;
  placeholder?: string;
  disabled?: boolean;
  error?: string;
  helper?: React.ReactNode;
  className?: string;
}

/**
 * Universal Floating Label Select component matching the exact visual height (h-14),
 * border-radius (rounded-xl), typography, and floating-label behavior of FloatingInput.
 *
 * Guarantees distinct vertical zones:
 * - Label zone: y = 0px to 20px (top-2, text-[11px])
 * - Selected value zone: y = 22px to 52px (flex-col justify-end pt-5 pb-2)
 * Eliminates all overlap for long labels (e.g. "Robots Indexing Directive", "Article Lifecycle Status").
 */
export function FloatingSelect({
  id,
  label,
  value,
  onValueChange,
  options,
  children,
  placeholder = " ",
  disabled,
  error,
  helper,
  className,
}: FloatingSelectProps) {
  const [open, setOpen] = React.useState(false);
  const hasValue = Boolean(value !== undefined && value !== null && value !== "");

  return (
    <div className="w-full">
      <div className="relative">
        <Select
          value={value}
          onValueChange={onValueChange}
          open={open}
          onOpenChange={setOpen}
          disabled={disabled}
        >
          <SelectTrigger
            id={id}
            aria-invalid={error ? true : undefined}
            className={cn(
              "!h-14 w-full rounded-xl border border-neutral-200 bg-white px-3.5 pr-9 pb-2 pt-5 text-sm text-neutral-900 shadow-2xs transition-[border-color,box-shadow,background-color] duration-200 hover:border-neutral-400 focus:border-neutral-900 focus:ring-1 focus:ring-neutral-900/70 disabled:cursor-not-allowed disabled:opacity-55 flex flex-col justify-end items-start text-left relative dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:border-neutral-600 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/70 *:data-[slot=select-value]:truncate *:data-[slot=select-value]:max-w-[calc(100%-1.5rem)] *:data-[slot=select-value]:text-left *:data-[slot=select-value]:block *:data-[slot=select-value]:w-full [&>svg]:absolute [&>svg]:right-3.5 [&>svg]:top-1/2 [&>svg]:-translate-y-1/2",
              error
                ? "border-destructive focus:border-destructive focus:ring-destructive/60 dark:border-destructive"
                : "",
              className
            )}
          >
            <SelectValue placeholder={placeholder} />
          </SelectTrigger>
          <SelectContent position="popper" className="w-[var(--radix-select-trigger-width)] max-h-72">
            {options
              ? options.map((opt) => (
                  <SelectItem
                    key={opt.value}
                    value={opt.value}
                    disabled={opt.disabled}
                    className="text-xs"
                  >
                    {opt.label}
                  </SelectItem>
                ))
              : children}
          </SelectContent>
        </Select>

        <label
          htmlFor={id}
          className={cn(
            "pointer-events-none absolute left-3.5 z-[1] origin-left text-neutral-500 transition-all duration-200 ease-out select-none truncate max-w-[calc(100%-36px)] dark:text-neutral-400",
            hasValue || open
              ? "top-2 text-[11px] font-medium text-neutral-700 dark:text-neutral-200"
              : "top-1/2 -translate-y-1/2 text-sm font-normal text-neutral-500 dark:text-neutral-400",
            error ? "text-destructive dark:text-destructive" : ""
          )}
        >
          {label}
        </label>
      </div>

      {error && (
        <p role="alert" className="mt-1.5 text-xs font-medium text-destructive">
          {error}
        </p>
      )}
      {helper && !error && (
        <p className="mt-1.5 text-xs text-neutral-500 dark:text-neutral-400">{helper}</p>
      )}
    </div>
  );
}