import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@repo/ui/components/select';
import { Plus } from 'lucide-react';

interface Project {
  id?: string;
  containerTag: string;
  name: string;
}

interface ProjectSelectionProps {
  projects: Project[];
  selectedProject: string;
  onProjectChange: (value: string) => void;
  onCreateProject: () => void;
  disabled?: boolean;
  isLoading?: boolean;
  className?: string;
  id?: string;
}

export function ProjectSelection({
  projects,
  selectedProject,
  onProjectChange,
  onCreateProject,
  disabled = false,
  isLoading = false,
  className = '',
  id = 'project-select',
}: ProjectSelectionProps) {
  const handleValueChange = (value: string) => {
    if (value === 'create-new-project') {
      onCreateProject();
    } else {
      onProjectChange(value);
    }
  };

  return (
    <Select
      key={`${id}-${selectedProject}`}
      disabled={isLoading || disabled}
      onValueChange={handleValueChange}
      value={selectedProject}
    >
      <SelectTrigger
        className={`bg-foreground/5 border-foreground/10 cursor-pointer ${className}`}
        id={id}
      >
        <SelectValue placeholder="Select a project" />
      </SelectTrigger>
      <SelectContent position="popper" sideOffset={5} className="z-[90]">
        <SelectItem
          className="hover:bg-foreground/10"
          key="default"
          value="sm_project_default"
        >
          Default Project
        </SelectItem>
        {projects
          .filter((p) => p.containerTag !== 'sm_project_default' && p.id)
          .map((project) => (
            <SelectItem
              className="hover:bg-foreground/10"
              key={project.id || project.containerTag}
              value={project.containerTag}
            >
              {project.name}
            </SelectItem>
          ))}
        <SelectItem
          className="hover:bg-foreground/10 border-t border-foreground/10 mt-1"
          key="create-new"
          value="create-new-project"
        >
          <div className="flex items-center gap-2">
            <Plus className="h-4 w-4" />
            <span>Create new project</span>
          </div>
        </SelectItem>
      </SelectContent>
    </Select>
  );
}