"use client";

import * as React from "react";
import { ReactSelect } from "@/components/ui/react-select";
import { cn } from "@/lib/utils";
import { useTeamsCatalog } from "@/hooks/use-teams-catalog";

const formTriggerClass =
  "h-10 min-h-10 flex-1 bg-gray-50 border-gray-200 rounded-xl text-[14px] font-medium";

const brandTriggerClass =
  "h-auto min-h-0 w-full border-0 bg-transparent shadow-none rounded-none px-0 py-0 text-[13px] font-bold tracking-wide leading-tight text-white focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-0 data-[placeholder]:text-white/90 [&_svg]:text-white/80 [&_svg]:size-3.5";

export const TEAM_SELECT_ALL_VALUE = "";

export interface TeamSelectProps {
  value: string;
  onValueChange: (value: string) => void;
  divisionId?: string;
  requireDivision?: boolean;
  label?: React.ReactNode;
  required?: boolean;
  placeholder?: string;
  allowEmpty?: boolean;
  emptyOptionLabel?: string;
  disabled?: boolean;
  skip?: boolean;
  triggerClassName?: string;
  contentClassName?: string;
  wrapperClassName?: string;
  variant?: "form" | "brand";
  size?: "sm" | "default";
  "aria-label"?: string;
}

export function TeamSelect({
  value,
  onValueChange,
  divisionId,
  requireDivision = false,
  label,
  required,
  placeholder = "Select team",
  allowEmpty = false,
  emptyOptionLabel = "All Teams",
  disabled = false,
  skip = false,
  triggerClassName,
  contentClassName,
  wrapperClassName,
  variant = "form",
  size = "default",
  "aria-label": ariaLabel = "Team",
}: TeamSelectProps) {
  const { items: teams, isLoading, isFetching } = useTeamsCatalog({ skip });
  const loading = isLoading || isFetching;

  const options = React.useMemo(() => {
    const filtered =
      divisionId != null && divisionId !== ""
        ? teams.filter((team) => team.divisionId === divisionId)
        : teams;
    return filtered.map((team) => ({ value: team.id, label: team.name }));
  }, [teams, divisionId]);

  const divisionRequiredButMissing = requireDivision && !divisionId;
  const isBrand = variant === "brand";

  const select = (
    <ReactSelect
      value={value}
      onValueChange={onValueChange}
      options={options}
      placeholder={loading ? "Loading…" : placeholder}
      allowEmpty={allowEmpty}
      emptyOptionLabel={emptyOptionLabel}
      disabled={disabled || loading || divisionRequiredButMissing}
      triggerClassName={cn(
        isBrand ? brandTriggerClass : formTriggerClass,
        !isBrand && divisionRequiredButMissing && "opacity-60",
        triggerClassName,
      )}
      contentClassName={cn(
        isBrand ? "min-w-[var(--radix-select-trigger-width)]" : "rounded-xl",
        contentClassName,
      )}
      wrapperClassName={wrapperClassName}
      size={isBrand ? "sm" : size}
      aria-label={ariaLabel}
    />
  );

  if (label == null) {
    return select;
  }

  return (
    <div className={cn("flex flex-col", isBrand ? "gap-0.5" : "gap-1.5")}>
      <label
        className={cn(
          "select-none font-['Lexend_Deca']",
          isBrand
            ? "sr-only"
            : "block text-[10px] font-bold text-gray-400 uppercase tracking-[0.09em] mb-0",
        )}
      >
        {label}
        {required && <span className="text-red-500 ml-0.5">*</span>}
      </label>
      {select}
    </div>
  );
}