import React from 'react';

interface WindowData {
  id: string;
  title: string;
  content: string;
  icon: string;
  isMinimized: boolean;
  url: string;
}

interface SidebarProps {
  windows: WindowData[];
  onRestore: (id: string) => void;
  onClose: (id: string) => void;
}

const Sidebar: React.FC<SidebarProps> = ({ windows, onRestore, onClose }) => {
  const styles = {
    sidebar: {
      position: 'fixed' as const,
      bottom: 0,
      left: 0,
      right: 0,
      background: 'rgba(32, 32, 32, 0.95)',
      backdropFilter: 'blur(10px)',
      display: 'flex',
      gap: '4px',
      padding: '8px 16px',
      zIndex: 1000,
      borderTop: '1px solid rgba(255,255,255,0.2)',
      overflowX: 'auto' as const,
    },
    item: {
      display: 'flex',
      alignItems: 'center',
      gap: '8px',
      padding: '6px 12px',
      background: 'rgba(255,255,255,0.1)',
      borderRadius: '8px',
      cursor: 'pointer',
      transition: 'all 0.2s',
      color: 'white',
      fontSize: '13px',
      minWidth: '120px',
      justifyContent: 'space-between' as const,
    },
    itemMinimized: {
      background: 'rgba(255,255,255,0.05)',
      opacity: 0.7,
    },
    icon: {
      fontSize: '16px',
    },
    title: {
      flex: 1,
      whiteSpace: 'nowrap' as const,
      overflow: 'hidden' as const,
      textOverflow: 'ellipsis',
    },
    closeBtn: {
      background: 'transparent',
      border: 'none',
      color: 'white',
      cursor: 'pointer',
      fontSize: '14px',
      padding: '2px 6px',
      borderRadius: '4px',
      transition: 'all 0.2s',
    },
  };

  if (windows.length === 0) return null;

  return (
    <div style={styles.sidebar}>
      {windows.map((window) => (
        <div 
          key={window.id} 
          style={{
            ...styles.item,
            ...(window.isMinimized ? styles.itemMinimized : {})
          }}
          onClick={() => {
            if (window.isMinimized) {
              onRestore(window.id);
            }
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = 'rgba(255,255,255,0.2)';
            e.currentTarget.style.transform = 'translateY(-2px)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = window.isMinimized 
              ? 'rgba(255,255,255,0.05)' 
              : 'rgba(255,255,255,0.1)';
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          <span style={styles.icon}>{window.icon}</span>
          <span style={styles.title}>{window.title}</span>
          <button 
            style={styles.closeBtn}
            onClick={(e) => {
              e.stopPropagation();
              onClose(window.id);
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = 'rgba(255,255,255,0.2)';
              e.currentTarget.style.color = '#ff4444';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'transparent';
              e.currentTarget.style.color = 'white';
            }}
          >
            ✕
          </button>
        </div>
      ))}
    </div>
  );
};

export default Sidebar;