import { Typography, theme } from 'antd';
import {
  CloseOutlined,
  MinusOutlined,
  ExpandOutlined,
} from '@ant-design/icons';
import type { ChatWindow } from './ChatBarContext';
import MiniLiveChat from './MiniLiveChat';

const { Text } = Typography;

interface MiniChatWindowProps {
  window: ChatWindow;
  onToggle: () => void;
  onClose: () => void;
}

export default function MiniChatWindow({
  window: chatWindow,
  onToggle,
  onClose,
}: MiniChatWindowProps) {
  const { token } = theme.useToken();

  return (
    <div
      style={{
        width: 320,
        height: chatWindow.isExpanded ? 400 : 40,
        background: token.colorBgContainer,
        borderRadius: '12px 12px 0 0',
        border: `1px solid ${token.colorBorder}`,
        borderBottom: 'none',
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
        transition: 'height 0.2s ease',
        boxShadow: '0 -4px 20px rgba(0,0,0,0.3)',
      }}
    >
      {/* Title bar */}
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          padding: '8px 12px',
          background: token.colorBgElevated,
          borderBottom: chatWindow.isExpanded ? `1px solid ${token.colorBorder}` : 'none',
          cursor: 'pointer',
          userSelect: 'none',
          minHeight: 40,
        }}
        onClick={onToggle}
      >
        <Text
          ellipsis
          strong
          style={{ flex: 1, fontSize: 13 }}
        >
          {chatWindow.videoTitle}
        </Text>
        <div
          style={{ display: 'flex', gap: 8 }}
          onClick={(e) => e.stopPropagation()}
        >
          {chatWindow.isExpanded ? (
            <MinusOutlined
              style={{ fontSize: 12, color: token.colorTextSecondary, cursor: 'pointer' }}
              onClick={onToggle}
            />
          ) : (
            <ExpandOutlined
              style={{ fontSize: 12, color: token.colorTextSecondary, cursor: 'pointer' }}
              onClick={onToggle}
            />
          )}
          <CloseOutlined
            style={{ fontSize: 12, color: token.colorTextSecondary, cursor: 'pointer' }}
            onClick={onClose}
          />
        </div>
      </div>

      {/* Chat content */}
      {chatWindow.isExpanded && (
        <div style={{ flex: 1, overflow: 'hidden' }}>
          <MiniLiveChat videoId={chatWindow.videoId} isExpanded={chatWindow.isExpanded} />
        </div>
      )}
    </div>
  );
}
