import * as React from "react";

import { MotionPreferenceControl } from "../preferences/MotionPreferenceControl";
import { ShareLinkButton } from "../share/ShareLinkButton";
import {
  getRelatedMachines,
  type GuidedTourStep,
  type MachineDefinition,
  type MachinePart,
} from "../../modules/machines/catalogue";
import {
  buildViewerShareState,
  cameraPresetOrder,
  isCameraPreset,
  type CameraPreset,
  useViewerStore,
} from "../../store/productionViewerStore";
import type { CrossSectionAxis } from "../../utils/productionShareState";

export interface ViewerPanelProps {
  machine: MachineDefinition;
}

export interface ViewerToolbarProps extends ViewerPanelProps {
  onOpenShortcuts: () => void;
}

const crossSectionAxes: readonly CrossSectionAxis[] = ["none", "x", "y", "z"];

function buttonClass(extra = ""): string {
  return `control-button px-3 py-2 text-sm ${extra}`;
}

function formatPercent(value: number): string {
  return `${Math.round(value * 100)}%`;
}

export function ViewerSidebar({ machine }: ViewerPanelProps): JSX.Element {
  const selectedPartId = useViewerStore((state) => state.selectedPartId);
  const hiddenPartIds = useViewerStore((state) => state.hiddenPartIds);
  const partOpacities = useViewerStore((state) => state.partOpacities);
  const selectPart = useViewerStore((state) => state.selectPart);
  const togglePartVisibility = useViewerStore((state) => state.togglePartVisibility);
  const setPartOpacity = useViewerStore((state) => state.setPartOpacity);

  return (
    <aside
      className="glass-panel engineering-scrollbar h-full overflow-y-auto rounded-3xl p-4"
      aria-labelledby="component-list-title"
    >
      <div className="flex items-start justify-between gap-4">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-accent)]">
            Components
          </p>
          <h2 id="component-list-title" className="mt-2 text-xl font-semibold text-white">
            Part visibility
          </h2>
        </div>
        <span className="rounded-full border border-[var(--color-border)] px-2 py-1 text-xs tabular-nums text-[var(--color-text-muted)]">
          {machine.parts.length}
        </span>
      </div>

      <div className="mt-4 space-y-3">
        {machine.parts.map((part) => {
          const hidden = hiddenPartIds.includes(part.id);
          const opacity = partOpacities[part.id] ?? 1;
          const selected = selectedPartId === part.id;

          return (
            <article
              key={part.id}
              className={`rounded-2xl border p-3 transition ${
                selected
                  ? "border-[rgba(76,141,255,0.74)] bg-[rgba(76,141,255,0.12)]"
                  : "border-[var(--color-border)] bg-black/10 hover:border-[rgba(76,141,255,0.36)]"
              }`}
            >
              <div className="flex items-start gap-3">
                <button
                  className="mt-0.5 grid h-7 w-7 place-items-center rounded-xl border border-[var(--color-border)] bg-black/20 text-xs"
                  type="button"
                  aria-label={`${hidden ? "Show" : "Hide"} ${part.name}`}
                  aria-pressed={!hidden}
                  onClick={() => togglePartVisibility(part.id)}
                >
                  {hidden ? "○" : "●"}
                </button>

                <button
                  className="min-w-0 flex-1 text-left"
                  type="button"
                  onClick={() => selectPart(part.id)}
                >
                  <span className="block truncate text-sm font-semibold text-white">{part.name}</span>
                  <span className="mt-1 line-clamp-2 block text-xs leading-5 text-[var(--color-text-muted)]">
                    {part.description}
                  </span>
                </button>
              </div>

              <label className="mt-3 block text-xs text-[var(--color-text-muted)]">
                <span className="flex justify-between">
                  <span>Opacity</span>
                  <span className="tabular-nums">{formatPercent(opacity)}</span>
                </span>
                <input
                  className="mt-2 w-full accent-[var(--color-accent)]"
                  type="range"
                  min={0.08}
                  max={1}
                  step={0.01}
                  value={opacity}
                  aria-label={`${part.name} opacity`}
                  onChange={(event) => setPartOpacity(part.id, Number(event.currentTarget.value))}
                />
              </label>
            </article>
          );
        })}
      </div>
    </aside>
  );
}

