import React, { memo } from 'react';
import { Handle, Position, NodeProps } from '@xyflow/react';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import {
  Security as SecurityIcon,
  Edit as EditIcon,
  Delete as DeleteIcon,
  Star as StarIcon,
} from '@mui/icons-material';
import { SystemRole, SystemUser } from '../../types/permissions';

export interface RoleNodeData {
  role: SystemRole;
  onEdit?: (role: SystemRole) => void;
  onDelete?: (role: SystemRole) => void;
}

const RoleFlowNode: React.FC<NodeProps<RoleNodeData>> = ({ data, selected }) => {
  const { role, onEdit, onDelete } = data;
  const permissionCount = role.permissions_count ?? role.permissions?.length ?? 0;
  const userCount = role.users_count ?? role.users?.length ?? 0;
  const users = role.users?.slice(0, 5) || [];

  // Generate color from string for avatars
  const stringToColor = (str?: string | null): string => {
    if (!str) return '#808080';
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
      hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    let color = '#';
    for (let i = 0; i < 3; i++) {
      const value = (hash >> (i * 8)) & 0xff;
      color += ('00' + value.toString(16)).substr(-2);
    }
    return color;
  };

  const getInitials = (user: SystemUser): string => {
    if (user.initials) return user.initials;
    const first = user.usr_Vorname?.[0] || '';
    const last = user.usr_Name?.[0] || '';
    return `${first}${last}`.toUpperCase() || '??';
  };

  const getUserName = (user: SystemUser): string => {
    return user.full_name ||
      (user.usr_Vorname && user.usr_Name ? `${user.usr_Vorname} ${user.usr_Name}` :
       user.usr_Name || user.usr_Vorname || 'Unknown');
  };

  return (
    <>
      {/* Target handle on left - receives connections from permissions (if needed) */}
      <Handle
        type="target"
        position={Position.Left}
        id="input"
        style={{
          width: 12,
          height: 12,
          background: selected ? role.role_color || '#1976d2' : '#555',
          border: '2px solid #fff',
        }}
      />

      <Paper
        elevation={selected ? 8 : 3}
        sx={{
          minWidth: 200,
          maxWidth: 280,
          borderRadius: 2,
          overflow: 'hidden',
          border: '2px solid',
          borderColor: selected ? 'primary.main' : 'transparent',
          transition: 'all 0.2s ease',
          opacity: role.role_active ? 1 : 0.6,
          '&:hover': {
            boxShadow: 6,
          },
        }}
      >
        {/* Header with role color */}
        <Box
          sx={{
            bgcolor: role.role_color || '#1976d2',
            color: '#fff',
            px: 1.5,
            py: 1,
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <SecurityIcon sx={{ fontSize: 20 }} />
          <Typography
            variant="subtitle2"
            fontWeight={700}
            sx={{
              flexGrow: 1,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {role.role_name}
          </Typography>
          {role.role_is_system && (
            <Tooltip title="System Role">
              <StarIcon sx={{ fontSize: 16 }} />
            </Tooltip>
          )}
        </Box>

        {/* Body */}
        <Box sx={{ p: 1.5 }}>
          {/* Description */}
          {role.role_description && (
            <Typography
              variant="caption"
              color="text.secondary"
              sx={{
                display: 'block',
                mb: 1,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {role.role_description}
            </Typography>
          )}

          {/* User avatars */}
          {users.length > 0 && (
            <Box sx={{ mb: 1 }}>
              <AvatarGroup
                max={5}
                sx={{
                  justifyContent: 'flex-start',
                  '& .MuiAvatar-root': {
                    width: 24,
                    height: 24,
                    fontSize: 10,
                    border: '2px solid white',
                  },
                }}
              >
                {users.map((user) => (
                  <Tooltip key={user.usr_id} title={getUserName(user)}>
                    <Avatar
                      src={user.photourl || undefined}
                      sx={{ bgcolor: stringToColor(getUserName(user)) }}
                    >
                      {getInitials(user)}
                    </Avatar>
                  </Tooltip>
                ))}
              </AvatarGroup>
            </Box>
          )}

          {/* Stats */}
          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: 1 }}>
            <Chip
              size="small"
              label={`${permissionCount} permissions`}
              variant="outlined"
              sx={{ fontSize: 10, height: 20 }}
            />
            <Chip
              size="small"
              label={`${userCount} users`}
              variant="outlined"
              sx={{ fontSize: 10, height: 20 }}
            />
          </Box>

          {/* Actions */}
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'flex-end',
              gap: 0.5,
              mt: 0.5,
            }}
          >
            {onEdit && (
              <Tooltip title="Edit role">
                <IconButton
                  size="small"
                  onClick={(e) => {
                    e.stopPropagation();
                    onEdit(role);
                  }}
                  sx={{ padding: 0.5 }}
                >
                  <EditIcon sx={{ fontSize: 16 }} />
                </IconButton>
              </Tooltip>
            )}
            {onDelete && !role.role_is_system && (
              <Tooltip title="Delete role">
                <IconButton
                  size="small"
                  color="error"
                  onClick={(e) => {
                    e.stopPropagation();
                    onDelete(role);
                  }}
                  sx={{ padding: 0.5 }}
                >
                  <DeleteIcon sx={{ fontSize: 16 }} />
                </IconButton>
              </Tooltip>
            )}
          </Box>
        </Box>

        {/* Inactive badge */}
        {!role.role_active && (
          <Chip
            size="small"
            label="Inactive"
            sx={{
              position: 'absolute',
              top: -8,
              right: -8,
              fontSize: 9,
              height: 18,
            }}
          />
        )}
      </Paper>

      {/* Source handle on right - connects to permissions */}
      <Handle
        type="source"
        position={Position.Right}
        id="output"
        style={{
          width: 12,
          height: 12,
          background: selected ? role.role_color || '#1976d2' : '#555',
          border: '2px solid #fff',
        }}
      />
    </>
  );
};

export default memo(RoleFlowNode);