import type { FocusOptions } from "@/lib/focus";

/** Ô chọn phạm vi báo cáo (khu vực / phòng ban-team / nhân viên). Không hiển thị nếu người xem không có gì để chọn. */
export function FocusSelect({ options, value }: { options: FocusOptions | null; value?: string }) {
  if (!options) return null;
  return (
    <div>
      <label htmlFor="pv" className="label-caps mb-1.5 block">
        Phạm vi xem
      </label>
      <select id="pv" name="pv" defaultValue={value ?? ""} className="input">
        <option value="">Toàn bộ phạm vi của tôi</option>
        {options.territories.length > 0 && (
          <optgroup label="Khu vực">
            {options.territories.map((t) => (
              <option key={t.id} value={`terr:${t.id}`}>
                {t.name}
              </option>
            ))}
          </optgroup>
        )}
        {options.departments.length > 0 && (
          <optgroup label="Phòng ban / Team">
            {options.departments.map((d) => (
              <option key={d.id} value={`dept:${d.id}`}>
                {d.name}
              </option>
            ))}
          </optgroup>
        )}
        {options.users.length > 0 && (
          <optgroup label="Nhân viên">
            {options.users.map((u) => (
              <option key={u.id} value={`user:${u.id}`}>
                {u.name}
              </option>
            ))}
          </optgroup>
        )}
      </select>
    </div>
  );
}