function TourControls({ machine }: ViewerPanelProps): JSX.Element {
  const tourStepIndex = useViewerStore((state) => state.tourStepIndex);
  const setTourStepIndex = useViewerStore((state) => state.setTourStepIndex);
  const selectPart = useViewerStore((state) => state.selectPart);
  const setCameraPreset = useViewerStore((state) => state.setCameraPreset);
  const setAnnotations = useViewerStore((state) => state.setAnnotations);
  const setPlaying = useViewerStore((state) => state.setPlaying);

  const activateStep = React.useCallback(
    (index: number | null) => {
      setTourStepIndex(index);

      if (index === null) {
        selectPart(null);
        return;
      }

      const step = machine.tour[index];
      if (!step) {
        return;
      }

      setAnnotations(true);
      setPlaying(true);

      if (step.partId) {
        selectPart(step.partId);
      }

      if (isCameraPreset(step.cameraPreset)) {
        setCameraPreset(step.cameraPreset);
      }
    },
    [machine.tour, selectPart, setAnnotations, setCameraPreset, setPlaying, setTourStepIndex],
  );

  const currentStep = tourStepIndex === null ? null : machine.tour[tourStepIndex];

  return (
    <section className="rounded-2xl border border-[var(--color-border)] bg-black/10 p-3">
      <div className="flex items-start justify-between gap-3">
        <div>
          <h3 className="text-sm font-semibold text-white">Guided tour</h3>
          <p className="mt-1 text-xs leading-5 text-[var(--color-text-muted)]">
            Camera presets and component highlights explain the system in sequence.
          </p>
        </div>
        <button
          className={buttonClass("text-xs")}
          type="button"
          onClick={() => activateStep(tourStepIndex === null ? 0 : null)}
        >
          {tourStepIndex === null ? "Start" : "Stop"}
        </button>
      </div>

      {currentStep ? (
        <div className="mt-3 rounded-2xl border border-[rgba(76,141,255,0.36)] bg-[rgba(76,141,255,0.1)] p-3">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-accent)]">
            Step {(tourStepIndex ?? 0) + 1} of {machine.tour.length}
          </p>
          <h4 className="mt-2 text-sm font-semibold text-white">{currentStep.title}</h4>
          <p className="mt-1 text-xs leading-5 text-[var(--color-text-muted)]">
            {currentStep.caption}
          </p>
        </div>
      ) : null}

      <div className="mt-3 grid grid-cols-2 gap-2">
        <button
          className={buttonClass("text-xs")}
          type="button"
          disabled={machine.tour.length === 0}
          onClick={() => {
            const nextIndex =
              tourStepIndex === null
                ? 0
                : (tourStepIndex - 1 + machine.tour.length) % machine.tour.length;
            activateStep(nextIndex);
          }}
        >
          Previous
        </button>
        <button
          className={buttonClass("text-xs")}
          type="button"
          disabled={machine.tour.length === 0}
          onClick={() => {
            const nextIndex =
              tourStepIndex === null ? 0 : (tourStepIndex + 1) % machine.tour.length;
            activateStep(nextIndex);
          }}
        >
          Next
        </button>
      </div>
    </section>
  );
}

