import { Modal, Badge, MonoText, Spinner, SectionHeader } from '@cameleer/design-system';
import { useMe } from '../api/queries/auth';
import styles from './AboutMeDialog.module.css';

interface AboutMeDialogProps {
  open: boolean;
  onClose: () => void;
}

export function AboutMeDialog({ open, onClose }: AboutMeDialogProps) {
  const { data: user, isLoading } = useMe(open);

  return (
    <Modal open={open} onClose={onClose} title="About Me" size="sm">
      {isLoading || !user ? (
        <div className={styles.loading}><Spinner size="md" /></div>
      ) : (
        <div className={styles.content}>
          <div className={styles.metaGrid}>
            <span className={styles.metaLabel}>Name</span>
            <span className={styles.metaValue}>{user.displayName}</span>
            <span className={styles.metaLabel}>User ID</span>
            <MonoText size="xs">{user.userId}</MonoText>
            <span className={styles.metaLabel}>Provider</span>
            <span className={styles.metaValue}>{user.provider}</span>
            {user.email && (
              <>
                <span className={styles.metaLabel}>Email</span>
                <span className={styles.metaValue}>{user.email}</span>
              </>
            )}
            <span className={styles.metaLabel}>Created</span>
            <span className={styles.metaValue}>
              {new Date(user.createdAt).toLocaleDateString()}
            </span>
          </div>

          <SectionHeader>Roles</SectionHeader>
          <div className={styles.tagList}>
            {user.effectiveRoles.length === 0 && (
              <span className={styles.empty}>No roles assigned</span>
            )}
            {user.effectiveRoles.map((role) => (
              <Badge
                key={role.id}
                label={role.name}
                color={role.name === 'ADMIN' ? 'error' : role.name === 'OPERATOR' ? 'warning' : 'auto'}
              />
            ))}
          </div>
          {user.effectiveRoles.some((r) => r.source !== 'direct') && (
            <div className={styles.sourceList}>
              {user.effectiveRoles.map((role) => (
                <span key={role.id} className={styles.sourceNote}>
                  {role.name}: {role.source}
                </span>
              ))}
            </div>
          )}

          <SectionHeader>Groups</SectionHeader>
          <div className={styles.tagList}>
            {user.effectiveGroups.length === 0 && (
              <span className={styles.empty}>No group memberships</span>
            )}
            {user.effectiveGroups.map((group) => (
              <Badge key={group.id} label={group.name} color="auto" />
            ))}
          </div>
        </div>
      )}
    </Modal>
  );
}