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

export interface TeamNodeData {
  team: Team;
  onEdit?: (team: Team) => void;
  onDelete?: (team: Team) => void;
  onAddMember?: (team: Team) => void;
}

const TeamFlowNode: React.FC<NodeProps<TeamNodeData>> = ({ data, selected }) => {
  const { team, onEdit, onDelete, onAddMember } = data;
  const memberCount = team.members_count ?? team.members?.length ?? 0;
  const roleCount = team.roles_count ?? team.roles?.length ?? 0;
  const members = team.members?.slice(0, 6) || [];

  // 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 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';
  };

  const getInitials = (name: string): 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();
  };

  return (
    <>
      {/* Target handle on left - receives staff connections */}
      <Handle
        type="target"
        position={Position.Left}
        id="input"
        style={{
          width: 14,
          height: 14,
          background: selected ? team.team_color || '#1976d2' : '#555',
          border: '2px solid #fff',
        }}
      />

      <Paper
        elevation={selected ? 8 : 3}
        sx={{
          minWidth: 220,
          maxWidth: 300,
          borderRadius: 2,
          overflow: 'hidden',
          border: '3px solid',
          borderColor: selected ? 'primary.main' : team.team_color || 'divider',
          transition: 'all 0.2s ease',
          opacity: team.team_active ? 1 : 0.6,
          bgcolor: 'background.paper',
          '&:hover': {
            boxShadow: 6,
          },
        }}
      >
        {/* Header */}
        <Box
          sx={{
            bgcolor: team.team_color || '#1976d2',
            color: '#fff',
            px: 1.5,
            py: 1,
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <GroupsIcon sx={{ fontSize: 22 }} />
          <Typography
            variant="subtitle1"
            fontWeight={700}
            sx={{
              flexGrow: 1,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {team.team_name}
          </Typography>
        </Box>

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

          {/* Description */}
          {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 */}
          {members.length > 0 && (
            <Box sx={{ mb: 1 }}>
              <AvatarGroup
                max={6}
                sx={{
                  justifyContent: 'flex-start',
                  '& .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 */}
          <Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', mb: 1 }}>
            <Chip
              size="small"
              label={`${memberCount} members`}
              variant="outlined"
              sx={{ fontSize: 10, height: 20 }}
            />
            <Chip
              size="small"
              label={`${roleCount} roles`}
              variant="outlined"
              sx={{ fontSize: 10, height: 20 }}
            />
          </Box>

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

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

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

      {/* Bottom handle for staff drop */}
      <Handle
        type="target"
        position={Position.Top}
        id="staff-drop"
        style={{
          width: 14,
          height: 14,
          background: selected ? '#4caf50' : '#888',
          border: '2px solid #fff',
        }}
      />
    </>
  );
};

export default memo(TeamFlowNode);