export function ViewerControlPanel({ machine }: ViewerPanelProps): JSX.Element {
  const playback = useViewerStore((state) => state.playback);
  const explodeDistance = useViewerStore((state) => state.explodeDistance);
  const wireframe = useViewerStore((state) => state.wireframe);
  const annotations = useViewerStore((state) => state.annotations);
  const crossSectionAxis = useViewerStore((state) => state.crossSectionAxis);
  const crossSectionOffset = useViewerStore((state) => state.crossSectionOffset);
  const setPlaying = useViewerStore((state) => state.setPlaying);
  const setRpm = useViewerStore((state) => state.setRpm);
  const setTimeScale = useViewerStore((state) => state.setTimeScale);
  const restartCycle = useViewerStore((state) => state.restartCycle);
  const stepCycle = useViewerStore((state) => state.stepCycle);
  const setExplodeDistance = useViewerStore((state) => state.setExplodeDistance);
  const setWireframe = useViewerStore((state) => state.setWireframe);
  const setAnnotations = useViewerStore((state) => state.setAnnotations);
  const setCrossSectionAxis = useViewerStore((state) => state.setCrossSectionAxis);
  const setCrossSectionOffset = useViewerStore((state) => state.setCrossSectionOffset);
  const relatedMachines = getRelatedMachines(machine);

  return (
    <aside
      className="glass-panel engineering-scrollbar h-full overflow-y-auto rounded-3xl p-4"
      aria-labelledby="viewer-controls-title"
    >
      <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-highlight)]">
        Simulation
      </p>
      <h2 id="viewer-controls-title" className="mt-2 text-xl font-semibold text-white">
        Viewer controls
      </h2>

      <div className="mt-4 space-y-4">
        <section className="rounded-2xl border border-[var(--color-border)] bg-black/10 p-3">
          <h3 className="text-sm font-semibold text-white">Playback</h3>
          <div className="mt-3 grid grid-cols-3 gap-2">
            <button
              className={buttonClass("text-xs")}
              type="button"
              aria-pressed={playback.isPlaying}
              onClick={() => setPlaying(!playback.isPlaying)}
            >
              {playback.isPlaying ? "Pause" : "Play"}
            </button>
            <button className={buttonClass("text-xs")} type="button" onClick={restartCycle}>
              Restart
            </button>
            <button className={buttonClass("text-xs")} type="button" onClick={stepCycle}>
              Step
            </button>
          </div>

          <label className="mt-4 block text-xs text-[var(--color-text-muted)]">
            <span className="flex justify-between">
              <span>RPM</span>
              <span className="tabular-nums">{Math.round(playback.rpm)}</span>
            </span>
            <input
              className="mt-2 w-full accent-[var(--color-accent)]"
              type="range"
              min={30}
              max={4200}
              step={10}
              value={playback.rpm}
              onChange={(event) => setRpm(Number(event.currentTarget.value))}
            />
          </label>

          <label className="mt-4 block text-xs text-[var(--color-text-muted)]">
            <span className="flex justify-between">
              <span>Time scale</span>
              <span className="tabular-nums">{playback.timeScale.toFixed(1)}×</span>
            </span>
            <input
              className="mt-2 w-full accent-[var(--color-accent)]"
              type="range"
              min={0.1}
              max={3}
              step={0.1}
              value={playback.timeScale}
              onChange={(event) => setTimeScale(Number(event.currentTarget.value))}
            />
          </label>
        </section>

        <section className="rounded-2xl border border-[var(--color-border)] bg-black/10 p-3">
          <h3 className="text-sm font-semibold text-white">Display</h3>

          <label className="mt-3 block text-xs text-[var(--color-text-muted)]">
            <span className="flex justify-between">
              <span>Exploded separation</span>
              <span className="tabular-nums">{explodeDistance.toFixed(1)}</span>
            </span>
            <input
              className="mt-2 w-full accent-[var(--color-highlight)]"
              type="range"
              min={0}
              max={4}
              step={0.05}
              value={explodeDistance}
              onChange={(event) => setExplodeDistance(Number(event.currentTarget.value))}
            />
          </label>

          <div className="mt-3 grid grid-cols-2 gap-2">
            <button
              className={buttonClass("text-xs")}
              type="button"
              aria-pressed={wireframe}
              onClick={() => setWireframe(!wireframe)}
            >
              Wireframe
            </button>
            <button
              className={buttonClass("text-xs")}
              type="button"
              aria-pressed={annotations}
              onClick={() => setAnnotations(!annotations)}
            >
              Labels
            </button>
          </div>
        </section>

        <section className="rounded-2xl border border-[var(--color-border)] bg-black/10 p-3">
          <h3 className="text-sm font-semibold text-white">Cross-section</h3>
          <div className="mt-3 grid grid-cols-4 gap-2">
            {crossSectionAxes.map((axis) => (
              <button
                key={axis}
                className={buttonClass("text-xs uppercase")}
                type="button"
                aria-pressed={crossSectionAxis === axis}
                onClick={() => setCrossSectionAxis(axis)}
              >
                {axis}
              </button>
            ))}
          </div>
          <label className="mt-3 block text-xs text-[var(--color-text-muted)]">
            <span className="flex justify-between">
              <span>Plane offset</span>
              <span className="tabular-nums">{crossSectionOffset.toFixed(2)}</span>
            </span>
            <input
              className="mt-2 w-full accent-[var(--color-accent)]"
              type="range"
              min={-2}
              max={2}
              step={0.02}
              value={crossSectionOffset}
              disabled={crossSectionAxis === "none"}
              onChange={(event) => setCrossSectionOffset(Number(event.currentTarget.value))}
            />
          </label>
        </section>

        <MotionPreferenceControl />

        <TourControls machine={machine} />

        {relatedMachines.length > 0 ? (
          <section className="rounded-2xl border border-[var(--color-border)] bg-black/10 p-3">
            <h3 className="text-sm font-semibold text-white">Related systems</h3>
            <div className="mt-3 space-y-2">
              {relatedMachines.map((relatedMachine) => (
                <a
                  key={relatedMachine.id}
                  className="block rounded-xl border border-[var(--color-border)] bg-white/[0.03] p-3 text-sm transition hover:border-[rgba(76,141,255,0.5)] hover:bg-[rgba(76,141,255,0.08)]"
                  href={`/machine/${relatedMachine.id}`}
                >
                  <span className="font-semibold text-white">{relatedMachine.title}</span>
                  <span className="mt-1 block text-xs text-[var(--color-text-muted)]">
                    {relatedMachine.category} · {relatedMachine.difficulty}
                  </span>
                </a>
              ))}
            </div>
          </section>
        ) : null}
      </div>
    </aside>
  );
}

