INSIGHT-MVP/packages/frontend/src/admin/UserFormModal.tsx

import { useState, useEffect, type FormEvent } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Modal } from '../components/Modal';
import api from '../api/client';

interface User {
  id: string;
  email: string;
  firstName: string;
  lastName: string;
  role: string;
  isActive: boolean;
  lastLogin: string | null;
  createdAt: string;
}

interface UserFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  user?: User | null;
  onSuccess: () => void;
}

const ROLE_OPTIONS = [
  { value: 'USER', label: 'Benutzer' },
  { value: 'TENANT_ADMIN', label: 'Mandanten-Admin' },
  { value: 'PLATFORM_ADMIN', label: 'Plattform-Admin' },
];

const ROLE_LABELS: Record<string, string> = {
  USER: 'Benutzer',
  TENANT_ADMIN: 'Mandanten-Admin',
  PLATFORM_ADMIN: 'Plattform-Admin',
};

const inputStyle: React.CSSProperties = {
  width: '100%',
  padding: '0.625rem 0.75rem',
  border: '1px solid var(--color-border)',
  borderRadius: 'var(--radius-sm)',
  fontSize: '0.9375rem',
  outline: 'none',
  boxSizing: 'border-box',
};

const inputDisabledStyle: React.CSSProperties = {
  ...inputStyle,
  background: '#f3f4f6',
  color: 'var(--color-text-muted)',
  cursor: 'not-allowed',
};

const labelStyle: React.CSSProperties = {
  display: 'block',
  fontSize: '0.875rem',
  fontWeight: 500,
  color: 'var(--color-text)',
  marginBottom: '0.25rem',
};

