import React, { createContext, useContext, useState, useRef, useEffect } from 'react';

const SelectContext = createContext<any>(null);

export const SelectRoot = ({ children, onValueChange, value, defaultValue }: any) => {
  const [open, setOpen] = useState(false);
  const [internalVal, setInternalVal] = useState(defaultValue);
  const currentVal = value !== undefined ? value : internalVal;
  
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleValueChange = (v: string) => {
    if (value === undefined) setInternalVal(v);
    onValueChange?.(v);
    setOpen(false);
  };

  return (
    <SelectContext.Provider value={{ open, setOpen, value: currentVal, onValueChange: handleValueChange }}>
      <div ref={ref} className="relative w-full">{children}</div>
    </SelectContext.Provider>
  );
};
SelectRoot.displayName = "Select";

export const SelectTrigger = React.forwardRef<any, any>(({ className = '', children, onClick, ...props }, ref) => {
  const { open, setOpen } = useContext(SelectContext);
  return (
    <button ref={ref} type="button" onClick={(e) => { setOpen(!open); onClick?.(e); }} className={`flex h-10 w-full items-center justify-between rounded-md border border-border bg-surface px-3 py-2 text-sm ring-offset-background placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`} {...props}>
      {children}
    </button>
  );
});
SelectTrigger.displayName = "SelectTrigger";

export const SelectValue = React.forwardRef<any, any>(({ placeholder, ...props }, ref) => {
  const { value } = useContext(SelectContext);
  return <span ref={ref} {...props}>{value || placeholder}</span>;
});
SelectValue.displayName = "SelectValue";

export const SelectContent = React.forwardRef<any, any>(({ className = '', children, ...props }, ref) => {
  const { open } = useContext(SelectContext);
  if (!open) return null;
  return (
    <div ref={ref} className={`absolute z-50 top-full mt-1 max-h-96 w-full min-w-[8rem] overflow-auto rounded-md border border-border bg-surface text-text shadow-md animate-in fade-in-0 zoom-in-95 ${className}`} {...props}>
      <div className="p-1">{children}</div>
    </div>
  );
});
SelectContent.displayName = "SelectContent";

export const SelectItem = React.forwardRef<any, any>(({ className = '', value, children, ...props }, ref) => {
  const { onValueChange, value: selectedValue } = useContext(SelectContext);
  const isSelected = selectedValue === value;
  return (
    <div ref={ref} onClick={() => onValueChange(value)} className={`relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-surface-hover hover:text-text focus:bg-surface-hover focus:text-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ${isSelected ? 'bg-surface-hover' : ''} ${className}`} {...props}>
      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
        {isSelected && "✓"}
      </span>
      <span>{children}</span>
    </div>
  );
});
SelectItem.displayName = "SelectItem";

export const SelectGroup = ({ children }: any) => <>{children}</>;
export const SelectLabel = ({ className = '', ...props }: any) => <div className={`py-1.5 pl-8 pr-2 text-sm font-semibold ${className}`} {...props} />;
export const SelectSeparator = ({ className = '', ...props }: any) => <div className={`-mx-1 my-1 h-px bg-border ${className}`} {...props} />;
export const SelectScrollUpButton = () => null;
export const SelectScrollDownButton = () => null;