import React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Chip from '@mui/material/Chip';
import Avatar from '@mui/material/Avatar';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import {
  Star as StarIcon,
  StarBorder as StarBorderIcon,
  Person as PersonIcon,
} from '@mui/icons-material';
import { useDraggable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';
import { SystemUser } from '../../types/permissions';

interface StaffNodeProps {
  user: SystemUser;
  isSelected?: boolean;
  isHovered?: boolean;
  isDragging?: boolean;
  showRoles?: boolean;
  showTeams?: boolean;
  compact?: boolean;
  draggable?: boolean;
  isLead?: boolean;
  onToggleLead?: (user: SystemUser) => void;
  onClick?: (user: SystemUser) => void;
}

const StaffNode: React.FC<StaffNodeProps> = ({
  user,
  isSelected = false,
  isHovered = false,
  isDragging = false,
  showRoles = false,
  showTeams = false,
  compact = false,
  draggable = false,
  isLead = false,
  onToggleLead,
  onClick,
}) => {
  // Set up draggable if enabled
  const { attributes, listeners, setNodeRef, transform, isDragging: dndIsDragging } = useDraggable({
    id: `staff-${user.usr_id}`,
    data: {
      type: 'staff',
      user,
    },
    disabled: !draggable,
  });

  const style = draggable
    ? {
        transform: CSS.Translate.toString(transform),
      }
    : undefined;

  const actualIsDragging = isDragging || dndIsDragging;

  // Get display name
  const displayName = user.full_name ||
    (user.usr_Vorname && user.usr_Name ? `${user.usr_Vorname} ${user.usr_Name}` :
     user.usr_Name || user.usr_Vorname || 'Unknown');

  // Get initials
  const initials = user.initials || `${user.usr_Vorname?.[0] || ''}${user.usr_Name?.[0] || ''}`.toUpperCase() || '??';

  // Generate color from string
  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 roleCount = user.system_roles?.length ?? 0;
  const teamCount = user.teams?.length ?? 0;

  return (
    <Paper
      ref={setNodeRef}
      elevation={actualIsDragging ? 6 : isSelected ? 3 : 1}
      sx={{
        p: compact ? 1 : 1.5,
        borderRadius: 1.5,
        cursor: draggable ? 'grab' : 'pointer',
        border: '2px solid',
        borderColor: isSelected
          ? 'primary.main'
          : isHovered
          ? 'info.main'
          : isLead
          ? 'warning.main'
          : 'transparent',
        bgcolor: 'background.paper',
        opacity: actualIsDragging ? 0.8 : 1,
        transform: actualIsDragging ? 'scale(1.02)' : 'scale(1)',
        transition: actualIsDragging ? 'none' : 'all 0.2s ease',
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        minWidth: compact ? 140 : 200,
        touchAction: 'none',
        '&:hover': {
          borderColor: 'info.main',
          boxShadow: 2,
        },
        ...style,
      }}
      onClick={() => onClick?.(user)}
      {...(draggable ? { ...attributes, ...listeners } : {})}
    >
      {/* Avatar */}
      <Avatar
        src={user.photourl || undefined}
        sx={{
          width: compact ? 32 : 40,
          height: compact ? 32 : 40,
          bgcolor: stringToColor(displayName),
          border: isLead ? '2px solid gold' : undefined,
          flexShrink: 0,
        }}
      >
        {user.photourl ? null : initials}
      </Avatar>

      {/* User info */}
      <Box sx={{ flexGrow: 1, overflow: 'hidden' }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Typography
            variant={compact ? 'body2' : 'subtitle2'}
            fontWeight={600}
            sx={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {displayName}
          </Typography>
          {isLead && (
            <Tooltip title="Team Lead">
              <StarIcon sx={{ fontSize: 14, color: 'warning.main' }} />
            </Tooltip>
          )}
        </Box>

        {!compact && user.usr_email && (
          <Typography
            variant="caption"
            color="text.secondary"
            sx={{
              display: 'block',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {user.usr_email}
          </Typography>
        )}

        {/* Role/Team counts */}
        {!compact && (showRoles || showTeams) && (
          <Box sx={{ display: 'flex', gap: 0.5, mt: 0.5 }}>
            {showRoles && roleCount > 0 && (
              <Chip
                size="small"
                label={`${roleCount} roles`}
                variant="outlined"
                sx={{ height: 18, fontSize: 9 }}
              />
            )}
            {showTeams && teamCount > 0 && (
              <Chip
                size="small"
                label={`${teamCount} teams`}
                variant="outlined"
                sx={{ height: 18, fontSize: 9 }}
              />
            )}
          </Box>
        )}
      </Box>

      {/* Lead toggle (only when in team context) */}
      {!compact && onToggleLead && (
        <Tooltip title={isLead ? 'Remove as lead' : 'Set as lead'}>
          <IconButton
            size="small"
            onClick={(e) => {
              e.stopPropagation();
              onToggleLead(user);
            }}
            sx={{ color: isLead ? 'warning.main' : 'action.disabled' }}
          >
            {isLead ? <StarIcon /> : <StarBorderIcon />}
          </IconButton>
        </Tooltip>
      )}

      {/* Drag handle indicator (when draggable) */}
      {draggable && !compact && (
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 0.25,
            opacity: 0.3,
          }}
        >
          <Box sx={{ width: 16, height: 2, bgcolor: 'text.primary', borderRadius: 1 }} />
          <Box sx={{ width: 16, height: 2, bgcolor: 'text.primary', borderRadius: 1 }} />
          <Box sx={{ width: 16, height: 2, bgcolor: 'text.primary', borderRadius: 1 }} />
        </Box>
      )}
    </Paper>
  );
};

export default StaffNode;