import FloatingWindow from "@/components/shared/FloatingWindow";
import Loader from "@/components/shared/Loader";
import type { ManagedWindow } from "@/hooks/useWindowManager";
import type { BrowseWinData } from "./types";

interface BrowseNodeWindowProps {
  win: ManagedWindow<BrowseWinData>;
  focused: boolean;
  onUpdate: (id: string, patch: Partial<ManagedWindow<BrowseWinData>>) => void;
  onClose: (id: string) => void;
  onFocus: (id: string) => void;
  onNavBack: (winId: string, data: BrowseWinData) => void;
  onNavForward: (winId: string, data: BrowseWinData) => void;
  onNavReload: (winId: string, data: BrowseWinData) => void;
  onContentClick: (e: React.MouseEvent, winId: string, data: BrowseWinData) => void;
}

export default function BrowseNodeWindow({
  win, focused, onUpdate, onClose, onFocus,
  onNavBack, onNavForward, onNavReload, onContentClick,
}: BrowseNodeWindowProps) {
  const d = win.data;
  const canBack = d.historyIndex > 0;
  const canFwd = d.historyIndex < d.history.length - 1;

  return (
    <FloatingWindow
      id={win.id}
      title={d.node.name}
      x={win.x} y={win.y} w={win.w} h={win.h}
      zIndex={win.zIndex}
      focused={focused}
      onUpdate={onUpdate}
      onClose={onClose}
      onFocus={onFocus}
      addressBar={
        <div className="flex items-center gap-1.5 px-2 py-1 border-b border-border shrink-0 bg-muted/15">
          <button onClick={() => onNavBack(win.id, d)} disabled={!canBack || d.pageLoading}
            className="w-5 h-5 flex items-center justify-center rounded text-[10px] text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:cursor-default transition-colors" title="Back">
            &#9664;
          </button>
          <button onClick={() => onNavForward(win.id, d)} disabled={!canFwd || d.pageLoading}
            className="w-5 h-5 flex items-center justify-center rounded text-[10px] text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:cursor-default transition-colors" title="Forward">
            &#9654;
          </button>
          <button onClick={() => onNavReload(win.id, d)} disabled={d.pageLoading}
            className="w-5 h-5 flex items-center justify-center rounded text-[10px] text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:cursor-default transition-colors" title="Reload">
            &#8635;
          </button>
          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
          <div className="flex-1 flex items-center h-5 px-2 bg-background/60 border border-border rounded text-[10px] font-mono text-foreground/80 truncate cursor-text"
            onClick={(e) => { if (e.target === e.currentTarget) { const sel = window.getSelection(); if (sel) { const range = document.createRange(); range.selectNodeContents(e.currentTarget); sel.removeAllRanges(); sel.addRange(range); } } }}>
            <span className="text-muted-foreground/60 truncate">{d.node.hash.slice(0, 12)}\u2026/</span>{d.currentPath}
          </div>
          <span className="flex items-center gap-1 text-[9px] uppercase tracking-wider shrink-0">
            {d.pageLoading ? <span className="text-muted-foreground animate-pulse">loading</span>
              : d.pageError ? <><span className="w-1.5 h-1.5 rounded-full bg-destructive inline-block" /><span className="text-destructive">error</span></>
                : d.pageHtml ? <><span className="w-1.5 h-1.5 rounded-full bg-green-500 inline-block" /><span className="text-muted-foreground">ok</span></> : null}
          </span>
        </div>
      }
      footer={
        <div className="flex items-center gap-3 px-3 py-1 border-t border-border shrink-0 bg-muted/15 rounded-b-lg">
          <span className="text-[9px] text-muted-foreground uppercase tracking-wider truncate">{d.node.type ?? "peer"}</span>
          {d.node.interface && <span className="text-[9px] text-muted-foreground uppercase tracking-wider truncate">via {d.node.interface}</span>}
        </div>
      }
    >
      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
      <div className="p-3 h-full overflow-auto" onClick={(e) => onContentClick(e, win.id, d)}>
        {d.pageLoading && <div className="flex flex-col items-center justify-center h-full gap-3 text-muted-foreground text-xs"><Loader /> Requesting page...</div>}
        {d.pageError && <span className="text-destructive text-xs">{d.pageError}</span>}
        {d.pageHtml && <div className="font-mono text-[11px] leading-tight" dangerouslySetInnerHTML={{ __html: d.pageHtml }} />}
      </div>
    </FloatingWindow>
  );
}
