import { useViewerStore } from '../../store/viewerStore';
import type { Axis } from '../../types/viewer';

export interface ViewerControlsPanelProps {
  className?: string;
}

const AXES: Axis[] = ['x', 'y', 'z'];

export function ViewerControlsPanel({ className = '' }: ViewerControlsPanelProps) {
  const display = useViewerStore((state) => state.display);
  const setExplodedView = useViewerStore((state) => state.setExplodedView);
  const setWireframe = useViewerStore((state) => state.setWireframe);
  const setAnnotations = useViewerStore((state) => state.setAnnotations);
  const setGrid = useViewerStore((state) => state.setGrid);
  const setShadows = useViewerStore((state) => state.setShadows);
  const setExposure = useViewerStore((state) => state.setExposure);
  const setCrossSection = useViewerStore((state) => state.setCrossSection);

  return (
    <aside
      className={`flex min-h-0 flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#121721]/92 shadow-xl shadow-black/20 backdrop-blur-xl ${className}`}
      aria-label="Viewer controls"
    >
      <div className="border-b border-white/10 p-4">
        <h2 className="text-sm font-semibold uppercase tracking-[0.18em] text-slate-100">
          Viewer Controls
        </h2>
        <p className="mt-1 text-xs text-slate-400">
          Display modes, exploded view, cross-section, and render fidelity.
        </p>
      </div>

      <div className="min-h-0 flex-1 space-y-5 overflow-y-auto p-4">
        <section>
          <div className="mb-3 flex items-center justify-between gap-3">
            <h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-300">
              Exploded View
            </h3>
            <Toggle
              checked={display.exploded.enabled}
              onChange={(checked) => setExplodedView({ enabled: checked })}
              label="Toggle exploded view"
            />
          </div>

          <label className="grid grid-cols-[1fr_52px] items-center gap-3 text-xs text-slate-400">
            <input
              type="range"
              min={0}
              max={4}
              step={0.05}
              value={display.exploded.distance}
              onChange={(event) =>
                setExplodedView({
                  enabled: Number(event.target.value) > 0,
                  distance: Number(event.target.value)
                })
              }
              className="accent-amber-300"
              aria-label="Exploded view separation distance"
            />
            <span className="text-right font-mono text-slate-300">
              {display.exploded.distance.toFixed(2)}
            </span>
          </label>
        </section>

        <Section title="Display">
          <ControlRow label="Wireframe">
            <Toggle checked={display.wireframe} onChange={setWireframe} label="Toggle wireframe mode" />
          </ControlRow>
          <ControlRow label="Annotations">
            <Toggle checked={display.annotations} onChange={setAnnotations} label="Toggle annotation labels" />
          </ControlRow>
          <ControlRow label="Soft shadows">
            <Toggle checked={display.shadows} onChange={setShadows} label="Toggle soft shadows" />
          </ControlRow>
          <ControlRow label="Reference grid">
            <Toggle checked={display.grid} onChange={setGrid} label="Toggle reference grid" />
          </ControlRow>
          <label className="grid grid-cols-[92px_1fr_42px] items-center gap-2 text-xs text-slate-400">
            <span>Exposure</span>
            <input
              type="range"
              min={0.35}
              max={1.8}
              step={0.01}
              value={display.exposure}
              onChange={(event) => setExposure(Number(event.target.value))}
              className="accent-sky-400"
              aria-label="Viewer exposure"
            />
            <span className="text-right font-mono text-slate-300">
              {display.exposure.toFixed(2)}
            </span>
          </label>
        </Section>

        <Section title="Cross-section">
          <ControlRow label="Enabled">
            <Toggle
              checked={display.crossSection.enabled}
              onChange={(checked) => setCrossSection({ enabled: checked })}
              label="Toggle cross-section clipping"
            />
          </ControlRow>

          <div className="grid grid-cols-3 gap-2" role="group" aria-label="Cross-section axis">
            {AXES.map((axis) => (
              <button
                key={axis}
                type="button"
                className={`rounded-lg border px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300 ${
                  display.crossSection.axis === axis
                    ? 'border-sky-300/60 bg-sky-400/15 text-sky-100'
                    : 'border-white/10 bg-white/[0.035] text-slate-400 hover:border-white/25 hover:text-white'
                }`}
                onClick={() => setCrossSection({ axis })}
              >
                {axis}
              </button>
            ))}
          </div>

          <label className="grid grid-cols-[64px_1fr_54px] items-center gap-2 text-xs text-slate-400">
            <span>Offset</span>
            <input
              type="range"
              min={-3.5}
              max={3.5}
              step={0.01}
              value={display.crossSection.offset}
              onChange={(event) => setCrossSection({ offset: Number(event.target.value) })}
              className="accent-sky-400"
              aria-label="Cross-section offset"
            />
            <span className="text-right font-mono text-slate-300">
              {display.crossSection.offset.toFixed(2)}
            </span>
          </label>

          <ControlRow label="Invert plane">
            <Toggle
              checked={display.crossSection.invert}
              onChange={(checked) => setCrossSection({ invert: checked })}
              label="Invert cross-section plane"
            />
          </ControlRow>
        </Section>
      </div>
    </aside>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="rounded-2xl border border-white/10 bg-[#0B0E14]/38 p-3">
      <h3 className="mb-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-300">
        {title}
      </h3>
      <div className="space-y-3">{children}</div>
    </section>
  );
}

function ControlRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex items-center justify-between gap-3 text-xs text-slate-400">
      <span>{label}</span>
      {children}
    </div>
  );
}

function Toggle({
  checked,
  onChange,
  label
}: {
  checked: boolean;
  onChange: (checked: boolean) => void;
  label: string;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={label}
      onClick={() => onChange(!checked)}
      className={`relative h-6 w-11 rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300 ${
        checked ? 'border-sky-300/60 bg-sky-400/40' : 'border-white/15 bg-white/5'
      }`}
    >
      <span
        className={`absolute top-1 h-4 w-4 rounded-full bg-white shadow transition-transform ${
          checked ? 'translate-x-5' : 'translate-x-1'
        }`}
      />
    </button>
  );
}