import { useEffect, useState } from 'react';

import { useViewerStore } from '../../store/viewerStore';
import { CAMERA_PRESET_ORDER, CAMERA_PRESETS } from '../../three/cameraPresets';

export interface ViewerToolbarProps {
  onCopyShareLink?: () => Promise<string>;
  className?: string;
}

export function ViewerToolbar({ onCopyShareLink, className = '' }: ViewerToolbarProps) {
  const requestCameraPreset = useViewerStore((state) => state.requestCameraPreset);
  const requestCameraReset = useViewerStore((state) => state.requestCameraReset);
  const [shareState, setShareState] = useState<'idle' | 'copied' | 'error'>('idle');

  useEffect(() => {
    if (shareState === 'idle') {
      return undefined;
    }

    const timeoutId = window.setTimeout(() => setShareState('idle'), 1800);
    return () => window.clearTimeout(timeoutId);
  }, [shareState]);

  return (
    <div
      className={`pointer-events-none absolute left-4 right-4 top-4 z-20 flex flex-wrap items-center justify-between gap-3 ${className}`}
      aria-label="Viewer toolbar"
    >
      <div className="pointer-events-auto flex flex-wrap gap-2 rounded-2xl border border-white/10 bg-[#0B0E14]/70 p-2 shadow-xl shadow-black/25 backdrop-blur-md">
        {CAMERA_PRESET_ORDER.map((presetId) => {
          const preset = CAMERA_PRESETS[presetId];

          return (
            <button
              key={preset.id}
              type="button"
              className="rounded-xl border border-white/10 bg-white/[0.035] px-3 py-2 text-xs font-semibold text-slate-300 transition hover:border-sky-300/50 hover:bg-sky-400/10 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300"
              onClick={() => requestCameraPreset(preset.id)}
              aria-label={preset.ariaLabel}
            >
              {preset.label}
            </button>
          );
        })}
        <button
          type="button"
          className="rounded-xl border border-white/10 bg-white/[0.035] px-3 py-2 text-xs font-semibold text-slate-300 transition hover:border-amber-300/50 hover:bg-amber-300/10 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300"
          onClick={requestCameraReset}
        >
          Reset
        </button>
      </div>

      <div className="pointer-events-auto flex items-center gap-2 rounded-2xl border border-white/10 bg-[#0B0E14]/70 p-2 shadow-xl shadow-black/25 backdrop-blur-md">
        <button
          type="button"
          className="rounded-xl border border-sky-300/30 bg-sky-400/10 px-3 py-2 text-xs font-semibold text-sky-100 transition hover:border-sky-200 hover:bg-sky-400/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300"
          onClick={async () => {
            if (!onCopyShareLink) {
              return;
            }

            try {
              await onCopyShareLink();
              setShareState('copied');
            } catch {
              setShareState('error');
            }
          }}
        >
          {shareState === 'copied'
            ? 'Copied'
            : shareState === 'error'
              ? 'Copy failed'
              : 'Copy link'}
        </button>
      </div>
    </div>
  );
}