import React from 'react';
import Box from '@mui/material/Box';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function ProjectSelectorBar({
  projects,
  selectedProject,
  onSelectProject,
  inactiveProjects,
}) {
  const activeProjects = projects.filter(p => {
    const id = p.job_no || p.official_project_code || p.id;
    return !inactiveProjects.has(id);
  });

  return (
    <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
      <Autocomplete
        size="small"
        sx={{ flex: 1, maxWidth: 500 }}
        options={activeProjects}
        value={selectedProject}
        onChange={(_, v) => onSelectProject(v)}
        getOptionLabel={(opt) => {
          const name = opt.job_name || opt.project_name || '';
          const code = opt.job_no || opt.official_project_code || '';
          return name ? `${name} (${code})` : code;
        }}
        isOptionEqualToValue={(opt, val) =>
          (opt.job_no || opt.id) === (val.job_no || val.id)
        }
        renderInput={(params) => (
          <TextField {...params} placeholder="프로젝트 선택..." />
        )}
        noOptionsText="프로젝트 없음"
      />
    </Box>
  );
}