interface SkillRow {
  skill: string;
  proficiency: 1 | 2 | 3 | 4 | 5;
  yearsExperience: string;
  category: string;
  certified: boolean;
  isMainSkill: boolean;
}

const proficiencyLabels: Record<number, string> = {
  1: "1 \u2013 Beginner",
  2: "2 \u2013 Elementary",
  3: "3 \u2013 Intermediate",
  4: "4 \u2013 Advanced",
  5: "5 \u2013 Expert",
};

interface ResourceSkillsEditorProps {
  skills: SkillRow[];
  onSetSkillField: (index: number, key: keyof SkillRow, value: string | number | boolean) => void;
  onAddSkill: () => void;
  onRemoveSkill: (index: number) => void;
  inputClass: string;
  labelClass: string;
}

export function ResourceSkillsEditor({
  skills,
  onSetSkillField,
  onAddSkill,
  onRemoveSkill,
  inputClass,
  labelClass,
}: ResourceSkillsEditorProps) {
  return (
    <div className="space-y-3">
      {skills.map((skillRow, idx) => {
        const mainSkillCount = skills.filter((s) => s.isMainSkill).length;
        const canToggleMain = skillRow.isMainSkill || mainSkillCount < 2;
        return (
          <div
            key={idx}
            className={`grid gap-2 items-end border rounded-lg p-3 ${skillRow.isMainSkill ? "border-amber-200 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20" : "border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900"}`}
          >
            <div className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-2 items-end">
              <div>
                <label className={labelClass} htmlFor={`rm-skill-name-${idx}`}>
                  Skill
                </label>
                <input
                  id={`rm-skill-name-${idx}`}
                  type="text"
                  className={inputClass}
                  placeholder="e.g. 3ds Max"
                  value={skillRow.skill}
                  onChange={(e) => onSetSkillField(idx, "skill", e.target.value)}
                />
              </div>
              <div>
                <label className={labelClass} htmlFor={`rm-skill-prof-${idx}`}>
                  Proficiency
                </label>
                <select
                  id={`rm-skill-prof-${idx}`}
                  className={inputClass}
                  value={skillRow.proficiency}
                  onChange={(e) =>
                    onSetSkillField(
                      idx,
                      "proficiency",
                      parseInt(e.target.value, 10) as 1 | 2 | 3 | 4 | 5,
                    )
                  }
                >
                  {[1, 2, 3, 4, 5].map((p) => (
                    <option key={p} value={p}>
                      {proficiencyLabels[p]}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className={labelClass} htmlFor={`rm-skill-years-${idx}`}>
                  Years
                </label>
                <input
                  id={`rm-skill-years-${idx}`}
                  type="number"
                  min="0"
                  max="50"
                  step="1"
                  className={inputClass}
                  placeholder="\u2014"
                  value={skillRow.yearsExperience}
                  onChange={(e) => onSetSkillField(idx, "yearsExperience", e.target.value)}
                />
              </div>
              <div className="flex flex-col items-center gap-1 pb-0.5">
                <span className="text-[10px] text-gray-500 dark:text-gray-400 leading-none">
                  \u2605 Main
                </span>
                <input
                  type="checkbox"
                  checked={skillRow.isMainSkill}
                  disabled={!canToggleMain}
                  title={!canToggleMain ? "Max 2 main skills" : "Mark as main skill"}
                  onChange={(e) => onSetSkillField(idx, "isMainSkill", e.target.checked)}
                  className="rounded border-gray-300 disabled:opacity-40"
                />
              </div>
              <div className="flex items-end pb-0.5">
                <button
                  type="button"
                  onClick={() => onRemoveSkill(idx)}
                  className="px-2 py-2 text-red-400 hover:text-red-600 transition-colors"
                  aria-label={`Remove skill ${idx + 1}`}
                >
                  <svg
                    className="w-4 h-4"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={2}
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        );
      })}

      <button
        type="button"
        onClick={onAddSkill}
        className="flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-800 font-medium transition-colors"
      >
        <svg
          className="w-4 h-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
        </svg>
        Add skill
      </button>
    </div>
  );
}