export function UserFormModal({ isOpen, onClose, user, onSuccess }: UserFormModalProps) {
  const isEditMode = !!user;
  const queryClient = useQueryClient();

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [role, setRole] = useState('USER');
  const [isActive, setIsActive] = useState(true);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  useEffect(() => {
    if (isOpen) {
      setError('');
      setSuccess('');
      if (user) {
        setEmail(user.email);
        setFirstName(user.firstName);
        setLastName(user.lastName);
        setRole(user.role);
        setIsActive(user.isActive);
        setPassword('');
      } else {
        setEmail('');
        setPassword('');
        setFirstName('');
        setLastName('');
        setRole('USER');
        setIsActive(true);
      }
    }
  }, [isOpen, user]);

  const createMutation = useMutation({
    mutationFn: (data: { email: string; password: string; firstName: string; lastName: string; role: string }) =>
      api.post('/users', data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
      setSuccess('Benutzer wurde erfolgreich angelegt.');
      setTimeout(() => onSuccess(), 1000);
    },
    onError: (err: unknown) => {
      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
      setError(message ?? 'Fehler beim Anlegen des Benutzers.');
    },
  });

  const updateMutation = useMutation({
    mutationFn: (data: { firstName: string; lastName: string; isActive: boolean }) =>
      api.patch(`/users/${user!.id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
      setSuccess('Änderungen wurden gespeichert.');
      setTimeout(() => onSuccess(), 1000);
    },
    onError: (err: unknown) => {
      const message = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
      setError(message ?? 'Fehler beim Speichern der Änderungen.');
    },
  });

  const isLoading = createMutation.isPending || updateMutation.isPending;

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    setError('');
    setSuccess('');

    if (!firstName.trim() || !lastName.trim()) {
      setError('Vor- und Nachname sind Pflichtfelder.');
      return;
    }

    if (isEditMode) {
      updateMutation.mutate({ firstName: firstName.trim(), lastName: lastName.trim(), isActive });
    } else {
      if (!email.trim()) {
        setError('E-Mail-Adresse ist ein Pflichtfeld.');
        return;
      }
      if (password.length < 8) {
        setError('Passwort muss mindestens 8 Zeichen lang sein.');
        return;
      }
      createMutation.mutate({
        email: email.trim(),
        password,
        firstName: firstName.trim(),
        lastName: lastName.trim(),
        role,
      });
    }
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={isEditMode ? 'Benutzer bearbeiten' : 'Neuen Benutzer anlegen'}
      maxWidth="480px"
    >
      <form onSubmit={handleSubmit}>
        {error && (
          <div style={{
            padding: '0.625rem 0.75rem',
            marginBottom: '1rem',
            background: '#fef2f2',
            color: 'var(--color-error)',
            border: '1px solid #fecaca',
            borderRadius: 'var(--radius-sm)',
            fontSize: '0.875rem',
          }}>
            {error}
          </div>
        )}

        {success && (
          <div style={{
            padding: '0.625rem 0.75rem',
            marginBottom: '1rem',
            background: '#f0fdf4',
            color: 'var(--color-success)',
            border: '1px solid #bbf7d0',
            borderRadius: 'var(--radius-sm)',
            fontSize: '0.875rem',
          }}>
            {success}
          </div>
        )}

        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.875rem' }}>
          {/* E-Mail */}
          <div>
            <label style={labelStyle}>E-Mail *</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={isEditMode}
              style={isEditMode ? inputDisabledStyle : inputStyle}
              placeholder="max.mustermann@beispiel.de"
              required={!isEditMode}
            />
          </div>

          {/* Passwort (nur Anlegen) */}
          {!isEditMode && (
            <div>
              <label style={labelStyle}>Passwort *</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                style={inputStyle}
                placeholder="Mindestens 8 Zeichen"
                minLength={8}
                maxLength={128}
                required
              />
            </div>
          )}

          {/* Vorname + Nachname nebeneinander */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0.75rem' }}>
            <div>
              <label style={labelStyle}>Vorname *</label>
              <input
                type="text"
                value={firstName}
                onChange={(e) => setFirstName(e.target.value)}
                style={inputStyle}
                placeholder="Vorname"
                maxLength={100}
                required
              />
            </div>
            <div>
              <label style={labelStyle}>Nachname *</label>
              <input
                type="text"
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                style={inputStyle}
                placeholder="Nachname"
                maxLength={100}
                required
              />
            </div>
          </div>

          {/* Rolle */}
          <div>
            <label style={labelStyle}>Rolle</label>
            {isEditMode ? (
              <input
                type="text"
                value={ROLE_LABELS[role] ?? role}
                disabled
                style={inputDisabledStyle}
              />
            ) : (
              <select
                value={role}
                onChange={(e) => setRole(e.target.value)}
                style={inputStyle}
              >
                {ROLE_OPTIONS.map((opt) => (
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                ))}
              </select>
            )}
          </div>

          {/* Aktiv-Status (nur Bearbeiten) */}
          {isEditMode && (
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
              <input
                type="checkbox"
                id="isActive"
                checked={isActive}
                onChange={(e) => setIsActive(e.target.checked)}
                style={{ width: 16, height: 16, cursor: 'pointer' }}
              />
              <label htmlFor="isActive" style={{ fontSize: '0.875rem', cursor: 'pointer', color: 'var(--color-text)' }}>
                Benutzer ist aktiv
              </label>
            </div>
          )}
        </div>

        {/* Buttons */}
        <div style={{
          display: 'flex',
          justifyContent: 'flex-end',
          gap: '0.75rem',
          marginTop: '1.5rem',
          paddingTop: '1rem',
          borderTop: '1px solid var(--color-border)',
        }}>
          <button
            type="button"
            onClick={onClose}
            disabled={isLoading}
            style={{
              padding: '0.5rem 1rem',
              background: 'transparent',
              border: '1px solid var(--color-border)',
              borderRadius: 'var(--radius-sm)',
              fontSize: '0.875rem',
              cursor: 'pointer',
              color: 'var(--color-text-secondary)',
            }}
          >
            Abbrechen
          </button>
          <button
            type="submit"
            disabled={isLoading}
            style={{
              padding: '0.5rem 1rem',
              background: 'var(--color-primary)',
              color: 'white',
              border: 'none',
              borderRadius: 'var(--radius-sm)',
              fontSize: '0.875rem',
              fontWeight: 600,
              cursor: isLoading ? 'wait' : 'pointer',
              opacity: isLoading ? 0.7 : 1,
            }}
          >
            {isLoading ? 'Speichern...' : isEditMode ? 'Speichern' : 'Anlegen'}
          </button>
        </div>
      </form>
    </Modal>
  );
}