import { Button } from '../ui/Button';
import { Panel } from '../ui/Panel';
import type { MachineRegistryEntry } from '../../modules/machines/schema';
import { DISPLAY_MODES, CROSS_SECTION_AXES } from '../../types/viewer';
import type { CrossSectionAxis, DisplayMode } from '../../types/viewer';
import { useViewerStore } from '../../store/viewerStore';

interface ControlPanelProps {
  machine: MachineRegistryEntry;
}

const displayModeLabels: Record<DisplayMode, string> = {
  solid: 'Solid',
  wireframe: 'Wireframe',
  xray: 'X-ray'
};

const crossSectionLabels: Record<CrossSectionAxis, string> = {
  none: 'None',
  x: 'X axis',
  y: 'Y axis',
  z: 'Z axis'
};

export function ControlPanel({ machine }: ControlPanelProps) {
  const isPlaying = useViewerStore((state) => state.isPlaying);
  const rpm = useViewerStore((state) => state.rpm);
  const timeScale = useViewerStore((state) => state.timeScale);
  const cycleStepIndex = useViewerStore((state) => state.cycleStepIndex);
  const explodedDistance = useViewerStore((state) => state.explodedDistance);
  const displayMode = useViewerStore((state) => state.displayMode);
  const crossSectionAxis = useViewerStore((state) => state.crossSectionAxis);
  const crossSectionOffset = useViewerStore((state) => state.crossSectionOffset);
  const showAnnotations = useViewerStore((state) => state.showAnnotations);

  const togglePlayback = useViewerStore((state) => state.togglePlayback);
  const restartAnimation = useViewerStore((state) => state.restartAnimation);
  const stepCycle = useViewerStore((state) => state.stepCycle);
  const setRpm = useViewerStore((state) => state.setRpm);
  const setTimeScale = useViewerStore((state) => state.setTimeScale);
  const setExplodedDistance = useViewerStore((state) => state.setExplodedDistance);
  const setDisplayMode = useViewerStore((state) => state.setDisplayMode);
  const setCrossSectionAxis = useViewerStore((state) => state.setCrossSectionAxis);
  const setCrossSectionOffset = useViewerStore((state) => state.setCrossSectionOffset);
  const setShowAnnotations = useViewerStore((state) => state.setShowAnnotations);

  return (
    <Panel className="space-y-5 p-4">
      <div>
        <h2 className="text-sm font-black uppercase tracking-[0.22em] text-white">Controls</h2>
        <p className="mt-1 text-xs leading-5 text-muted">
          Playback and display controls use the shared animation contract for every machine.
        </p>
      </div>

      <section aria-labelledby="playback-heading" className="rounded-2xl border border-line/60 bg-background/42 p-3">
        <h3 className="text-xs font-bold uppercase tracking-[0.18em] text-muted" id="playback-heading">
          Playback
        </h3>
        <div className="mt-3 grid grid-cols-3 gap-2">
          <Button aria-pressed={isPlaying} onClick={togglePlayback} size="sm" variant="primary">
            {isPlaying ? 'Pause' : 'Play'}
          </Button>
          <Button onClick={restartAnimation} size="sm" variant="secondary">
            Restart
          </Button>
          <Button onClick={stepCycle} size="sm" variant="secondary">
            Step
          </Button>
        </div>

        <div className="mt-4">
          <label className="flex justify-between text-xs font-semibold text-muted" htmlFor="rpm-slider">
            <span>RPM</span>
            <span className="text-slate-200">{Math.round(rpm)}</span>
          </label>
          <input
            className="mt-2 w-full accent-primary"
            id="rpm-slider"
            max={machine.animation.rpmRange[1]}
            min={machine.animation.rpmRange[0]}
            onChange={(event) => setRpm(Number(event.currentTarget.value))}
            step="10"
            type="range"
            value={rpm}
          />
        </div>

        <div className="mt-4">
          <label className="flex justify-between text-xs font-semibold text-muted" htmlFor="time-scale-slider">
            <span>Time scale</span>
            <span className="text-slate-200">{timeScale.toFixed(1)}×</span>
          </label>
          <input
            className="mt-2 w-full accent-primary"
            id="time-scale-slider"
            max="3"
            min="0.1"
            onChange={(event) => setTimeScale(Number(event.currentTarget.value))}
            step="0.1"
            type="range"
            value={timeScale}
          />
        </div>

        <p className="mt-3 text-xs text-muted">Cycle step index: {cycleStepIndex}</p>
      </section>

      <section aria-labelledby="display-heading" className="rounded-2xl border border-line/60 bg-background/42 p-3">
        <h3 className="text-xs font-bold uppercase tracking-[0.18em] text-muted" id="display-heading">
          Display
        </h3>

        <div className="mt-3 grid grid-cols-3 gap-2">
          {DISPLAY_MODES.map((mode) => (
            <Button
              aria-pressed={displayMode === mode}
              isActive={displayMode === mode}
              key={mode}
              onClick={() => setDisplayMode(mode)}
              size="sm"
              variant="ghost"
            >
              {displayModeLabels[mode]}
            </Button>
          ))}
        </div>

        <div className="mt-4">
          <label className="flex justify-between text-xs font-semibold text-muted" htmlFor="explode-slider">
            <span>Exploded view</span>
            <span className="text-slate-200">{explodedDistance.toFixed(2)}</span>
          </label>
          <input
            className="mt-2 w-full accent-primary"
            id="explode-slider"
            max="3"
            min="0"
            onChange={(event) => setExplodedDistance(Number(event.currentTarget.value))}
            step="0.05"
            type="range"
            value={explodedDistance}
          />
        </div>

        <div className="mt-4 flex items-center justify-between gap-3">
          <span className="text-xs font-semibold text-muted">Annotations</span>
          <Button
            aria-pressed={showAnnotations}
            isActive={showAnnotations}
            onClick={() => setShowAnnotations(!showAnnotations)}
            size="sm"
            variant="ghost"
          >
            {showAnnotations ? 'Shown' : 'Hidden'}
          </Button>
        </div>
      </section>

      <section aria-labelledby="section-heading" className="rounded-2xl border border-line/60 bg-background/42 p-3">
        <h3 className="text-xs font-bold uppercase tracking-[0.18em] text-muted" id="section-heading">
          Cross-section
        </h3>

        <label className="mt-3 block text-xs font-semibold text-muted" htmlFor="clip-axis">
          Axis
        </label>
        <select
          className="mt-2 h-10 w-full rounded-xl border border-line/70 bg-background/70 px-3 text-sm text-white"
          id="clip-axis"
          onChange={(event) => setCrossSectionAxis(event.currentTarget.value as CrossSectionAxis)}
          value={crossSectionAxis}
        >
          {CROSS_SECTION_AXES.map((axis) => (
            <option key={axis} value={axis}>
              {crossSectionLabels[axis]}
            </option>
          ))}
        </select>

        <label className="mt-4 flex justify-between text-xs font-semibold text-muted" htmlFor="clip-offset">
          <span>Offset</span>
          <span className="text-slate-200">{crossSectionOffset.toFixed(2)}</span>
        </label>
        <input
          className="mt-2 w-full accent-primary disabled:opacity-40"
          disabled={crossSectionAxis === 'none'}
          id="clip-offset"
          max="2"
          min="-2"
          onChange={(event) => setCrossSectionOffset(Number(event.currentTarget.value))}
          step="0.05"
          type="range"
          value={crossSectionOffset}
        />
      </section>
    </Panel>
  );
}