import { useEffect, useRef, useState, type CSSProperties } from 'react';
import type { AdventureLogEntry } from '../game/types';

interface AdventureLogProps {
  entries: AdventureLogEntry[];
}

function formatTime(timestamp: number): string {
  const d = new Date(timestamp);
  const hh = String(d.getHours()).padStart(2, '0');
  const mm = String(d.getMinutes()).padStart(2, '0');
  return `${hh}:${mm}`;
}

const buttonStyle: CSSProperties = {
  position: 'fixed',
  bottom: 60,
  left: 12,
  zIndex: 50,
  display: 'flex',
  alignItems: 'center',
  gap: 4,
  padding: '6px 12px',
  borderRadius: 8,
  border: '1px solid rgba(255,255,255,0.15)',
  backgroundColor: 'rgba(0,0,0,0.55)',
  color: '#ccc',
  fontSize: 12,
  fontWeight: 600,
  cursor: 'pointer',
  pointerEvents: 'auto',
  userSelect: 'none',
};

const panelStyle: CSSProperties = {
  position: 'fixed',
  bottom: 60,
  left: 12,
  zIndex: 50,
  width: 'calc(100vw - 24px)',
  maxWidth: 360,
  maxHeight: '40vh',
  display: 'flex',
  flexDirection: 'column',
  borderRadius: 10,
  border: '1px solid rgba(255,255,255,0.12)',
  backgroundColor: 'rgba(10, 10, 20, 0.82)',
  backdropFilter: 'blur(6px)',
  overflow: 'hidden',
  pointerEvents: 'auto',
};

const panelHeaderStyle: CSSProperties = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  padding: '8px 12px',
  borderBottom: '1px solid rgba(255,255,255,0.08)',
  fontSize: 13,
  fontWeight: 700,
  color: '#ddd',
};

const scrollAreaStyle: CSSProperties = {
  flex: 1,
  overflowY: 'auto',
  padding: '6px 10px',
  fontSize: 12,
  lineHeight: 1.6,
  color: '#bbb',
};

const entryStyle: CSSProperties = {
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};

const timestampStyle: CSSProperties = {
  color: 'rgba(140,160,200,0.7)',
  marginRight: 4,
  fontFamily: 'monospace',
  fontSize: 11,
};

const closeButtonStyle: CSSProperties = {
  background: 'none',
  border: 'none',
  color: '#999',
  fontSize: 16,
  cursor: 'pointer',
  padding: '0 4px',
  lineHeight: 1,
};

export function AdventureLog({ entries }: AdventureLogProps) {
  const [expanded, setExpanded] = useState(false);
  const scrollRef = useRef<HTMLDivElement>(null);

  // Auto-scroll to bottom when new entries arrive while expanded
  useEffect(() => {
    if (expanded && scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [entries.length, expanded]);

  if (!expanded) {
    return (
      <button style={buttonStyle} onClick={() => setExpanded(true)}>
        <span style={{ fontSize: 14 }}>&#x1F4DC;</span> Log
      </button>
    );
  }

  return (
    <div style={panelStyle}>
      <div style={panelHeaderStyle}>
        <span>&#x1F4DC; Adventure Log</span>
        <button style={closeButtonStyle} onClick={() => setExpanded(false)}>
          &#x2715;
        </button>
      </div>
      <div ref={scrollRef} style={scrollAreaStyle}>
        {entries.length === 0 && (
          <div style={{ textAlign: 'center', opacity: 0.5, padding: 12 }}>
            No events yet...
          </div>
        )}
        {entries.map((entry) => (
          <div key={entry.id} style={entryStyle}>
            <span style={timestampStyle}>[{formatTime(entry.timestamp)}]</span>
            {entry.message}
          </div>
        ))}
      </div>
    </div>
  );
}
