import React from 'react';
import { useAuth } from './useAuth';
import {
  GridComponent,
  ColumnsDirective,
  ColumnDirective,
  Page,
  Inject,
  Toolbar,
  Edit,
  CommandColumn,
} from '@syncfusion/ej2-react-grids';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import {
  listUsers,
  createUser,
  updateUser,
  resetUserPassword,
  deleteUser,
  type UserData,
} from './apiUsers';

const Benutzer: React.FC = () => {
  const { user: currentUser } = useAuth();
  const [users, setUsers] = React.useState<UserData[]>([]);
  const [loading, setLoading] = React.useState(true);
  
  // Dialog states
  const [showCreateDialog, setShowCreateDialog] = React.useState(false);
  const [showEditDialog, setShowEditDialog] = React.useState(false);
  const [showPasswordDialog, setShowPasswordDialog] = React.useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false);
  const [showDetailsDialog, setShowDetailsDialog] = React.useState(false);
  const [selectedUser, setSelectedUser] = React.useState<UserData | null>(null);
  
  // Form states
  const [formUsername, setFormUsername] = React.useState('');
  const [formPassword, setFormPassword] = React.useState('');
  const [formRole, setFormRole] = React.useState<'user' | 'editor' | 'admin' | 'superadmin'>('user');
  const [formIsActive, setFormIsActive] = React.useState(true);
  const [formBusy, setFormBusy] = React.useState(false);
  
  const toastRef = React.useRef<ToastComponent>(null);
  
  const isSuperadmin = currentUser?.role === 'superadmin';
  
  // Available roles based on current user's role
  const availableRoles = React.useMemo(() => {
    if (isSuperadmin) {
      return [
        { value: 'user', text: 'Benutzer (Viewer)' },
        { value: 'editor', text: 'Editor (Content Manager)' },
        { value: 'admin', text: 'Administrator' },
        { value: 'superadmin', text: 'Superadministrator' },
      ];
    }
    return [
      { value: 'user', text: 'Benutzer (Viewer)' },
      { value: 'editor', text: 'Editor (Content Manager)' },
      { value: 'admin', text: 'Administrator' },
    ];
  }, [isSuperadmin]);
  
  const showToast = (content: string, cssClass: string = 'e-toast-success') => {
    if (toastRef.current) {
      toastRef.current.show({
        content,
        cssClass,
        timeOut: 4000,
      });
    }
  };
  
  const loadUsers = React.useCallback(async () => {
    try {
      setLoading(true);
      const data = await listUsers();
      setUsers(data);
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Fehler beim Laden der Benutzer';
      showToast(message, 'e-toast-danger');
    } finally {
      setLoading(false);
    }
  }, []);
  
  React.useEffect(() => {
    loadUsers();
  }, [loadUsers]);
  
  // Create user
  const handleCreateClick = () => {
    setFormUsername('');
    setFormPassword('');
    setFormRole('user');
    setFormIsActive(true);
    setShowCreateDialog(true);
  };
  
  const handleCreateSubmit = async () => {
    if (!formUsername.trim()) {
      showToast('Benutzername ist erforderlich', 'e-toast-warning');
      return;
    }
    if (formUsername.trim().length < 3) {
      showToast('Benutzername muss mindestens 3 Zeichen lang sein', 'e-toast-warning');
      return;
    }
    if (!formPassword) {
      showToast('Passwort ist erforderlich', 'e-toast-warning');
      return;
    }
    if (formPassword.length < 6) {
      showToast('Passwort muss mindestens 6 Zeichen lang sein', 'e-toast-warning');
      return;
    }
    
    setFormBusy(true);
    try {
      await createUser({
        username: formUsername.trim(),
        password: formPassword,
        role: formRole,
        isActive: formIsActive,
      });
      showToast('Benutzer erfolgreich erstellt', 'e-toast-success');
      setShowCreateDialog(false);
      loadUsers();
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Fehler beim Erstellen des Benutzers';
      showToast(message, 'e-toast-danger');
    } finally {
      setFormBusy(false);
    }
  };
  
  // Edit user
  const handleEditClick = (userData: UserData) => {
    setSelectedUser(userData);
    setFormUsername(userData.username);
    setFormRole(userData.role);
    setFormIsActive(userData.isActive);
    setShowEditDialog(true);
  };
  
  const handleEditSubmit = async () => {
    if (!selectedUser) return;
    
    if (!formUsername.trim()) {
      showToast('Benutzername ist erforderlich', 'e-toast-warning');
      return;
    }
    if (formUsername.trim().length < 3) {
      showToast('Benutzername muss mindestens 3 Zeichen lang sein', 'e-toast-warning');
      return;
    }
    
    setFormBusy(true);
    try {
      await updateUser(selectedUser.id, {
        username: formUsername.trim(),
        role: formRole,
        isActive: formIsActive,
      });
      showToast('Benutzer erfolgreich aktualisiert', 'e-toast-success');
      setShowEditDialog(false);
      loadUsers();
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Fehler beim Aktualisieren des Benutzers';
      showToast(message, 'e-toast-danger');
    } finally {
      setFormBusy(false);
    }
  };
  
  // Reset password
  const handlePasswordClick = (userData: UserData) => {
    if (currentUser && userData.id === currentUser.id) {
      showToast('Bitte ändern Sie Ihr eigenes Passwort über das Benutzer-Menü (oben rechts).', 'e-toast-warning');
      return;
    }
    setSelectedUser(userData);
    setFormPassword('');
    setShowPasswordDialog(true);
  };
  
  const handlePasswordSubmit = async () => {
    if (!selectedUser) return;
    
    if (!formPassword) {
      showToast('Passwort ist erforderlich', 'e-toast-warning');
      return;
    }
    if (formPassword.length < 6) {
      showToast('Passwort muss mindestens 6 Zeichen lang sein', 'e-toast-warning');
      return;
    }
    
    setFormBusy(true);
    try {
      await resetUserPassword(selectedUser.id, formPassword);
      showToast('Passwort erfolgreich zurückgesetzt', 'e-toast-success');
      setShowPasswordDialog(false);
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Fehler beim Zurücksetzen des Passworts';
      showToast(message, 'e-toast-danger');
    } finally {
      setFormBusy(false);
    }
  };
  
  // Delete user
  const handleDeleteClick = (userData: UserData) => {
    setSelectedUser(userData);
    setShowDeleteDialog(true);
  };
  
  const handleDeleteConfirm = async () => {
    if (!selectedUser) return;
    
    setFormBusy(true);
    try {
      await deleteUser(selectedUser.id);
      showToast('Benutzer erfolgreich gelöscht', 'e-toast-success');
      setShowDeleteDialog(false);
      loadUsers();
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Fehler beim Löschen des Benutzers';
      showToast(message, 'e-toast-danger');
    } finally {
      setFormBusy(false);
    }
  };
  
  // View details
  const handleDetailsClick = (userData: UserData) => {
    setSelectedUser(userData);
    setShowDetailsDialog(true);
  };
  
  // Format date-time
  const getRoleBadge = (role: string) => {
    const roleMap: Record<string, { text: string; color: string }> = {
      user: { text: 'Benutzer', color: '#6c757d' },
      editor: { text: 'Editor', color: '#0d6efd' },
      admin: { text: 'Admin', color: '#198754' },
      superadmin: { text: 'Superadmin', color: '#dc3545' },
    };
    const info = roleMap[role] || { text: role, color: '#6c757d' };
    return (
      <span
        style={{
          padding: '4px 12px',
          borderRadius: '12px',
          backgroundColor: info.color,
          color: 'white',
          fontSize: '12px',
          fontWeight: 500,
          display: 'inline-block',
        }}
      >
        {info.text}
      </span>
    );
  };
  
  // Status badge
  const getStatusBadge = (isActive: boolean) => {
    return (
      <span
        style={{
          padding: '4px 12px',
          borderRadius: '12px',
          backgroundColor: isActive ? '#28a745' : '#dc3545',
          color: 'white',
          fontSize: '12px',
          fontWeight: 500,
          display: 'inline-block',
        }}
      >
        {isActive ? 'Aktiv' : 'Inaktiv'}
      </span>
    );
  };
  
  // Grid commands - no longer needed with custom template
  // const commands: CommandModel[] = [...]
  
  // Command click handler removed - using custom button template instead
  
  // Format dates
  const formatDate = (dateStr?: string) => {
    if (!dateStr) return '-';
    try {
      const date = new Date(dateStr);
      return date.toLocaleDateString('de-DE', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      });
    } catch {
      return '-';
    }
  };
  
  if (loading) {
    return (
      <div style={{ padding: 24 }}>
        <div style={{ textAlign: 'center', padding: 40 }}>Lade Benutzer...</div>
      </div>
    );
  }
  
  return (
    <div style={{ padding: 24 }}>
      <ToastComponent ref={toastRef} position={{ X: 'Right', Y: 'Top' }} />
      
      {/* Header */}
      <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <h2 style={{ margin: 0, fontSize: 24, fontWeight: 600 }}>Benutzerverwaltung</h2>
          <p style={{ margin: '8px 0 0 0', color: '#6c757d' }}>
            Verwalten Sie Benutzer und deren Rollen
          </p>
        </div>
        <ButtonComponent
          cssClass="e-success"
          iconCss="e-icons e-plus"
          onClick={handleCreateClick}
        >
          Neuer Benutzer
        </ButtonComponent>
      </div>
      
      {/* Statistics */}
      <div style={{ marginBottom: 24, display: 'flex', gap: 16 }}>
        <div className="e-card" style={{ flex: 1, padding: 16 }}>
          <div style={{ fontSize: 14, color: '#6c757d', marginBottom: 4 }}>Gesamt</div>
          <div style={{ fontSize: 28, fontWeight: 600 }}>{users.length}</div>
        </div>
        <div className="e-card" style={{ flex: 1, padding: 16 }}>
          <div style={{ fontSize: 14, color: '#6c757d', marginBottom: 4 }}>Aktiv</div>
          <div style={{ fontSize: 28, fontWeight: 600, color: '#28a745' }}>
            {users.filter(u => u.isActive).length}
          </div>
        </div>
        <div className="e-card" style={{ flex: 1, padding: 16 }}>
          <div style={{ fontSize: 14, color: '#6c757d', marginBottom: 4 }}>Inaktiv</div>
          <div style={{ fontSize: 28, fontWeight: 600, color: '#dc3545' }}>
            {users.filter(u => !u.isActive).length}
          </div>
        </div>
      </div>
      
      {/* Users Grid */}
      <GridComponent
        dataSource={users}
        allowPaging={true}
        allowSorting={true}
        pageSettings={{ pageSize: 20, pageSizes: [10, 20, 50, 100] }}
        height="600"
      >
        <ColumnsDirective>
          <ColumnDirective field="id" headerText="ID" width="80" textAlign="Center" allowSorting={true} />
          <ColumnDirective
            field="username"
            headerText="Benutzername"
            width="200"
            allowSorting={true}
          />
          <ColumnDirective
            field="role"
            headerText="Rolle"
            width="150"
            allowSorting={true}
            template={(props: UserData) => getRoleBadge(props.role)}
          />
          <ColumnDirective
            field="isActive"
            headerText="Status"
            width="120"
            template={(props: UserData) => getStatusBadge(props.isActive)}
          />
          <ColumnDirective
            field="createdAt"
            headerText="Erstellt"
            width="180"
            template={(props: UserData) => formatDate(props.createdAt)}
          />
          <ColumnDirective
            headerText="Aktionen"
            width="280"
            template={(props: UserData) => (
              <div style={{ display: 'flex', gap: 4 }}>
                <ButtonComponent
                  cssClass="e-flat"
                  onClick={() => handleDetailsClick(props)}
                >
                  Details
                </ButtonComponent>
                <ButtonComponent
                  cssClass="e-flat e-primary"
                  onClick={() => handleEditClick(props)}
                >
                  Bearbeiten
                </ButtonComponent>
                <ButtonComponent
                  cssClass="e-flat e-info"
                  onClick={() => handlePasswordClick(props)}
                >
                  Passwort
                </ButtonComponent>
                {isSuperadmin && currentUser?.id !== props.id && (
                  <ButtonComponent
                    cssClass="e-flat e-danger"
                    onClick={() => handleDeleteClick(props)}
                  >
                    Löschen
                  </ButtonComponent>
                )}
              </div>
            )}
          />
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, Edit, CommandColumn]} />
      </GridComponent>
      
      {/* Create User Dialog */}
      <DialogComponent
        isModal={true}
        visible={showCreateDialog}
        width="500px"
        header="Neuer Benutzer"
        showCloseIcon={true}
        close={() => setShowCreateDialog(false)}
        footerTemplate={() => (
          <div>
            <ButtonComponent
              cssClass="e-flat"
              onClick={() => setShowCreateDialog(false)}
              disabled={formBusy}
            >
              Abbrechen
            </ButtonComponent>
            <ButtonComponent
              cssClass="e-primary"
              onClick={handleCreateSubmit}
              disabled={formBusy}
            >
              {formBusy ? 'Erstelle...' : 'Erstellen'}
            </ButtonComponent>
          </div>
        )}
      >
        <div style={{ padding: 16 }}>
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
              Benutzername *
            </label>
            <TextBoxComponent
              placeholder="Benutzername eingeben"
              value={formUsername}
              input={(e: any) => setFormUsername(e.value)}
              disabled={formBusy}
            />
          </div>
          
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
              Passwort *
            </label>
            <TextBoxComponent
              type="password"
              placeholder="Mindestens 6 Zeichen"
              value={formPassword}
              input={(e: any) => setFormPassword(e.value)}
              disabled={formBusy}
            />
          </div>
          
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
              Rolle *
            </label>
            <DropDownListComponent
              dataSource={availableRoles}
              fields={{ value: 'value', text: 'text' }}
              value={formRole}
              change={(e: any) => setFormRole(e.value)}
              disabled={formBusy}
            />
          </div>
          
          <div style={{ marginBottom: 8 }}>
            <CheckBoxComponent
              label="Benutzer ist aktiv"
              checked={formIsActive}
              change={(e: any) => setFormIsActive(e.checked)}
              disabled={formBusy}
            />
          </div>
        </div>
      </DialogComponent>
      
      {/* Edit User Dialog */}
      <DialogComponent
        isModal={true}
        visible={showEditDialog}
        width="500px"
        header={`Benutzer bearbeiten: ${selectedUser?.username}`}
        showCloseIcon={true}
        close={() => setShowEditDialog(false)}
        footerTemplate={() => (
          <div>
            <ButtonComponent
              cssClass="e-flat"
              onClick={() => setShowEditDialog(false)}
              disabled={formBusy}
            >
              Abbrechen
            </ButtonComponent>
            <ButtonComponent
              cssClass="e-primary"
              onClick={handleEditSubmit}
              disabled={formBusy}
            >
              {formBusy ? 'Speichere...' : 'Speichern'}
            </ButtonComponent>
          </div>
        )}
      >
        <div style={{ padding: 16 }}>
          {selectedUser?.id === currentUser?.id && (
            <div
              style={{
                padding: 12,
                backgroundColor: '#fff3cd',
                border: '1px solid #ffc107',
                borderRadius: 4,
                marginBottom: 16,
                fontSize: 14,
              }}
            >
              ⚠️ Sie bearbeiten Ihr eigenes Konto. Sie können Ihre eigene Rolle oder Ihren aktiven Status nicht ändern.
            </div>
          )}
          
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
              Benutzername *
            </label>
            <TextBoxComponent
              placeholder="Benutzername eingeben"
              value={formUsername}
              input={(e: any) => setFormUsername(e.value)}
              disabled={formBusy}
            />
          </div>
          
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
              Rolle *
            </label>
            <DropDownListComponent
              dataSource={availableRoles}
              fields={{ value: 'value', text: 'text' }}
              value={formRole}
              change={(e: any) => setFormRole(e.value)}
              disabled={formBusy || selectedUser?.id === currentUser?.id}
            />
            {selectedUser?.id === currentUser?.id && (
              <div style={{ fontSize: 12, color: '#6c757d', marginTop: 4 }}>
                Sie können Ihre eigene Rolle nicht ändern
              </div>
            )}
          </div>
          
          <div style={{ marginBottom: 8 }}>
            <CheckBoxComponent
              label="Benutzer ist aktiv"
              checked={formIsActive}
              change={(e: any) => setFormIsActive(e.checked)}
              disabled={formBusy || selectedUser?.id === currentUser?.id}
            />
            {selectedUser?.id === currentUser?.id && (
              <div style={{ fontSize: 12, color: '#6c757d', marginTop: 4 }}>
                Sie können Ihr eigenes Konto nicht deaktivieren
              </div>
            )}
          </div>
        </div>
      </DialogComponent>
      
      {/* Reset Password Dialog */}
      <DialogComponent
        isModal={true}
        visible={showPasswordDialog}
        width="500px"
        header={`Passwort zurücksetzen: ${selectedUser?.username}`}
        showCloseIcon={true}
        close={() => setShowPasswordDialog(false)}
        footerTemplate={() => (
          <div>
            <ButtonComponent
              cssClass="e-flat"
              onClick={() => setShowPasswordDialog(false)}
              disabled={formBusy}
            >
              Abbrechen
            </ButtonComponent>
            <ButtonComponent
              cssClass="e-warning"
              onClick={handlePasswordSubmit}
              disabled={formBusy}
            >
              {formBusy ? 'Setze zurück...' : 'Zurücksetzen'}
            </ButtonComponent>
          </div>
        )}
      >
        <div style={{ padding: 16 }}>
          <div style={{ marginBottom: 16 }}>
            <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
              Neues Passwort *
            </label>
            <TextBoxComponent
              type="password"
              placeholder="Mindestens 6 Zeichen"
              value={formPassword}
              input={(e: any) => setFormPassword(e.value)}
              disabled={formBusy}
            />
          </div>
          
          <div
            style={{
              padding: 12,
              backgroundColor: '#d1ecf1',
              border: '1px solid #bee5eb',
              borderRadius: 4,
              fontSize: 14,
            }}
          >
            💡 Das neue Passwort wird sofort wirksam. Informieren Sie den Benutzer über das neue Passwort.
          </div>
        </div>
      </DialogComponent>
      
      {/* Delete User Dialog */}
      <DialogComponent
        isModal={true}
        visible={showDeleteDialog}
        width="500px"
        header="Benutzer löschen"
        showCloseIcon={true}
        close={() => setShowDeleteDialog(false)}
        footerTemplate={() => (
          <div>
            <ButtonComponent
              cssClass="e-flat"
              onClick={() => setShowDeleteDialog(false)}
              disabled={formBusy}
            >
              Abbrechen
            </ButtonComponent>
            <ButtonComponent
              cssClass="e-danger"
              onClick={handleDeleteConfirm}
              disabled={formBusy}
            >
              {formBusy ? 'Lösche...' : 'Endgültig löschen'}
            </ButtonComponent>
          </div>
        )}
      >
        <div style={{ padding: 16 }}>
          <div
            style={{
              padding: 16,
              backgroundColor: '#f8d7da',
              border: '1px solid #f5c6cb',
              borderRadius: 4,
              marginBottom: 16,
            }}
          >
            <strong>⚠️ Warnung: Diese Aktion kann nicht rückgängig gemacht werden!</strong>
          </div>
          
          <p style={{ marginBottom: 16 }}>
            Möchten Sie den Benutzer <strong>{selectedUser?.username}</strong> wirklich endgültig löschen?
          </p>
          
          <p style={{ margin: 0, fontSize: 14, color: '#6c757d' }}>
            Tipp: Statt zu löschen, können Sie den Benutzer auch deaktivieren, um das Konto zu sperren und
            gleichzeitig die Daten zu bewahren.
          </p>
        </div>
      </DialogComponent>
      
      {/* Details Dialog */}
      <DialogComponent
        isModal={true}
        visible={showDetailsDialog}
        width="600px"
        header={`Details: ${selectedUser?.username}`}
        showCloseIcon={true}
        close={() => setShowDetailsDialog(false)}
        footerTemplate={() => (
          <div>
            <ButtonComponent cssClass="e-flat" onClick={() => setShowDetailsDialog(false)}>
              Schließen
            </ButtonComponent>
          </div>
        )}
      >
        <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Account Info */}
          <div>
            <h4 style={{ margin: '0 0 12px 0', fontSize: 14, fontWeight: 600, color: '#6c757d' }}>
              Kontoinformation
            </h4>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div>
                <div style={{ fontSize: 12, color: '#6c757d', marginBottom: 4 }}>Benutzer-ID</div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{selectedUser?.id}</div>
              </div>
              <div>
                <div style={{ fontSize: 12, color: '#6c757d', marginBottom: 4 }}>Benutzername</div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{selectedUser?.username}</div>
              </div>
              <div>
                <div style={{ fontSize: 12, color: '#6c757d', marginBottom: 4 }}>Rolle</div>
                <div>{selectedUser ? getRoleBadge(selectedUser.role) : '-'}</div>
              </div>
              <div>
                <div style={{ fontSize: 12, color: '#6c757d', marginBottom: 4 }}>Status</div>
                <div>{selectedUser ? getStatusBadge(selectedUser.isActive) : '-'}</div>
              </div>
            </div>
          </div>
          
          {/* Security & Activity */}
          <div>
            <h4 style={{ margin: '0 0 12px 0', fontSize: 14, fontWeight: 600, color: '#6c757d' }}>
              Sicherheit & Aktivität
            </h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Letzter Login:</div>
                <div style={{ fontSize: 13, color: '#666' }}>
                  {selectedUser?.lastLoginAt ? formatDate(selectedUser.lastLoginAt) : 'Nie'}
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Passwort geändert:</div>
                <div style={{ fontSize: 13, color: '#666' }}>
                  {selectedUser?.lastPasswordChangeAt ? formatDate(selectedUser.lastPasswordChangeAt) : 'Nie'}
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Fehlgeschlagene Logins:</div>
                <div style={{ fontSize: 13, color: '#666' }}>
                  {selectedUser?.failedLoginAttempts || 0}
                </div>
              </div>
              {selectedUser?.lastFailedLoginAt && (
                <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Letzter Fehler:</div>
                  <div style={{ fontSize: 13, color: '#666' }}>
                    {formatDate(selectedUser.lastFailedLoginAt)}
                  </div>
                </div>
              )}
            </div>
          </div>
          
          {/* Deactivation Info (if applicable) */}
          {selectedUser && !selectedUser.isActive && selectedUser.deactivatedAt && (
            <div style={{ padding: 12, backgroundColor: '#fff3cd', border: '1px solid #ffc107', borderRadius: 4 }}>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>Konto deaktiviert</div>
              <div style={{ fontSize: 12, color: '#856404' }}>
                am {formatDate(selectedUser.deactivatedAt)}
              </div>
            </div>
          )}
          
          {/* Timestamps */}
          <div>
            <h4 style={{ margin: '0 0 12px 0', fontSize: 14, fontWeight: 600, color: '#6c757d' }}>
              Zeitleisten
            </h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Erstellt:</div>
                <div style={{ fontSize: 13, color: '#666' }}>
                  {selectedUser?.createdAt ? formatDate(selectedUser.createdAt) : '-'}
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: '#333' }}>Zuletzt geändert:</div>
                <div style={{ fontSize: 13, color: '#666' }}>
                  {selectedUser?.updatedAt ? formatDate(selectedUser.updatedAt) : '-'}
                </div>
              </div>
            </div>
          </div>
        </div>
      </DialogComponent>
    </div>
  );
};

export default Benutzer;
