import React, { useState } from 'react';
import { X } from 'lucide-react';

interface ResearchShellProps {
  sidebar: React.ReactNode;
  toolbar: React.ReactNode;
  inspector?: React.ReactNode;
  children: React.ReactNode;
  onOpenTerminal?: () => void;
  onOpenSettings?: () => void;
  isSidebarOpen: boolean;
  onToggleSidebar: () => void;
  activeView?: 'terminal' | 'research' | 'settings';
}

export const ResearchShell: React.FC<ResearchShellProps> = ({
  sidebar,
  toolbar,
  inspector,
  children,
  onOpenTerminal,
  onOpenSettings,
  isSidebarOpen,
  onToggleSidebar,
  activeView,
}) => {
  const [isInspectorOpen, setIsInspectorOpen] = useState(false);
  const shellGridClass = inspector
    ? isSidebarOpen
      ? 'lg:grid-cols-[280px_minmax(0,1fr)_360px]'
      : 'lg:grid-cols-[64px_minmax(0,1fr)_360px]'
    : isSidebarOpen
      ? 'lg:grid-cols-[280px_minmax(0,1fr)]'
      : 'lg:grid-cols-[64px_minmax(0,1fr)]';

  return (
    <div className={`research-shell relative flex min-h-0 flex-1 flex-col lg:grid ${shellGridClass}`}>
      {/* Mobile Sidebar Overlay */}
      {isSidebarOpen && (
        <>
          <div
            className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden"
            onClick={onToggleSidebar}
          />
          <aside className="fixed inset-y-0 left-0 z-50 w-[280px] overflow-auto border-r border-term-border bg-term-elevated shadow-xl lg:hidden">
            <button
              type="button"
              onClick={onToggleSidebar}
              className="absolute right-4 top-4 rounded-xl border border-term-border bg-term-surface p-2 text-info transition-colors hover:border-info hover:text-term-text lg:hidden"
              aria-label="Close sidebar"
            >
              <X className="h-4 w-4" />
            </button>
            <div className="pt-12">{sidebar}</div>
          </aside>
        </>
      )}

      {/* Desktop Sidebar */}
      <aside className="hidden min-h-0 overflow-y-auto border-b border-term-border bg-term-elevated lg:block lg:border-b-0 lg:border-r">
        {sidebar}
      </aside>

      {/* Main Content Area */}
      <section className="flex min-h-0 min-w-0 flex-col bg-term-bg">
        <div className="border-b border-term-border bg-term-elevated/90 px-3 py-3 backdrop-blur sm:px-4 sm:py-4 md:px-5 md:py-4">
          {React.isValidElement(toolbar) &&
          React.cloneElement(toolbar, {
              onOpenTerminal,
              onOpenSettings,
              activeView,
              onToggleSidebar,
              onToggleInspectorMobile: () => setIsInspectorOpen((prev) => !prev),
              isSidebarOpen,
              isInspectorOpen,
            } as any)}
        </div>
        <div className="min-h-0 flex-1 overflow-auto p-3 sm:p-4 md:p-5">{children}</div>
      </section>

      {/* Mobile Inspector Overlay */}
      {inspector && isInspectorOpen && (
        <>
          <div
            className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden"
            onClick={() => setIsInspectorOpen(false)}
          />
          <aside className="fixed inset-y-0 right-0 z-50 w-full max-w-sm overflow-auto border-l border-term-border bg-term-elevated shadow-xl lg:hidden">
            <div className="sticky top-0 flex items-center justify-between border-b border-term-border bg-term-elevated px-4 py-3">
              <span className="text-sm font-semibold text-term-text">Inspector</span>
              <button
                type="button"
                onClick={() => setIsInspectorOpen(false)}
                className="rounded-xl border border-term-border bg-term-surface p-2 text-info transition-colors hover:border-info hover:text-term-text"
                aria-label="Close inspector"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
            <div>{inspector}</div>
          </aside>
        </>
      )}

      {/* Desktop Inspector */}
      {inspector ? (
        <aside className="hidden min-h-0 overflow-auto border-l border-term-border bg-term-elevated lg:block lg:max-w-[360px] xl:block">
          {inspector}
        </aside>
      ) : null}
    </div>
  );
};
