"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";

/**
 * Multi-step onboarding wizard za nove partnere.
 *
 * Tok: 5 koraka — svaki korak ima glavni CTA (vodi na akciju) + "Preskoči",
 * a prikazuje se SAMO prvi put nakon prijave (čuvamo `bp.onboardingComplete`
 * u localStorage). Vlasnik može da ga ponovo otvori klikom na "Onboarding"
 * u dock-u ili kroz checklist sekciju.
 *
 * Cilj: doneti partnera od "praznog profila" do "prvi Boost u korpi" za
 * 5-10 minuta. Industrijski standard za activation rate: 30-50% u prvoj
 * sesiji vs ~10% bez wizard-a.
 */

type Step = {
  key: string;
  title: string;
  description: string;
  ctaLabel: string;
  ctaHref: string;
  /** Kratak hint koji ide ispod CTA. */
  hint: string;
  /** Samo informativni? Ako true, "Preskoči" postaje "Sledeći". */
  informational?: boolean;
};

type Props = {
  /** Da li je partner već popunio osnovni profil (logo + opis). Ako je — preskačemo step 1. */
  hasBasicProfile: boolean;
  /** Da li je profil verifikovan barem na nivou 1 (email). */
  hasEmailVerification: boolean;
  /** Da li firma već ima ijedan boost (eligibility za 50% popust). */
  hasFirstBoost: boolean;
  /** Forsiraj otvoreno (ignoriše localStorage flag). Korisno za "Otvori onboarding" link. */
  forceOpen?: boolean;
};

const STORAGE_KEY = "bp.partner.onboardingComplete";

