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 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 } from '../../contexts/LayoutContext';
import { ChatProvider, 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';

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

const ChatPanelInner: React.FC = () => {
  const { chatPanelOpen, setChatPanelOpen } = useLayout();
  const { rooms, selectedRoomToken, selectRoom, connected } = useChat();
  const queryClient = useQueryClient();
  const markedRoomsRef = React.useRef(new Set<string>());
  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]);

  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>
            {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>
        )}
      </Paper>
    );
  }

  return (
    <Paper
      elevation={2}
      sx={{
        width: { xs: '100vw', sm: EXPANDED_WIDTH },
        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: 'column',
        flexShrink: 0,
        transition: TRANSITION,
        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 />
      )}
    </Paper>
  );
};

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

export default ChatPanel;