import React from 'react';
import { Info, Octagon, PanelRightOpen } from 'lucide-react';
import StatusPill from './StatusPill';
import { useScanner } from '@/context/ScannerContext';

export default function ModuleHeader({ onCollapseModule, onOpenAgentDetails }) {
  const { scanState, status, performAction, demo } = useScanner();
  const active = ['capturing', 'paused'].includes(scanState.operation);
  const stop = () => performAction('cancel_capture', { projectId: scanState.activeProjectId, emergency: true }, true).catch(() => {});

  return (
    <header className="sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-white/10 bg-[#0b0b0d]/95 px-3 backdrop-blur-xl md:px-5">
      <div className="flex h-7 w-7 items-center justify-center rounded-lg border border-purple-400/40 bg-black text-[10px] font-bold text-purple-200">SF</div>
      <div className="min-w-0">
        <h1 className="truncate text-sm font-semibold tracking-wide text-white">ScanForge Scanner Agent</h1>
        <p className="hidden text-[10px] uppercase tracking-wider text-zinc-500 sm:block">{demo ? 'Demo Mode' : scanState.operation.replaceAll('_', ' ')}</p>
      </div>
      <div className="ml-auto flex items-center gap-2">
        <div className="hidden gap-2 sm:flex">
          <StatusPill label={`Kinect: ${scanState.kinectState.replaceAll('_', ' ')}`} state={status}/>
          <StatusPill label={`Bridge: ${scanState.bridgeState}`} state={scanState.bridgeState === 'connected' ? 'connected' : status}/>
        </div>
        <span className="hidden rounded-full border border-purple-400/30 bg-purple-400/10 px-2.5 py-1 text-[10px] font-mono text-purple-200 xl:inline">scanner.kinect.v1</span>
        <span className="hidden max-w-48 truncate text-xs text-zinc-500 2xl:inline">{scanState.activeProjectName || 'No active project'}</span>
        {active && <button onClick={stop} className="flex items-center gap-1.5 rounded-lg bg-red-600 px-3 py-2 text-xs font-bold"><Octagon size={14}/>STOP</button>}
        <button onClick={onOpenAgentDetails} aria-label="Open agent details" className="rounded-lg border border-white/10 p-2 text-zinc-400 hover:text-white"><Info size={16}/></button>
        <button onClick={onCollapseModule} aria-label="Collapse module" className="rounded-lg border border-white/10 p-2 text-zinc-400 hover:text-white"><PanelRightOpen size={16}/></button>
      </div>
    </header>
  );
}
