import React, { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { X } from 'lucide-react';
import ModuleHeader from './ModuleHeader';
import Sidebar from './Sidebar';
import MobileNav from './MobileNav';
import { useShireModule } from '@/context/ShireModuleContext';
import { useScanner } from '@/context/ScannerContext';

// Embedded ScanForge agent workspace. Fills the available SHiRE content area,
// respects SHiRE's fixed global header, avoids horizontal overflow, keeps the
// internal ScanForge sidebar collapsible, lets the central workspace scroll
// independently, and avoids nested full-page browser scrollbars.
export default function ScanForgeAgentWorkspace() {
  const [collapsed, setCollapsed] = useState(false);
  const [detailsOpen, setDetailsOpen] = useState(false);
  const { available, connectionError } = useShireModule();
  const { status, scanState } = useScanner();

  return (
    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-[#08080a] text-zinc-100">
      <div className="scan-grid pointer-events-none fixed inset-0 opacity-20"/>
      <ModuleHeader onCollapseModule={() => setCollapsed(c => !c)} onOpenAgentDetails={() => setDetailsOpen(o => !o)} />
      {!available && (
        <div className="border-b border-amber-400/30 bg-amber-400/[.07] px-4 py-2 text-center text-xs font-semibold tracking-wider text-amber-200">
          SHIRE AGENT CONNECTION UNAVAILABLE — {connectionError || 'no live SHiRE backend data'}
        </div>
      )}
      <div className="relative flex min-h-0 flex-1">
        <Sidebar collapsed={collapsed} onToggleCollapse={() => setCollapsed(c => !c)} />
        <main className="min-h-0 flex-1 overflow-y-auto px-4 pb-20 pt-4 lg:px-8 lg:pb-6">
          <Outlet />
        </main>
      </div>
      <MobileNav />
      {detailsOpen && (
        <aside className="fixed right-4 top-20 z-50 w-[calc(100%-2rem)] max-w-sm rounded-2xl border border-purple-400/30 bg-[#121014]/95 p-5 shadow-2xl backdrop-blur">
          <div className="flex items-center justify-between">
            <h3 className="font-semibold">ScanForge Agent details</h3>
            <button onClick={() => setDetailsOpen(false)} aria-label="Close agent details" className="rounded-lg border border-white/10 p-1.5 text-zinc-400 hover:text-white"><X size={15}/></button>
          </div>
          <dl className="mt-3 space-y-2 text-sm text-zinc-400">
            <div className="flex justify-between"><dt>Agent ID</dt><dd className="text-zinc-200">scanforge</dd></div>
            <div className="flex justify-between"><dt>Route</dt><dd className="text-zinc-200">/agents/scanforge</dd></div>
            <div className="flex justify-between"><dt>Required capability</dt><dd className="font-mono text-purple-200">scanner.kinect.v1</dd></div>
            <div className="flex justify-between"><dt>Local bridge</dt><dd className="text-zinc-200">Required</dd></div>
            <div className="flex justify-between border-t border-white/10 pt-2"><dt>Live status</dt><dd className="capitalize text-zinc-200">{status}</dd></div><div className="flex justify-between"><dt>Operation</dt><dd className="capitalize text-zinc-200">{scanState.operation}</dd></div>
            <div className="flex justify-between"><dt>SHiRE session</dt><dd className={available ? 'text-[#7dff72]' : 'text-amber-300'}>{available ? 'Inherited' : 'Unavailable'}</dd></div>
          </dl>
        </aside>
      )}
    </div>
  );
}