import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { DEPARTMENT_OPTIONS } from '@/data/departmentOptions';
import { STAFF_ACADEMIC_TITLE_OPTIONS } from './academicTitleOptions';
import type { StaffProfileDto } from './types';

export type StaffFieldState = Pick<
  StaffProfileDto,
  | 'employeeId'
  | 'academicTitleCode'
  | 'academicTitleOther'
  | 'unitId'
  | 'unitNameFreetext'
  | 'jobTitle'
>;

type Props = {
  value: StaffFieldState;
  onChange: (next: StaffFieldState) => void;
  disabled?: boolean;
  idPrefix?: string;
};

function departmentSelectValue(unitNameFreetext: string | null | undefined): string {
  if (!unitNameFreetext?.trim()) return '__none__';
  const hit = DEPARTMENT_OPTIONS.find((o) => o.label === unitNameFreetext.trim());
  return hit?.value ?? '__none__';
}

export function StaffProfileFormFields({
  value,
  onChange,
  disabled,
  idPrefix = 'staff',
}: Props) {
  const p = (s: string) => `${idPrefix}-${s}`;
  const academicTitles = STAFF_ACADEMIC_TITLE_OPTIONS;
  const deptValue = departmentSelectValue(value.unitNameFreetext);

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor={p('emp')}>Mã số nhân sự</Label>
        <Input
          id={p('emp')}
          value={value.employeeId ?? ''}
          onChange={(e) => onChange({ ...value, employeeId: e.target.value || null })}
          disabled={disabled}
          autoComplete="off"
          placeholder="Ví dụ: CB-001234"
        />
      </div>

      <div className="space-y-2">
        <Label>Học hàm / học vị</Label>
        <Select
          disabled={disabled}
          value={value.academicTitleCode ?? '__none__'}
          onValueChange={(v) =>
            onChange({
              ...value,
              academicTitleCode: v === '__none__' ? null : v,
              academicTitleOther: v === 'other' ? value.academicTitleOther : null,
            })
          }
        >
          <SelectTrigger id={p('title')}>
            <SelectValue placeholder="Chọn" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="__none__">—</SelectItem>
            {academicTitles.map((t) => (
              <SelectItem key={t.code} value={t.code}>
                {t.labelVi}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {value.academicTitleCode === 'other' ? (
        <div className="space-y-2">
          <Label htmlFor={p('title-other')}>Khác (ghi rõ)</Label>
          <Input
            id={p('title-other')}
            value={value.academicTitleOther ?? ''}
            onChange={(e) => onChange({ ...value, academicTitleOther: e.target.value || null })}
            disabled={disabled}
          />
        </div>
      ) : null}

      <div className="space-y-2">
        <Label>Đơn vị (danh mục ĐHYD)</Label>
        <Select
          disabled={disabled}
          value={deptValue}
          onValueChange={(v) => {
            if (v === '__none__') {
              onChange({ ...value, unitId: null, unitNameFreetext: null });
              return;
            }
            const opt = DEPARTMENT_OPTIONS.find((o) => o.value === v);
            onChange({
              ...value,
              unitId: null,
              unitNameFreetext: opt ? opt.label : null,
            });
          }}
        >
          <SelectTrigger id={p('unit')}>
            <SelectValue placeholder="Chọn đơn vị" />
          </SelectTrigger>
          <SelectContent className="max-h-[min(24rem,70vh)]">
            <SelectItem value="__none__">— Không chọn —</SelectItem>
            {DEPARTMENT_OPTIONS.map((d) => (
              <SelectItem key={d.value} value={d.value}>
                {d.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <Label htmlFor={p('unit-ft')}>Tên đơn vị (tự nhập, nếu không có trong danh mục)</Label>
        <Input
          id={p('unit-ft')}
          value={value.unitNameFreetext ?? ''}
          onChange={(e) =>
            onChange({
              ...value,
              unitNameFreetext: e.target.value || null,
              unitId: e.target.value.trim() ? null : value.unitId,
            })
          }
          disabled={disabled}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor={p('job')}>Chức vụ công tác</Label>
        <Input
          id={p('job')}
          value={value.jobTitle ?? ''}
          onChange={(e) => onChange({ ...value, jobTitle: e.target.value || null })}
          disabled={disabled}
          maxLength={120}
        />
      </div>
    </div>
  );
}
