Tab = einrücken · ⇧Tab = ausrücken

onChange(ev.target.value)}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}
        maxLength={maxLength}
        rows={rows}
      />
    </div>
  );
}

export function ProjectModal({ isOpen, onClose, onSave, project, apiBase = '/expert-profile/me' }: ProjectModalProps) {
  const [fromMonth, setFromMonth] = useState(1);
  const [fromYear, setFromYear] = useState(currentYear);
  const [toMonth, setToMonth] = useState(1);
  const [toYear, setToYear] = useState(currentYear);
  const [isCurrent, setIsCurrent] = useState(false);
  const [role, setRole] = useState('');
  const [tasks, setTasks] = useState('');
  const [company, setCompany] = useState('');
  const [companySize, setCompanySize] = useState('');
  const [industry, setIndustry] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

useEffect(() => {
    if (isOpen) {
      if (project) {
        setFromMonth(project.fromMonth);
        setFromYear(project.fromYear);
        setToMonth(project.toMonth ?? 1);
        setToYear(project.toYear ?? currentYear);
        setIsCurrent(project.isCurrent);
        setRole(project.role);
        setTasks(project.tasks ?? '');
        setCompany(project.company ?? '');
        setCompanySize(project.companySize ?? '');
        setIndustry(project.industry ?? '');
      } else {
        setFromMonth(1);
        setFromYear(currentYear);
        setToMonth(1);
        setToYear(currentYear);
        setIsCurrent(false);
        setRole('');
        setTasks('');
        setCompany('');
        setCompanySize('');
        setIndustry('');
      }
      setError('');
    }
  }, [isOpen, project]);

const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');

const payload = {
      fromMonth,
      fromYear,
      ...(!isCurrent && { toMonth, toYear }),
      isCurrent,
      role: role.trim(),
      ...(tasks.trim() && { tasks: tasks.trim() }),
      ...(company.trim() && { company: company.trim() }),
      ...(companySize && { companySize }),
      ...(industry && { industry }),
    };

try {
      if (project) {
        await api.patch(`${apiBase}/projects/${project.id}`, payload);
      } else {
        await api.post(`${apiBase}/projects`, payload);
      }
      await onSave();
    } catch (err: unknown) {
      const apiErr = err as { response?: { data?: { message?: string } } };
      setError(apiErr.response?.data?.message ?? 'Fehler beim Speichern');
    } finally {
      setLoading(false);
    }
  };

return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={project ? 'Projekt bearbeiten' : 'Neues Projekt hinzufügen'}
      maxWidth="650px"
    >
      <form onSubmit={handleSubmit} className={styles.modalForm}>
        {error && <div className={styles.error}>{error}</div>}

{/* Zeitraum von */}
        <div className={styles.modalFieldRow}>
          <div className={styles.modalField}>
            <label>Zeitraum von *</label>
            <div style={{ display: 'flex', gap: '0.5rem' }}>
              <select value={fromMonth} onChange={(e) => setFromMonth(Number(e.target.value))} required>
                {MONTHS.map((m) => (
                  <option key={m.value} value={m.value}>{m.label}</option>
                ))}
              </select>
              <select value={fromYear} onChange={(e) => setFromYear(Number(e.target.value))} required>
                {YEARS.map((y) => (
                  <option key={y} value={y}>{y}</option>
                ))}
              </select>
            </div>
          </div>
          <div className={styles.modalField}>
            <label>Zeitraum bis *</label>
            <div style={{ display: 'flex', gap: '0.5rem' }}>
              <select
                value={toMonth}
                onChange={(e) => setToMonth(Number(e.target.value))}
                disabled={isCurrent}
              >
                {MONTHS.map((m) => (
                  <option key={m.value} value={m.value}>{m.label}</option>
                ))}
              </select>
              <select
                value={toYear}
                onChange={(e) => setToYear(Number(e.target.value))}
                disabled={isCurrent}
              >
                {YEARS.map((y) => (
                  <option key={y} value={y}>{y}</option>
                ))}
              </select>
            </div>
          </div>
        </div>

<div className={styles.checkboxRow}>
          <input
            type="checkbox"
            id="isCurrent"
            checked={isCurrent}
            onChange={(e) => setIsCurrent(e.target.checked)}
          />
          <label htmlFor="isCurrent">bis heute</label>
        </div>

<div className={styles.modalField}>
          <label>Tätigkeit *</label>
          <input
            type="text"
            value={role}
            onChange={(e) => setRole(e.target.value)}
            placeholder="z.B. Senior DevOps Engineer"
            maxLength={200}
            required
          />
        </div>

<div className={styles.modalField}>
          <label>Aufgaben</label>
          <BulletEditor
            value={tasks}
            onChange={setTasks}
            placeholder="Beschreiben Sie Ihre Aufgaben... (☰ Liste für Aufzählungspunkte)"
            maxLength={1500}
            rows={6}
          />
          <div className={`${styles.charCount} ${tasks.length > 1400 ? styles.charCountWarn : ''}`}>
            {tasks.length}/1.500
          </div>
        </div>

<div className={styles.modalField}>
          <label>Firma</label>
          <input
            type="text"
            value={company}
            onChange={(e) => setCompany(e.target.value)}
            placeholder="Firmenname"
            maxLength={200}
          />
        </div>

<div className={styles.modalFieldRow}>
          <div className={styles.modalField}>
            <label>Unternehmensgröße</label>
            <select value={companySize} onChange={(e) => setCompanySize(e.target.value)}>
              <option value="">Anzahl der Mitarbeitenden</option>
              {COMPANY_SIZES.map((s) => (
                <option key={s} value={s}>{s}</option>
              ))}
            </select>
          </div>
          <div className={styles.modalField}>
            <label>Branche</label>
            <select value={industry} onChange={(e) => setIndustry(e.target.value)}>
              <option value="">Bitte wählen</option>
              {INDUSTRIES.map((ind) => (
                <option key={ind} value={ind}>{ind}</option>
              ))}
            </select>
          </div>
        </div>

<div className={styles.btnRow}>
          <button type="button" className={styles.btnSecondary} onClick={onClose}>
            Abbrechen
          </button>
          <button type="submit" className={styles.btnPrimary} disabled={loading || !role.trim()}>
            {loading ? 'Speichern...' : project ? 'Projekt speichern' : 'Projekt hinzufügen'}
          </button>
        </div>
      </form>
    </Modal>
  );
}