export function ViewerToolbar({ machine, onOpenShortcuts }: ViewerToolbarProps): JSX.Element {
  const activePreset = useViewerStore((state) => state.cameraPreset);
  const setCameraPreset = useViewerStore((state) => state.setCameraPreset);
  const resetView = useViewerStore((state) => state.resetView);

  const getShareState = React.useCallback(
    () => buildViewerShareState(useViewerStore.getState()),
    [],
  );

  return (
    <>
    <div className="pointer-events-none absolute inset-x-3 top-3 z-10 flex flex-wrap gap-2">
      <div className="pointer-events-auto glass-panel rounded-2xl p-2">
        <div className="flex flex-wrap gap-2" role="group" aria-label="Camera presets">
          {cameraPresetOrder.map((preset, index) => (
            <button
              key={preset}
              className="control-button px-3 py-2 text-xs capitalize"
              type="button"
              aria-pressed={activePreset === preset}
              title={`Camera preset ${index + 1}: ${preset}`}
              onClick={() => setCameraPreset(preset)}
            >
              {preset}
            </button>
          ))}
          <button
            className="control-button px-3 py-2 text-xs"
            type="button"
            onClick={() => resetView(machine.parts.map((part) => part.id))}
          >
            Reset
          </button>
        </div>
      </div>
    </div>

      {/* Copy link + Shortcuts pinned to the bottom-right so they no longer overlay
          the model beneath the top camera controls (was especially intrusive on mobile). */}
      <div className="pointer-events-auto glass-panel absolute bottom-3 right-3 z-10 flex flex-wrap items-center gap-2 rounded-2xl p-2">
        <ShareLinkButton getShareState={getShareState} />
        <button className="control-button px-3 py-2 text-sm" type="button" onClick={onOpenShortcuts}>
          Shortcuts
        </button>
      </div>
    </>
  );
}

function partSpecs(part: MachinePart): JSX.Element | null {
  const entries = Object.entries(part.specs ?? {});

  if (entries.length === 0) {
    return null;
  }

  return (
    <dl className="mt-3 grid grid-cols-2 gap-2">
      {entries.map(([label, value]) => (
        <div key={label} className="rounded-xl border border-[var(--color-border)] bg-black/15 p-2">
          <dt className="text-[0.65rem] uppercase tracking-[0.18em] text-[var(--color-text-subtle)]">
            {label}
          </dt>
          <dd className="mt-1 text-xs font-semibold text-white">{value}</dd>
        </div>
      ))}
    </dl>
  );
}

