"use client";

import { useState, useTransition } from "react";
import { dismissOnboardingTipsAction } from "@/lib/actions/profile";

// Ersteinrichtungs-Tour fürs Konto-Dashboard (Onboarding-System, 25.09.2026,
// Nutzer-Vorbild: Lightroom) - eine Komponente für beide Zielgruppen
// (Mitarbeiter/Kunde), die Seite übergibt nur den passenden Tipp-Inhalt.
// Einmal pro Konto (Client.onboardingTipsSeenAt), egal ob per Klick durch
// alle Schritte oder per Überspringen/Backdrop-Klick beendet - beides
// zählt als "gesehen", kein erzwungenes Durchklicken.
export type QuickTip = { title: string; description: string };

export function QuickTipsModal({ tips }: { tips: QuickTip[] }) {
  const [open, setOpen] = useState(true);
  const [step, setStep] = useState(0);
  const [, startTransition] = useTransition();

  if (!open || tips.length === 0) return null;

  function dismiss() {
    setOpen(false);
    startTransition(() => dismissOnboardingTipsAction());
  }

  const tip = tips[step];
  const isLast = step === tips.length - 1;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true" aria-label={tip.title}>
      <div className="absolute inset-0 bg-black/75 backdrop-blur-sm" onClick={dismiss} />
      <div className="relative w-full max-w-md rounded-2xl border border-white/10 bg-[var(--rk-surface)] p-6 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.7)]">
        <div className="flex items-center justify-between">
          <p className="text-xs uppercase tracking-[0.2em] text-[var(--rk-ink-muted)]">
            Tipp {step + 1} / {tips.length}
          </p>
          <button
            type="button"
            onClick={dismiss}
            aria-label="Schließen"
            className="text-[var(--rk-ink-muted)] transition-colors hover:text-[var(--rk-ink)]"
          >
            ✕
          </button>
        </div>

        <h3 className="rk-wordmark text-lg mt-3">{tip.title}</h3>
        <p className="mt-2 text-sm leading-relaxed text-[var(--rk-ink-muted)]">{tip.description}</p>

        <div className="mt-6 flex items-center justify-between gap-3">
          <div className="flex gap-1.5">
            {tips.map((_, i) => (
              <span
                key={i}
                className={`h-1.5 w-1.5 rounded-full transition-colors ${i === step ? "bg-[var(--rk-accent)]" : "bg-white/15"}`}
              />
            ))}
          </div>
          <div className="flex gap-2">
            {step > 0 && (
              <button
                type="button"
                onClick={() => setStep((s) => s - 1)}
                className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] transition-colors px-3 py-2"
              >
                Zurück
              </button>
            )}
            <button
              type="button"
              onClick={() => (isLast ? dismiss() : setStep((s) => s + 1))}
              className="rounded-lg bg-[var(--rk-accent)] px-5 py-2 text-xs font-semibold uppercase tracking-[0.15em] text-[#141413] transition-opacity hover:opacity-90"
            >
              {isLast ? "Los geht's" : "Weiter"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}