import { useEffect } from 'react';

import { useViewerUrlState } from '../../hooks/useViewerUrlState';
import { useViewerStore } from '../../store/viewerStore';
import { getMachineAssetDefinition } from '../../three/assets/machineAssets';
import { DetailDrawer } from './DetailDrawer';
import { LoadingProgressOverlay } from './LoadingProgressOverlay';
import { PartListPanel } from './PartListPanel';
import { PartTooltip } from './PartTooltip';
import { UnsupportedMachinePanel } from './UnsupportedMachinePanel';
import { ViewerCanvas } from './ViewerCanvas';
import { ViewerControlsPanel } from './ViewerControlsPanel';
import { ViewerStatusBar } from './ViewerStatusBar';
import { ViewerToolbar } from './ViewerToolbar';

export interface MechanicalViewerProps {
  machineId: string;
  className?: string;
}

export function MechanicalViewer({ machineId, className = '' }: MechanicalViewerProps) {
  const assetDefinition = getMachineAssetDefinition(machineId);
  const { copyShareLink } = useViewerUrlState(machineId);

  useEffect(() => {
    if (!assetDefinition) {
      useViewerStore.getState().setActiveMachine(machineId, [], null);
    }
  }, [assetDefinition, machineId]);

  return (
    <section
      className={`grid min-h-[calc(100vh-4rem)] grid-cols-1 gap-3 bg-[#0B0E14] p-3 text-slate-100 lg:h-[calc(100vh-4rem)] lg:grid-cols-[320px_minmax(0,1fr)_340px] ${className}`}
      aria-label="Mechanical systems 3D viewer"
    >
      <PartListPanel className="order-2 max-h-[620px] lg:order-1 lg:max-h-none" />

      <div className="order-1 min-h-[540px] overflow-hidden rounded-2xl border border-white/10 bg-[#0B0E14] shadow-2xl shadow-black/30 lg:order-2 lg:min-h-0">
        <div className="relative h-full min-h-[540px] lg:min-h-0">
          <ViewerCanvas machineId={machineId} />
          <ViewerToolbar onCopyShareLink={copyShareLink} />
          <LoadingProgressOverlay />
          <PartTooltip />
          {!assetDefinition ? <UnsupportedMachinePanel machineId={machineId} /> : null}
          <DetailDrawer />
          <ViewerStatusBar />
        </div>
      </div>

      <ViewerControlsPanel className="order-3 max-h-[620px] lg:max-h-none" />
    </section>
  );
}