import { useEffect, useRef } from 'react';
import { PANEL_ICONS, PANEL_TITLES } from '../data/panels';
import { useFileTreeTab } from '../context/FileTreeTabContext';
import { HistoryHeaderMenus, RepoHeaderMenus } from './PanelHeaderMenus';
import { RepoPanel } from './panels/RepoPanel';
import { HistoryPanel } from './panels/HistoryPanel';
import { ConsolePanel } from './panels/ConsolePanel';
import { AvailabilityPanel } from './panels/AvailabilityPanel';
import { MembersPanel } from './panels/MembersPanel';
import { ServerManagementPanel } from './panels/ServerManagementPanel';
import { UserManagementPanel } from './panels/UserManagementPanel';
import { DevicesPanel } from './panels/DevicesPanel';

const PANEL_CONTENT = {
  repo: RepoPanel,
  history: HistoryPanel,
  console: ConsolePanel,
  availability: AvailabilityPanel,
  members: MembersPanel,
  server: ServerManagementPanel,
  users: UserManagementPanel,
  devices: DevicesPanel,
};

const EDGES = ['top', 'right', 'bottom', 'left'];

function panelIconClass(panelId) {
  if (panelId === 'repo') return 'panel-icon--filetree';
  if (panelId === 'history') return 'panel-icon--history';
  if (panelId === 'availability') return 'panel-icon--availability';
  if (panelId === 'members') return 'panel-icon--members';
  if (panelId === 'server') return 'panel-icon--server';
  if (panelId === 'users') return 'panel-icon--users';
  if (panelId === 'devices') return 'panel-icon--users';
  return '';
}

function FileTreePanelIcon() {
  const { tab } = useFileTreeTab();
  return (
    <img
      className={`panel-icon panel-icon--filetree panel-icon--filetree-${tab}`}
      src={PANEL_ICONS.repo}
      alt=""
    />
  );
}

export function Panel({
  panelId,
  isDragging,
  isDropTarget,
  activeDropEdge,
  onEdgeDown,
  onDropZoneHover,
}) {
  const frameRef = useRef(null);
  const Content = PANEL_CONTENT[panelId];

  return (
    <div
      ref={frameRef}
      className={`panel-frame${isDragging ? ' panel-frame--dragging' : ''}`}
    >
      {EDGES.map((edge) => (
        <div
          key={edge}
          className={`panel-edge panel-edge--${edge}`}
          onMouseDown={(e) => {
            e.preventDefault();
            onEdgeDown(panelId, frameRef.current);
          }}
        />
      ))}

      {isDropTarget && (
        <div className="drop-overlay">
          {EDGES.map((edge) => (
            <div
              key={edge}
              className={`drop-zone drop-zone--${edge}${activeDropEdge === edge ? ' drop-zone--active' : ''}`}
              onMouseEnter={() => onDropZoneHover?.({ targetId: panelId, edge })}
            />
          ))}
        </div>
      )}

      <div className="panel">
        <header className="panel-header">
          {panelId === 'repo' ? (
            <FileTreePanelIcon />
          ) : (
            <img
              className={`panel-icon ${panelIconClass(panelId)}`}
              src={PANEL_ICONS[panelId]}
              alt=""
            />
          )}
          <span className="panel-title">{PANEL_TITLES[panelId]}</span>
          {panelId === 'repo' && <RepoHeaderMenus />}
          {panelId === 'history' && <HistoryHeaderMenus />}
        </header>
        <div className="panel-body">
          <Content />
        </div>
      </div>
    </div>
  );
}

function DragGhostIcon({ panelId }) {
  const { tab } = useFileTreeTab();
  if (panelId === 'repo') {
    return (
      <img
        className={`panel-icon panel-icon--filetree panel-icon--filetree-${tab}`}
        src={PANEL_ICONS.repo}
        alt=""
      />
    );
  }
  return (
    <img className={`panel-icon ${panelIconClass(panelId)}`} src={PANEL_ICONS[panelId]} alt="" />
  );
}

export function DragGhost({ dragState }) {
  const ghostRef = useRef(null);

  useEffect(() => {
    if (!dragState) return;

    const onMove = (e) => {
      if (ghostRef.current) {
        ghostRef.current.style.left = `${e.clientX - 40}px`;
        ghostRef.current.style.top = `${e.clientY - 10}px`;
      }
    };

    document.addEventListener('mousemove', onMove);
    return () => document.removeEventListener('mousemove', onMove);
  }, [dragState]);

  if (!dragState) return null;

  return (
    <div ref={ghostRef} className="drag-ghost">
      <div className="panel">
        <header className="panel-header">
          <DragGhostIcon panelId={dragState.panelId} />
          <span className="panel-title">{PANEL_TITLES[dragState.panelId]}</span>
        </header>
      </div>
    </div>
  );
}
