import React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import ChatIcon from '@mui/icons-material/Chat';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import AddIcon from '@mui/icons-material/Add';
import Typography from '@mui/material/Typography';
import Avatar from '@mui/material/Avatar';
import Badge from '@mui/material/Badge';
import Toolbar from '@mui/material/Toolbar';
import Tooltip from '@mui/material/Tooltip';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import { useLayout, CHAT_PANEL_MIN_WIDTH, CHAT_PANEL_MAX_WIDTH } from '../../contexts/LayoutContext';
import { useChat } from '../../contexts/ChatContext';
import { Link } from 'react-router-dom';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { configApi } from '../../services/config';
import { notificationsApi } from '../../services/notifications';
import { nextcloudApi } from '../../services/nextcloud';
import { safeOpenUrl } from '../../utils/safeOpenUrl';
import ChatRoomList from './ChatRoomList';
import ChatMessageView from './ChatMessageView';
import NewChatDialog from './NewChatDialog';

const TRANSITION = 'width 225ms cubic-bezier(0.4, 0, 0.6, 1)';
const COLLAPSED_WIDTH = 64;

const ChatPanelInner: React.FC = () => {
  const { chatPanelOpen, setChatPanelOpen, chatPanelWidth, setChatPanelWidth } = useLayout();
  const { rooms, selectedRoomToken, selectRoom, connected } = useChat();
  const queryClient = useQueryClient();
  const markedRoomsRef = React.useRef(new Set<string>());
  const [newChatOpen, setNewChatOpen] = React.useState(false);
  const isDraggingRef = React.useRef(false);
  const { data: externalLinks } = useQuery({
    queryKey: ['external-links'],
    queryFn: () => configApi.getExternalLinks(),
    staleTime: 10 * 60 * 1000,
  });
  const nextcloudUrl = externalLinks?.nextcloud;

  // Dismiss internal notifications when panel opens
  React.useEffect(() => {
    if (!chatPanelOpen) return;
    notificationsApi.dismissByType('nextcloud_talk').then(() => {
      queryClient.invalidateQueries({ queryKey: ['notifications'] });
      queryClient.invalidateQueries({ queryKey: ['unreadNotificationCount'] });
    }).catch(() => {});
  }, [chatPanelOpen, queryClient]);

  // Mark unread rooms as read in Nextcloud whenever panel is open
  React.useEffect(() => {
    if (!chatPanelOpen) {
      markedRoomsRef.current.clear();
      return;
    }
    const unread = rooms.filter(
      (r) => r.unreadMessages > 0 && !markedRoomsRef.current.has(r.token),
    );
    if (unread.length === 0) return;
    unread.forEach((r) => markedRoomsRef.current.add(r.token));
    Promise.allSettled(unread.map((r) => nextcloudApi.markAsRead(r.token))).then(() => {
      queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
    });
  }, [chatPanelOpen, rooms, queryClient]);

  // Mark the selected room as read when a conversation is opened
  React.useEffect(() => {
    if (!selectedRoomToken) return;
    nextcloudApi.markAsRead(selectedRoomToken).then(() => {
      queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
    }).catch(() => {});
  }, [selectedRoomToken, queryClient]);

  const handleDragStart = React.useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    isDraggingRef.current = true;
    document.body.style.userSelect = 'none';
    document.body.style.cursor = 'ew-resize';

    const onMouseMove = (ev: MouseEvent) => {
      if (!isDraggingRef.current) return;
      const newWidth = window.innerWidth - ev.clientX;
      const clamped = Math.min(Math.max(newWidth, CHAT_PANEL_MIN_WIDTH), CHAT_PANEL_MAX_WIDTH);
      setChatPanelWidth(clamped);
    };

    const onMouseUp = () => {
      isDraggingRef.current = false;
      document.body.style.userSelect = '';
      document.body.style.cursor = '';
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  }, [setChatPanelWidth]);

  if (!chatPanelOpen) {
    return (
      <>
        <Paper
          elevation={2}
          sx={{
            width: COLLAPSED_WIDTH,
            height: '100vh',
            position: 'sticky',
            top: 0,
            display: { xs: 'none', sm: 'flex' },
            flexDirection: 'column',
            alignItems: 'center',
            pt: 1,
            flexShrink: 0,
            transition: TRANSITION,
            overflowX: 'hidden',
            overflowY: 'auto',
          }}
        >
          <Toolbar />
          <IconButton onClick={() => setChatPanelOpen(true)} aria-label="Chat öffnen">
            <ChatIcon />
          </IconButton>
          {connected && (
            <List disablePadding sx={{ flex: 1 }}>
              {rooms.map((room) => (
                <ListItem key={room.token} disablePadding sx={{ justifyContent: 'center', py: 0.5 }}>
                  <Tooltip title={room.displayName} placement="left" arrow>
                    <IconButton
                      onClick={() => {
                        setChatPanelOpen(true);
                        selectRoom(room.token);
                      }}
                      sx={{ p: 0.5 }}
                    >
                      <Badge
                        variant="dot"
                        color="primary"
                        invisible={room.unreadMessages === 0}
                      >
                        <Avatar
                          sx={{
                            width: 32,
                            height: 32,
                            fontSize: '0.75rem',
                            bgcolor:
                              room.token === selectedRoomToken
                                ? 'primary.main'
                                : 'action.hover',
                          }}
                        >
                          {room.displayName.substring(0, 2).toUpperCase()}
                        </Avatar>
                      </Badge>
                    </IconButton>
                  </Tooltip>
                </ListItem>
              ))}
            </List>
          )}
          {connected && (
            <Tooltip title="Neues Gespräch" placement="left" arrow>
              <IconButton
                size="small"
                onClick={() => {
                  setChatPanelOpen(true);
                  setNewChatOpen(true);
                }}
                sx={{ mb: 1 }}
                aria-label="Neues Gespräch"
              >
                <AddIcon fontSize="small" />
              </IconButton>
            </Tooltip>
          )}
        </Paper>
        {newChatOpen && (
          <NewChatDialog
            open={newChatOpen}
            onClose={() => setNewChatOpen(false)}
            onRoomCreated={(token) => {
              queryClient.invalidateQueries({ queryKey: ['nextcloud', 'rooms'] });
              selectRoom(token);
              setNewChatOpen(false);
            }}
          />
        )}
      </>
    );
  }

  return (
    <Paper
      elevation={2}
      sx={{
        width: { xs: '100vw', sm: chatPanelWidth },
        position: { xs: 'fixed', sm: 'sticky' },
        top: { xs: 0, sm: 0 },
        right: { xs: 0, sm: 'auto' },
        bottom: { xs: 0, sm: 'auto' },
        zIndex: { xs: (theme) => theme.zIndex.drawer + 2, sm: 'auto' },
        height: { xs: '100vh', sm: '100vh' },
        display: 'flex',
        flexDirection: 'row',
        flexShrink: 0,
        overflow: 'hidden',
      }}
    >
      {/* Drag handle on left edge */}
      <Box
        onMouseDown={handleDragStart}
        sx={{
          display: { xs: 'none', sm: 'block' },
          width: 4,
          flexShrink: 0,
          cursor: 'ew-resize',
          bgcolor: 'transparent',
          '&:hover': { bgcolor: 'primary.main', opacity: 0.4 },
          transition: 'background-color 150ms',
          alignSelf: 'stretch',
        }}
      />
      <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <Toolbar />
        <Box
          sx={{
            px: 1.5,
            py: 1,
            borderBottom: 1,
            borderColor: 'divider',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <Typography variant="subtitle1" fontWeight={600}>
            Chat
          </Typography>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
            {nextcloudUrl && (
              <Tooltip title="In Nextcloud öffnen" placement="bottom">
                <IconButton size="small" onClick={() => safeOpenUrl(`${nextcloudUrl}/apps/spreed`)} aria-label="In Nextcloud öffnen">
                  <OpenInNewIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            )}
            <IconButton size="small" onClick={() => setChatPanelOpen(false)} aria-label="Chat einklappen">
              <ChatIcon fontSize="small" />
            </IconButton>
          </Box>
        </Box>

        {!connected ? (
          <Box sx={{ p: 2 }}>
            <Typography variant="body2" color="text.secondary">
              Nextcloud nicht verbunden. Bitte verbinden Sie sich in den <Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>.
            </Typography>
          </Box>
        ) : selectedRoomToken ? (
          <Box sx={{ display: 'flex', flex: 1, minHeight: 0 }}>
            {/* Compact room sidebar — hidden on mobile */}
            <Box
              sx={{
                display: { xs: 'none', sm: 'flex' },
                flexDirection: 'column',
                width: 120,
                flexShrink: 0,
                borderRight: 1,
                borderColor: 'divider',
                overflow: 'auto',
                py: 0.5,
              }}
            >
              {rooms.map((room) => {
                const isSelected = room.token === selectedRoomToken;
                return (
                  <Tooltip key={room.token} title={room.displayName} placement="left" arrow>
                    <Box
                      onClick={() => selectRoom(room.token)}
                      sx={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: 0.75,
                        px: 1,
                        py: 0.5,
                        cursor: 'pointer',
                        borderRadius: 1,
                        mx: 0.5,
                        bgcolor: isSelected ? 'action.selected' : 'transparent',
                        '&:hover': {
                          bgcolor: isSelected ? 'action.selected' : 'action.hover',
                        },
                      }}
                    >
                      <Badge
                        variant="dot"
                        color="primary"
                        invisible={room.unreadMessages === 0}
                      >
                        <Avatar
                          sx={{
                            width: 28,
                            height: 28,
                            fontSize: '0.65rem',
                            bgcolor: isSelected ? 'primary.main' : 'action.hover',
                            color: isSelected ? 'primary.contrastText' : 'text.primary',
                            flexShrink: 0,
                          }}
                        >
                          {room.displayName.substring(0, 2).toUpperCase()}
                        </Avatar>
                      </Badge>
                      <Typography
                        variant="caption"
                        noWrap
                        sx={{
                          flex: 1,
                          minWidth: 0,
                          fontWeight: isSelected ? 600 : 400,
                        }}
                      >
                        {room.displayName}
                      </Typography>
                    </Box>
                  </Tooltip>
                );
              })}
            </Box>
            <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
              <ChatMessageView />
            </Box>
          </Box>
        ) : (
          <ChatRoomList />
        )}
      </Box>
    </Paper>
  );
};

const ChatPanel: React.FC = () => {
  return <ChatPanelInner />;
};

export default ChatPanel;
