import React from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import type { GuidedTourSnapshot } from '../../animations/guidedTour';

export interface GuidedTourOverlayProps {
  snapshot: GuidedTourSnapshot;
  onPlay: () => void;
  onPause: () => void;
  onRestart: (autoPlay?: boolean) => void;
  onNext: () => void;
  onPrevious: () => void;
}

export function GuidedTourOverlay({
  snapshot,
  onPlay,
  onPause,
  onRestart,
  onNext,
  onPrevious,
}: GuidedTourOverlayProps): JSX.Element {
  const step = snapshot.currentStep;
  const isPlaying = snapshot.status === 'playing';

  return (
    <section
      aria-label="Guided tour"
      className="pointer-events-auto rounded-2xl border border-white/10 bg-[#121721]/90 p-4 shadow-2xl shadow-black/30 backdrop-blur"
    >
      <div className="mb-3 flex items-start justify-between gap-3">
        <div>
          <h2 className="text-sm font-semibold text-slate-100">Guided tour</h2>
          <p className="font-mono text-xs text-slate-400">
            Step {snapshot.currentStepIndex + 1}
            {snapshot.status === 'complete' ? ' · complete' : ''}
          </p>
        </div>
        <button
          type="button"
          onClick={isPlaying ? onPause : onPlay}
          className="rounded-lg bg-amber-400 px-3 py-1.5 text-xs font-semibold text-slate-950 transition hover:bg-amber-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-200"
        >
          {isPlaying ? 'Pause' : 'Start'}
        </button>
      </div>

      <div className="mb-3 h-1.5 overflow-hidden rounded-full bg-white/10">
        <div
          className="h-full rounded-full bg-gradient-to-r from-sky-400 to-amber-300 transition-[width]"
          style={{ width: `${Math.round(snapshot.progress * 100)}%` }}
        />
      </div>

      <AnimatePresence mode="wait">
        <motion.div
          key={step?.id ?? 'empty'}
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -8 }}
          transition={{ duration: snapshot.reducedMotion ? 0 : 0.22 }}
          className="min-h-[7rem]"
        >
          {step ? (
            <>
              <h3 className="text-base font-semibold text-white">{step.title}</h3>
              <p className="mt-2 text-sm leading-6 text-slate-300">{step.body}</p>
              {step.partIds.length > 0 && (
                <div className="mt-3 flex flex-wrap gap-1.5">
                  {step.partIds.map((partId) => (
                    <span
                      key={partId}
                      className="rounded-full border border-sky-400/20 bg-sky-400/10 px-2 py-1 font-mono text-[10px] text-sky-100"
                    >
                      {partId}
                    </span>
                  ))}
                </div>
              )}
            </>
          ) : (
            <p className="text-sm text-slate-400">No guided tour is available for this machine.</p>
          )}
        </motion.div>
      </AnimatePresence>

      <div className="mt-4 grid grid-cols-3 gap-2">
        <button
          type="button"
          onClick={onPrevious}
          className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-slate-100 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
        >
          Previous
        </button>
        <button
          type="button"
          onClick={() => onRestart(true)}
          className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-slate-100 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
        >
          Restart
        </button>
        <button
          type="button"
          onClick={onNext}
          className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-slate-100 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300"
        >
          Next
        </button>
      </div>
    </section>
  );
}