export function PortalOnboardingWizard({
  hasBasicProfile,
  hasEmailVerification,
  hasFirstBoost,
  forceOpen,
}: Props) {
  const [open, setOpen] = useState(false);
  const [stepIdx, setStepIdx] = useState(0);

  useEffect(() => {
    if (forceOpen) {
      window.requestAnimationFrame(() => setOpen(true));
      return;
    }
    if (typeof window === "undefined") return;
    const done = window.localStorage.getItem(STORAGE_KEY) === "1";
    // Prikaži samo ako profil nije baziran (ima šta da uradi).
    if (!done && (!hasBasicProfile || !hasEmailVerification || !hasFirstBoost)) {
      // Mali delay da ne bukne pre nego što se layout renderuje.
      const t = window.setTimeout(() => setOpen(true), 600);
      return () => window.clearTimeout(t);
    }
  }, [forceOpen, hasBasicProfile, hasEmailVerification, hasFirstBoost]);

  const steps: Step[] = [
    {
      key: "welcome",
      title: "Dobrodošao na BiznisPortal Partner",
      description:
        "Vodimo te kroz 4 brza koraka koji će tvoj profil dovesti u top 20% — sa istim sadržajem dobijaš 3-5× više klikova i upita.",
      ctaLabel: "Krenimo →",
      ctaHref: "#",
      hint: "Cela tura traje oko 5 minuta. Možeš preskočiti bilo koji korak.",
      informational: true,
    },
    {
      key: "profile",
      title: "1. Popuni osnovni profil",
      description:
        "Logo, cover fotka, opis (200+ karaktera), kontakt podaci i radno vreme. Ovo Google obožava — direktna veza sa rangom.",
      ctaLabel: hasBasicProfile ? "Profil je popunjen ✓" : "Otvori uređivanje profila",
      ctaHref: "/portal#profil",
      hint: "5+ fotki utrostručuje vreme zadržavanja na profilu.",
    },
    {
      key: "verification",
      title: "2. Verifikuj profil",
      description:
        "Email + telefon + APR PIB → Trust badge na javnom prikazu. Verifikovani profili imaju 3× više upita.",
      ctaLabel: hasEmailVerification ? "Verifikacija u toku ✓" : "Otvori verifikaciju",
      ctaHref: "/portal/verifikacija",
      hint: "APR provera je automatska — uneseš PIB, mi povučemo podatke iz registra.",
    },
    {
      key: "push",
      title: "3. Uključi notifikacije",
      description:
        "Dobijaj zvonjavu odmah kada ti stigne nova poruka — bez čekanja, bez propuštenih klijenata.",
      ctaLabel: "Idi do podešavanja notifikacija",
      ctaHref: "/portal#push-notifications",
      hint: "Brzina odgovora direktno utiče na konverziju upita u kupce.",
    },
    {
      key: "boost",
      title: "4. Pokreni prvi Boost (50% popust)",
      description: hasFirstBoost
        ? "Već si probao Boost — odlično! Pogledaj ROI panel da vidiš koliko su pregledi porasli."
        : "Tvoj prvi Boost je 50% jeftiniji. Bilo koji paket — modul početna, lokalna pretraga ili hero sekcija.",
      ctaLabel: hasFirstBoost ? "Otvori ROI panel" : "Otvori Boost marketplace",
      ctaHref: "/portal/boost",
      hint: "Boost-ovani oglasi se sortiraju iznad svih ostalih — bez obzira na korisnikov sort.",
    },
  ];

  const total = steps.length;
  const step = steps[stepIdx];
  const isLast = stepIdx === total - 1;

  function close(markComplete = true) {
    setOpen(false);
    if (markComplete && typeof window !== "undefined") {
      window.localStorage.setItem(STORAGE_KEY, "1");
    }
  }

  function next() {
    if (isLast) {
      close(true);
    } else {
      setStepIdx((i) => Math.min(total - 1, i + 1));
    }
  }

  function prev() {
    setStepIdx((i) => Math.max(0, i - 1));
  }

  // ESC za zatvaranje + zaključaj body scroll dok je modal otvoren.
  // Bez ovoga korisnik može da skroluje sadržaj ispod backdrop-a, što
  // ostavlja utisak da je modal "negde u stranici" umesto preko ekrana.
  useEffect(() => {
    if (!open) return;
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") close(true);
    }
    const prevOverflow = document.body.style.overflow;
    const prevPaddingRight = document.body.style.paddingRight;
    // Spreči layout shift od nestanka scrollbar-a (desktop).
    const scrollbarW = window.innerWidth - document.documentElement.clientWidth;
    document.body.style.overflow = "hidden";
    if (scrollbarW > 0) {
      document.body.style.paddingRight = `${scrollbarW}px`;
    }
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prevOverflow;
      document.body.style.paddingRight = prevPaddingRight;
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  if (!open) return null;
  if (typeof document === "undefined") return null;

  // ⚠️ KRITIČNO: Renderujemo kroz React portal direktno u document.body.
  // Bez ovoga, `position: fixed` može da se sruči na ancestor element koji
  // ima `transform`, `filter`, `backdrop-filter`, `will-change`, `contain`
  // ili `perspective` — i tada modal završi centriran na sredini cele
  // stranice (3000px+), ne viewport-a. Portal garantuje da je modal
  // odvojen od svih ancestor stacking context-a.
  return createPortal(
    <div
      className="fixed inset-0 z-[200] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm"
      style={{
        // Eksplicitno setujemo top/left/right/bottom da nadjačamo bilo
        // koji potencijalni Tailwind override. inset-0 = sve 0, ali
        // dodajemo i direktno za 100% sigurnost u svim browser-ima.
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      }}
      onClick={(e) => {
        // Klik na backdrop zatvara modal (klik na sam dialog ne propagira).
        if (e.target === e.currentTarget) close(true);
      }}
      role="dialog"
      aria-modal="true"
      aria-labelledby="portal-onboarding-title"
    >
      <div
        className="relative w-full max-w-lg overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-950 shadow-[0_24px_60px_rgba(0,0,0,0.5)]"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Progress */}
        <div className="flex h-1 bg-zinc-900">
          {steps.map((_, i) => (
            <div
              key={i}
              className={`flex-1 transition ${i <= stepIdx ? "bg-orange-500" : "bg-zinc-800"}`}
            />
          ))}
        </div>

        {/* Close × */}
        <button
          type="button"
          onClick={() => close(true)}
          aria-label="Zatvori onboarding"
          className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition hover:bg-zinc-900 hover:text-white"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>

        <div className="px-7 pb-7 pt-10">
          <p className="text-[0.68rem] font-extrabold uppercase tracking-[0.20em] text-orange-400">
            Korak {stepIdx + 1} od {total}
          </p>
          <h2 className="mt-2 font-display text-[1.55rem] font-bold leading-tight text-white">
            {step.title}
          </h2>
          <p className="mt-3 text-[0.92rem] leading-relaxed text-zinc-300">
            {step.description}
          </p>
          <p className="mt-3 text-[0.78rem] leading-relaxed text-zinc-500">{step.hint}</p>

          {/* Actions */}
          <div className="mt-7 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex gap-2">
              {stepIdx > 0 && (
                <button
                  type="button"
                  onClick={prev}
                  className="rounded-lg border border-zinc-700 px-4 py-2 text-sm font-semibold text-zinc-300 transition hover:bg-zinc-900"
                >
                  ← Nazad
                </button>
              )}
              <button
                type="button"
                onClick={next}
                className="rounded-lg border border-zinc-800 px-4 py-2 text-sm font-semibold text-zinc-300 transition hover:bg-zinc-900"
              >
                {step.informational ? "Dalje" : isLast ? "Završi" : "Preskoči"}
              </button>
            </div>

            {step.ctaHref !== "#" && (
              <Link
                href={step.ctaHref}
                onClick={() => close(true)}
                className="inline-flex items-center justify-center gap-2 rounded-lg bg-orange-500 px-5 py-2.5 text-sm font-bold text-zinc-950 transition hover:bg-orange-400"
              >
                {step.ctaLabel}
              </Link>
            )}
            {step.ctaHref === "#" && (
              <button
                type="button"
                onClick={next}
                className="inline-flex items-center justify-center gap-2 rounded-lg bg-orange-500 px-5 py-2.5 text-sm font-bold text-zinc-950 transition hover:bg-orange-400"
              >
                {step.ctaLabel}
              </button>
            )}
          </div>

          <p className="mt-4 text-center text-[0.7rem] text-zinc-500">
            Možeš ponovo otvoriti onboarding iz &bdquo;Onboarding&rdquo; sekcije u dock-u.
          </p>
        </div>
      </div>
    </div>,
    document.body,
  );
}