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 IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';
import {
  Edit as EditIcon,
  Delete as DeleteIcon,
  Groups as GroupsIcon,
  PersonAdd as PersonAddIcon,
} from '@mui/icons-material';
import { Team, TeamMember } from '../../types/permissions';

interface TeamNodeProps {
  team: Team;
  isSelected?: boolean;
  isHovered?: boolean;
  isDragging?: boolean;
  isDropTarget?: boolean;
  showActions?: boolean;
  compact?: boolean;
  onEdit?: (team: Team) => void;
  onDelete?: (team: Team) => void;
  onAddMember?: (team: Team) => void;
  onClick?: (team: Team) => void;
  onDrop?: (team: Team, item: any) => void;
}

const TeamNode: React.FC<TeamNodeProps> = ({
  team,
  isSelected = false,
  isHovered = false,
  isDragging = false,
  isDropTarget = false,
  showActions = true,
  compact = false,
  onEdit,
  onDelete,
  onAddMember,
  onClick,
}) => {
  const memberCount = team.members_count ?? team.members?.length ?? 0;
  const roleCount = team.roles_count ?? team.roles?.length ?? 0;
  const members = team.members || [];

  // Get initials from name
  const getInitials = (name?: string | null): string => {
    if (!name) return '??';
    const parts = name.trim().split(' ');
    if (parts.length >= 2) {
      return `${parts[0][0] || ''}${parts[parts.length - 1][0] || ''}`.toUpperCase();
    }
    return name.substring(0, 2).toUpperCase();
  };

  // Get display name for member
  const getMemberName = (member: TeamMember): string => {
    if (member.full_name) return member.full_name;
    if (member.usr_Vorname && member.usr_Name) {
      return `${member.usr_Vorname} ${member.usr_Name}`;
    }
    return member.usr_Name || member.usr_Vorname || 'Unknown';
  };

  // Generate color from string
  const stringToColor = (str: string): 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;
  };

  return (
    <Paper
      elevation={isDragging ? 8 : isSelected ? 4 : isDropTarget ? 6 : 2}
      sx={{
        p: compact ? 1.5 : 2,
        borderRadius: 2,
        cursor: 'pointer',
        border: '3px solid',
        borderColor: isDropTarget
          ? 'success.main'
          : isSelected
          ? 'primary.main'
          : isHovered
          ? 'info.main'
          : team.team_color || 'divider',
        bgcolor: isDropTarget
          ? 'success.lighter'
          : team.team_active
          ? 'background.paper'
          : 'action.disabledBackground',
        opacity: isDragging ? 0.8 : team.team_active ? 1 : 0.7,
        transform: isDragging ? 'scale(1.02)' : 'scale(1)',
        transition: 'all 0.2s ease',
        minWidth: compact ? 150 : 220,
        minHeight: compact ? 60 : 100,
        position: 'relative',
        '&:hover': {
          borderColor: 'info.main',
          boxShadow: 4,
        },
      }}
      onClick={() => onClick?.(team)}
    >
      {/* Header */}
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 1,
          mb: compact ? 0.5 : 1,
        }}
      >
        <GroupsIcon
          sx={{
            fontSize: compact ? 20 : 24,
            color: team.team_color || 'primary.main',
          }}
        />
        <Typography
          variant={compact ? 'body2' : 'subtitle1'}
          fontWeight={700}
          sx={{
            flexGrow: 1,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}
        >
          {team.team_name}
        </Typography>
      </Box>

      {/* Department */}
      {!compact && team.department && (
        <Typography
          variant="caption"
          color="text.secondary"
          sx={{ display: 'block', mb: 1 }}
        >
          {team.department.ber_name}
        </Typography>
      )}

      {/* Description */}
      {!compact && team.team_description && (
        <Typography
          variant="caption"
          color="text.secondary"
          sx={{
            display: 'block',
            mb: 1,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}
        >
          {team.team_description}
        </Typography>
      )}

      {/* Member avatars */}
      {!compact && members.length > 0 && (
        <Box sx={{ mb: 1 }}>
          <AvatarGroup
            max={5}
            sx={{
              '& .MuiAvatar-root': {
                width: 28,
                height: 28,
                fontSize: 11,
                border: '2px solid white',
              },
            }}
          >
            {members.map((member) => {
              const memberName = getMemberName(member);
              return (
                <Tooltip
                  key={member.usr_id}
                  title={`${memberName}${member.pivot?.tm_is_lead ? ' (Lead)' : ''}`}
                >
                  <Avatar
                    src={member.photourl || undefined}
                    sx={{
                      bgcolor: stringToColor(memberName),
                      border: member.pivot?.tm_is_lead
                        ? '2px solid gold !important'
                        : undefined,
                    }}
                  >
                    {getInitials(memberName)}
                  </Avatar>
                </Tooltip>
              );
            })}
          </AvatarGroup>
        </Box>
      )}

      {/* Stats badges */}
      <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap' }}>
        <Chip
          size="small"
          label={`${memberCount} members`}
          variant="outlined"
          sx={{ fontSize: compact ? 9 : 10 }}
        />
        {!compact && (
          <Chip
            size="small"
            label={`${roleCount} roles`}
            variant="outlined"
            sx={{ fontSize: 10 }}
          />
        )}
      </Box>

      {/* Action buttons */}
      {showActions && !compact && (
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'flex-end',
            gap: 0.5,
            mt: 1,
          }}
          onClick={(e) => e.stopPropagation()}
        >
          <Tooltip title="Add member">
            <IconButton size="small" onClick={() => onAddMember?.(team)}>
              <PersonAddIcon fontSize="small" />
            </IconButton>
          </Tooltip>

          <Tooltip title="Edit team">
            <IconButton size="small" onClick={() => onEdit?.(team)}>
              <EditIcon fontSize="small" />
            </IconButton>
          </Tooltip>

          <Tooltip title="Delete team">
            <IconButton
              size="small"
              color="error"
              onClick={() => onDelete?.(team)}
            >
              <DeleteIcon fontSize="small" />
            </IconButton>
          </Tooltip>
        </Box>
      )}

      {/* Inactive badge */}
      {!team.team_active && (
        <Chip
          size="small"
          label="Inactive"
          color="default"
          sx={{
            position: 'absolute',
            top: -8,
            right: -8,
            fontSize: 9,
          }}
        />
      )}

      {/* Drop target indicator */}
      {isDropTarget && (
        <Box
          sx={{
            position: 'absolute',
            inset: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            bgcolor: 'rgba(76, 175, 80, 0.1)',
            borderRadius: 2,
            pointerEvents: 'none',
          }}
        >
          <Typography variant="caption" color="success.main" fontWeight={600}>
            Drop to add
          </Typography>
        </Box>
      )}
    </Paper>
  );
};

export default TeamNode;