export function PartDetailDrawer({ machine }: ViewerPanelProps): JSX.Element {
  const selectedPartId = useViewerStore((state) => state.selectedPartId);
  const selectPart = useViewerStore((state) => state.selectPart);
  const part = machine.parts.find((candidate) => candidate.id === selectedPartId);

  return (
    <aside
      className={`fixed bottom-4 right-4 z-30 w-[min(28rem,calc(100vw-2rem))] rounded-3xl transition ${
        part ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-6 opacity-0"
      }`}
      aria-live="polite"
      aria-label="Selected component details"
    >
      <div className="glass-panel rounded-3xl p-5">
        {part ? (
          <>
            <div className="flex items-start justify-between gap-4">
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-accent)]">
                  Selected part
                </p>
                <h2 className="mt-2 text-xl font-semibold text-white">{part.name}</h2>
              </div>
              <button
                className="control-button px-3 py-2 text-sm"
                type="button"
                aria-label="Close selected part drawer"
                onClick={() => selectPart(null)}
              >
                Close
              </button>
            </div>
            <p className="mt-3 text-sm leading-6 text-[var(--color-text-muted)]">
              {part.description}
            </p>
            <p className="mt-3 rounded-2xl border border-[var(--color-border)] bg-black/10 p-3 text-xs leading-5 text-[var(--color-text-muted)]">
              Role: <span className="font-semibold text-white">{part.role}</span>
            </p>
            {partSpecs(part)}
          </>
        ) : null}
      </div>
    </aside>
  );
}

function useFps(): number {
  const [fps, setFps] = React.useState(0);

  React.useEffect(() => {
    let frameCount = 0;
    let lastTime = performance.now();
    let raf = 0;

    const tick = (time: number) => {
      frameCount += 1;

      if (time - lastTime >= 500) {
        setFps(Math.round((frameCount * 1000) / (time - lastTime)));
        frameCount = 0;
        lastTime = time;
      }

      raf = window.requestAnimationFrame(tick);
    };

    raf = window.requestAnimationFrame(tick);
    return () => window.cancelAnimationFrame(raf);
  }, []);

  return fps;
}

export function ViewerStatusBar({ machine }: ViewerPanelProps): JSX.Element {
  const fps = useFps();
  const hiddenPartIds = useViewerStore((state) => state.hiddenPartIds);
  const selectedPartId = useViewerStore((state) => state.selectedPartId);
  const playback = useViewerStore((state) => state.playback);
  const visibleCount = machine.parts.length - hiddenPartIds.length;
  const selectedPart = machine.parts.find((part) => part.id === selectedPartId);

  return (
    <footer className="glass-panel flex flex-wrap items-center justify-between gap-3 rounded-3xl px-4 py-3 text-xs text-[var(--color-text-muted)]">
      <div className="flex flex-wrap items-center gap-3">
        <span className="font-semibold text-white">{machine.title}</span>
        <span>{machine.category}</span>
        <span className="tabular-nums">
          Parts {visibleCount}/{machine.parts.length}
        </span>
        <span className="tabular-nums">FPS {fps || "—"}</span>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <span className="tabular-nums">RPM {Math.round(playback.rpm)}</span>
        <span>{playback.isPlaying ? "Playing" : "Paused"}</span>
        <span>{selectedPart ? `Selected: ${selectedPart.name}` : "No part selected"}</span>
      </div>
    </footer>
  );
}

export function applyTourStep(machine: MachineDefinition, step: GuidedTourStep): void {
  const store = useViewerStore.getState();

  if (step.partId) {
    store.selectPart(step.partId);
  }

  if (isCameraPreset(step.cameraPreset)) {
    store.setCameraPreset(step.cameraPreset as CameraPreset);
  }

  store.setAnnotations(true);
}