import { useState } from "react";
import { Mic, Hand, Share2 } from "lucide-react";
import { useMutation } from "@tanstack/react-query";
import { apiRequest, queryClient } from "@/lib/queryClient";

const SLIDES = [
  {
    title: "Tap to record",
    body: "Einmal tippen, schon läuft die Aufnahme. Pause, Stop und Marker sind nur einen Daumen entfernt.",
    icon: <Mic className="w-12 h-12 text-white" strokeWidth={2} />,
  },
  {
    title: "Swipe to manage",
    body: "Nach links wischen löscht, nach rechts wischen teilt. Filtere nach markiert oder dieser Woche.",
    icon: <Hand className="w-12 h-12 text-white" strokeWidth={2} />,
  },
  {
    title: "Share in one tap",
    body: "Schneide deine Aufnahme an, setze Marker und teile sie als MP3, WAV oder per Mail.",
    icon: <Share2 className="w-12 h-12 text-white" strokeWidth={2} />,
  },
];

export function Onboarding({ onDone }: { onDone: () => void }) {
  const [step, setStep] = useState(0);
  const [askingPermission, setAskingPermission] = useState(false);

  const completeMutation = useMutation({
    mutationFn: async () => apiRequest("PATCH", "/api/settings", { onboardingDone: 1 }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/settings"] });
      onDone();
    },
  });

  const next = () => {
    if (step < SLIDES.length - 1) setStep((s) => s + 1);
    else setAskingPermission(true);
  };

  const [permError, setPermError] = useState<string | null>(null);
  const [requesting, setRequesting] = useState(false);

  const grant = async () => {
    setPermError(null);
    setRequesting(true);
    try {
      // Echter Permission-Prompt. Wir stoppen die Tracks sofort wieder –
      // der eigentliche Recorder öffnet später sein eigenes Stream.
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      stream.getTracks().forEach((t) => t.stop());
      completeMutation.mutate();
    } catch (err: any) {
      const name = err?.name || "";
      if (name === "NotAllowedError" || name === "SecurityError") {
        setPermError("Mikrofon-Zugriff wurde abgelehnt. Du kannst Tapecast trotzdem nutzen und sp\u00e4ter erlauben.");
      } else if (name === "NotFoundError") {
        setPermError("Kein Mikrofon gefunden. Schlie\u00df eins an oder pr\u00fcf die Systemeinstellungen.");
      } else {
        setPermError("Mikrofon konnte nicht ge\u00f6ffnet werden. Du kannst trotzdem fortfahren.");
      }
    } finally {
      setRequesting(false);
    }
  };

  const skip = () => {
    completeMutation.mutate();
  };

  if (askingPermission) {
    return (
      <div className="fixed inset-0 z-50 bg-background flex flex-col safe-top safe-bottom">
        <div className="flex-1 flex flex-col items-center justify-center px-8 text-center">
          <div className="w-20 h-20 rounded-3xl bg-accent-red flex items-center justify-center mb-6 shadow-lg" style={{ boxShadow: "0 12px 40px rgba(255,59,48,0.35)" }}>
            <Mic className="w-10 h-10 text-white" />
          </div>
          <h2 className="text-2xl font-semibold tracking-tight mb-3">Mikrofon freigeben</h2>
          <p className="text-sm text-muted-foreground leading-relaxed max-w-xs">
            Tapecast braucht Zugriff auf dein Mikrofon, um Aufnahmen zu starten. Du kannst die Erlaubnis jederzeit in den Einstellungen ändern.
          </p>
          {permError && (
            <p className="text-[12px] text-accent-red mt-4 max-w-xs leading-snug">{permError}</p>
          )}
        </div>
        <div className="px-6 pb-8 space-y-2">
          <button
            onClick={grant}
            disabled={requesting}
            className="w-full h-12 rounded-full bg-accent-red text-white font-medium text-sm active:scale-[0.98] transition shadow-lg disabled:opacity-60"
            style={{ boxShadow: "0 8px 24px rgba(255,59,48,0.3)" }}
            data-testid="button-permission-grant"
          >
            {requesting ? "Frage Mikrofon an \u2026" : permError ? "Nochmal versuchen" : "Erlauben"}
          </button>
          <button
            onClick={skip}
            className="w-full h-12 rounded-full text-muted-foreground text-sm"
            data-testid="button-permission-skip"
          >
            Später
          </button>
        </div>
      </div>
    );
  }

  const slide = SLIDES[step];

  return (
    <div className="fixed inset-0 z-50 bg-background flex flex-col safe-top safe-bottom">
      <div className="flex justify-end px-5 pt-4">
        <button
          onClick={skip}
          className="text-sm text-muted-foreground tap-target px-2 h-9 flex items-center"
          data-testid="button-skip"
        >
          Überspringen
        </button>
      </div>

      <div className="flex-1 flex flex-col items-center justify-center px-8 text-center anim-fade" key={step}>
        <div className="w-24 h-24 rounded-3xl bg-accent-red flex items-center justify-center mb-8 shadow-lg" style={{ boxShadow: "0 12px 40px rgba(255,59,48,0.35)" }}>
          {slide.icon}
        </div>
        <h2 className="text-2xl font-semibold tracking-tight mb-3">{slide.title}</h2>
        <p className="text-sm text-muted-foreground leading-relaxed max-w-xs">{slide.body}</p>
      </div>

      <div className="px-6 pb-8 space-y-5">
        <div className="flex justify-center gap-2">
          {SLIDES.map((_, i) => (
            <div
              key={i}
              className={`h-1.5 rounded-full transition-all ${
                i === step ? "w-6 bg-accent-red" : "w-1.5 bg-muted-foreground/30"
              }`}
            />
          ))}
        </div>
        <button
          onClick={next}
          className="w-full h-12 rounded-full bg-accent-red text-white font-medium text-sm active:scale-[0.98] transition shadow-lg"
          style={{ boxShadow: "0 8px 24px rgba(255,59,48,0.3)" }}
          data-testid="button-next"
        >
          {step < SLIDES.length - 1 ? "Weiter" : "Loslegen"}
        </button>
      </div>
    </div>
  );
}
