import React from 'react';
import { X } from 'lucide-react';
import type { ResearchMobilePane } from '../../research/researchUiStore';

interface ResearchShellProps {
  header: React.ReactNode;
  rail: React.ReactNode;
  workbench: React.ReactNode;
  inspector?: React.ReactNode;
  sidebarCollapsed: boolean;
  inspectorPinned: boolean;
  mobilePane: ResearchMobilePane;
  onCloseMobilePane: () => void;
}

export const ResearchShell: React.FC<ResearchShellProps> = ({
  header,
  rail,
  workbench,
  inspector,
  sidebarCollapsed,
  inspectorPinned,
  mobilePane,
  onCloseMobilePane,
}) => {
  const showMobileRail = mobilePane === 'filters';
  const showMobileInspector = mobilePane === 'inspector' && Boolean(inspector);

  return (
    <div className="flex h-full min-h-0 flex-col bg-[var(--research-bg)]">
      <div className="border-b border-term-border bg-term-elevated/95 px-4 py-4 backdrop-blur">
        {header}
      </div>

      <div className="relative flex min-h-0 flex-1">
        {!sidebarCollapsed ? (
          <aside className="hidden w-[320px] shrink-0 border-r border-term-border bg-term-elevated lg:block">
            <div className="h-full overflow-y-auto">{rail}</div>
          </aside>
        ) : null}

        <main className="min-w-0 flex-1 overflow-auto p-4 md:p-5">{workbench}</main>

        {inspector && inspectorPinned ? (
          <aside className="hidden w-[360px] shrink-0 border-l border-term-border bg-term-elevated lg:block">
            <div className="h-full overflow-y-auto">{inspector}</div>
          </aside>
        ) : null}

        {showMobileRail || showMobileInspector ? (
          <>
            <div
              className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden"
              onClick={onCloseMobilePane}
            />
            <aside
              className={`fixed inset-y-0 z-50 w-full max-w-sm overflow-y-auto border-term-border bg-term-elevated shadow-2xl lg:hidden ${
                showMobileRail ? 'left-0 border-r' : 'right-0 border-l'
              }`}
            >
              <div className="sticky top-0 flex items-center justify-between border-b border-term-border bg-term-surface px-4 py-3">
                <span className="text-sm font-semibold text-term-text">
                  {showMobileRail ? 'Workspace Filters' : 'Inspector'}
                </span>
                <button
                  type="button"
                  onClick={onCloseMobilePane}
                  className="rounded-xl border border-term-border bg-term-bg p-2 text-term-text-tertiary transition-colors hover:border-info/60 hover:text-term-text"
                  aria-label="Close panel"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>
              {showMobileRail ? rail : inspector}
            </aside>
          </>
        ) : null}
      </div>
    </div>
  );
};
