"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";

type PlanCard = {
  id: string;
  slug: string;
  nameSr: string;
  descriptionSr: string | null;
  tier: string;
  priceRsd: number | null;
  durationDays: number | null;
  isFeaturedDefault: boolean;
};

type Props = {
  plans: PlanCard[];
  currentPlanId: string | null;
  currentTier: string | null;
  validUntil: string | null;
};

const TIER_LABELS: Record<string, string> = {
  FREE: "Besplatno",
  STANDARD: "Standard",
  BRONZE: "Bronze",
  SILVER: "Silver",
  GOLD: "Gold",
  // DB enum je PLATINUM, ali se UVEK prikazuje kao "Diamond" (nikad "Platinum").
  PLATINUM: "Diamond",
  DIAMOND: "Diamond",
};

/* ── Rang tier-ova (za upoređivanje "naviše / naniže") ─────────────────── */
const TIER_RANK: Record<string, number> = {
  FREE: 0,
  STANDARD: 0,
  BRONZE: 1,
  SILVER: 2,
  GOLD: 3,
  PLATINUM: 4,
  DIAMOND: 4,
  DIAMOND_BLACK: 5,
};

function rankOf(tier: string | null | undefined): number {
  return TIER_RANK[(tier ?? "").toUpperCase()] ?? 0;
}

/* ── Boje paketa (Bronze / Silver / Gold / Diamond) ───────────────────── */
type TierStyle = { badge: string; chipText: string; ring: string; glow: string };

const TIER_STYLE: Record<string, TierStyle> = {
  BRONZE: { badge: "from-[#b87333] to-[#e3a36a]", chipText: "text-white", ring: "#cd853f", glow: "rgba(205,133,63,0.22)" },
  SILVER: { badge: "from-[#9aa7b4] to-[#d9e0e7]", chipText: "text-[#2b3440]", ring: "#a8b3c0", glow: "rgba(161,173,187,0.28)" },
  GOLD: { badge: "from-[#c99a2f] to-[#f3d27a]", chipText: "text-[#3a2c08]", ring: "#d9af3a", glow: "rgba(201,154,47,0.25)" },
  DIAMOND: { badge: "from-[#0e7290] via-[#1aa3c9] to-[#7fe0ff]", chipText: "text-white", ring: "#39c0e6", glow: "rgba(57,192,230,0.30)" },
  STANDARD: { badge: "from-[#9ca3af] to-[#cbd5e1]", chipText: "text-[#2b3440]", ring: "#cbd5e1", glow: "rgba(148,163,184,0.20)" },
};

function tierStyle(tier: string | null | undefined): TierStyle {
  const t = (tier ?? "").toUpperCase();
  if (t === "PLATINUM" || t === "DIAMOND") return TIER_STYLE.DIAMOND;
  return TIER_STYLE[t] ?? TIER_STYLE.STANDARD;
}

/* ── Potvrda snage trenutnog plana (afirmacija, ne downgrade) ─────────── */
const CURRENT_PITCH: Record<string, { strength: number; headline: string; sub: string }> = {
  BRONZE: {
    strength: 35,
    headline: "Dobar početak — temelj je postavljen.",
    sub: "Tvoj profil je vidljiv. Sledeći nivo otključava kontrolni panel i znatno jaču poziciju u pretrazi.",
  },
  SILVER: {
    strength: 56,
    headline: "Solidno prisustvo — profil već radi za tebe.",
    sub: "Imaš kontrolni panel i verifikaciju. Najveći skok u vidljivosti i autoritetu tek je pred tobom.",
  },
  GOLD: {
    strength: 79,
    headline: "Snažan brend — među ozbiljnim igračima si.",
    sub: "Viši rang, CRM i premium kartica su tvoji. Samo jedan korak te deli od apsolutnog vrha portala.",
  },
  DIAMOND: {
    strength: 96,
    headline: "Na samom vrhu BiznisPortala.",
    sub: "Maksimalan rang, premium prikaz i najjači utisak kvaliteta. Tvoj profil je u eliti — i to se vidi.",
  },
};

function currentPitch(tier: string | null | undefined) {
  const t = (tier ?? "").toUpperCase();
  if (t === "PLATINUM" || t === "DIAMOND") return CURRENT_PITCH.DIAMOND;
  return CURRENT_PITCH[t] ?? CURRENT_PITCH.BRONZE;
}

/* ── "Šta otključavaš" kad pređeš NA ovaj tier ────────────────────────── */
const UPGRADE_PUSH: Record<string, string> = {
  SILVER: "Otključavaš kontrolni panel, verifikovani badge i inbox upita na jednom mestu.",
  GOLD: "Viši rang u pretrazi, Mini CRM i premium kartica profila koja gradi autoritet.",
  DIAMOND: "Maksimalan prioritet u listingu + BP Intelligence i AI optimizator profila.",
};

function upgradePush(tier: string): string {
  const t = tier.toUpperCase();
  if (t === "PLATINUM" || t === "DIAMOND") return UPGRADE_PUSH.DIAMOND;
  return UPGRADE_PUSH[t] ?? "Više vidljivosti, jači rang i premium prikaz tvog profila.";
}

/* ── Motivacioni citat po nivou ───────────────────────────────────────── */
function growthQuote(currentRank: number): string {
  if (currentRank >= TIER_RANK.DIAMOND) {
    return "Vrh nije odredište — to je standard koji se brani svaki dan.";
  }
  if (currentRank >= TIER_RANK.GOLD) {
    return "Razlika između dobrog i najboljeg meri se prioritetom u pretrazi.";
  }
  if (currentRank >= TIER_RANK.SILVER) {
    return "Svaki dan na vrhu rezultata je dan ispred konkurencije.";
  }
  return "Vidljivost se ne čeka — ona se osvaja.";
}

function TierBadge({ tier, size = "sm" }: { tier: string; size?: "sm" | "lg" }) {
  const s = tierStyle(tier);
  const label = TIER_LABELS[(tier ?? "").toUpperCase()] ?? tier;
  const big = size === "lg";
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full bg-gradient-to-br ${s.badge} ${s.chipText} font-bold ${
        big ? "px-3.5 py-1.5 text-sm" : "px-2.5 py-0.5 text-[0.7rem]"
      }`}
      style={{ boxShadow: `0 6px 18px -6px ${s.glow}` }}
    >
      <svg width={big ? 15 : 11} height={big ? 15 : 11} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M6 3h12l4 6-10 12L2 9z" />
      </svg>
      {label}
    </span>
  );
}

function fmtRsd(v: number) {
  return `${new Intl.NumberFormat("sr-RS").format(v)} RSD`;
}

function fmtDate(iso: string | null) {
  if (!iso) return null;
  return new Date(iso).toLocaleDateString("sr-RS", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  });
}

/* ── Diamond Black — VIP nivo po pozivu (uvek korak NAPRED, nikad nazad) ─ */
function DiamondBlackCard({ emphasized }: { emphasized: boolean }) {
  return (
    <div
      className={`relative overflow-hidden rounded-2xl border p-6 text-white ${
        emphasized ? "md:col-span-2 xl:col-span-3" : ""
      }`}
      style={{
        borderColor: "rgba(120,130,150,0.35)",
        background: "linear-gradient(135deg,#0b1220 0%,#161d2e 55%,#0b1220 100%)",
      }}
    >
      <span
        className="pointer-events-none absolute -right-12 -top-12 h-40 w-40 rounded-full blur-3xl"
        style={{ background: "rgba(127,224,255,0.18)" }}
        aria-hidden="true"
      />
      <div className="relative flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div className="max-w-2xl">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-[0.7rem] font-bold uppercase tracking-wide text-white/90">
            <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M6 3h12l4 6-10 12L2 9z" />
            </svg>
            Diamond Black · po pozivu
          </span>
          <h3 className="mt-3 text-xl font-semibold">Najviši nivo prisustva koji postoji</h3>
          <p className="mt-2 text-sm leading-relaxed text-white/70">
            VIP tretman iznad Diamonda: dedikovani komercijalni menadžer, ekskluzivno pozicioniranje u
            premium sekcijama i strategija prisustva po meri. Rezervisano za vodeće brendove tržišta.
          </p>
        </div>
        <Link
          href="/diamond-black"
          className="inline-flex shrink-0 items-center justify-center rounded-xl bg-white px-5 py-3 text-sm font-semibold text-[#0b1220] transition hover:bg-white/90"
        >
          Zatraži poziv
        </Link>
      </div>
    </div>
  );
}

export function PlanUpgradeMarketplace({
  plans,
  currentTier,
  validUntil,
}: Props) {
  const router = useRouter();
  const [submitting, setSubmitting] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleUpgrade(planId: string) {
    setSubmitting(planId);
    setError(null);
    try {
      const res = await fetch("/api/portal/plan/upgrade", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ planId }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data?.error || "Greška pri kreiranju predračuna.");
      router.push(`/portal/invoices/${data.invoiceId}/placanje`);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Neuspela operacija.");
      setSubmitting(null);
    }
  }

  const validUntilDate = fmtDate(validUntil);
  const currentStyle = currentTier ? tierStyle(currentTier) : null;
  const currentRank = rankOf(currentTier);
  const isTopPaid = currentRank >= TIER_RANK.DIAMOND; // Diamond / Platinum
  const pitch = currentPitch(currentTier);

  // SAMO viši paketi — nikad ne nudimo downgrade na niže.
  const upgradePlans = plans
    .filter((p) => rankOf(p.tier) > currentRank)
    .sort((a, b) => rankOf(a.tier) - rankOf(b.tier));

  return (
    <div className="space-y-6">
      {/* ── Trenutni plan: afirmacija snage + strength meter ───────────── */}
      {currentTier && currentStyle && (
        <div
          className="relative overflow-hidden rounded-2xl border bg-white p-6 shadow-[0_18px_44px_-26px_rgba(12,24,40,0.16)]"
          style={{ borderColor: `${currentStyle.ring}55` }}
        >
          <span
            className="absolute inset-y-0 left-0 w-1.5"
            style={{ background: `linear-gradient(180deg, ${currentStyle.ring}, transparent)` }}
            aria-hidden="true"
          />
          <span
            className="pointer-events-none absolute -right-10 -top-10 h-32 w-32 rounded-full blur-2xl"
            style={{ background: currentStyle.glow }}
            aria-hidden="true"
          />
          <div className="relative grid gap-5 pl-2 lg:grid-cols-[auto_minmax(0,1fr)] lg:items-center">
            <div>
              <div className="text-xs uppercase tracking-wide text-zinc-500">Trenutni plan</div>
              <div className="mt-2">
                <TierBadge tier={currentTier} size="lg" />
              </div>
              {validUntilDate && (
                <div className="mt-2.5 text-xs text-zinc-500">Važi do {validUntilDate}</div>
              )}
            </div>

            <div className="lg:border-l lg:border-zinc-100 lg:pl-6">
              <p className="text-base font-semibold text-[#0c1828]">{pitch.headline}</p>
              <p className="mt-1.5 text-sm leading-relaxed text-zinc-500">{pitch.sub}</p>

              {/* Strength meter */}
              <div className="mt-4">
                <div className="flex items-center justify-between text-[0.7rem] font-semibold uppercase tracking-wide text-zinc-400">
                  <span>Snaga profila</span>
                  <span style={{ color: currentStyle.ring }}>{pitch.strength}%</span>
                </div>
                <div className="mt-1.5 h-2 overflow-hidden rounded-full bg-zinc-100">
                  <div
                    className="h-full rounded-full bg-gradient-to-r"
                    style={{
                      width: `${pitch.strength}%`,
                      backgroundImage: `linear-gradient(90deg, ${currentStyle.ring}, ${currentStyle.ring}cc)`,
                    }}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ── Motivacioni citat ──────────────────────────────────────────── */}
      <div className="flex items-start gap-3 rounded-2xl border border-[#ffe2d2] bg-gradient-to-br from-[#fff7f3] to-white px-5 py-4">
        <svg
          width="22"
          height="22"
          viewBox="0 0 24 24"
          fill="none"
          className="mt-0.5 shrink-0 text-[#c2410c]"
          aria-hidden="true"
        >
          <path
            d="M7 7H5a3 3 0 0 0-3 3v7h7v-7H5a2 2 0 0 1 2-2V7Zm12 0h-2a3 3 0 0 0-3 3v7h7v-7h-4a2 2 0 0 1 2-2V7Z"
            fill="currentColor"
            opacity="0.85"
          />
        </svg>
        <p className="text-sm font-medium italic text-[#7a3a16]">{growthQuote(currentRank)}</p>
      </div>

      {error && (
        <div className="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
          {error}
        </div>
      )}

      {/* ── VRH (Diamond): potvrda + samo Diamond Black, bez downgrade-a ── */}
      {isTopPaid ? (
        <div className="space-y-4">
          <div className="rounded-2xl border border-[#cdebf5] bg-gradient-to-br from-[#f2fbff] to-white px-5 py-4">
            <p className="text-sm font-semibold text-[#0c1828]">
              Već imaš najjači samostalni plan na portalu. 🎯
            </p>
            <p className="mt-1 text-sm leading-relaxed text-zinc-500">
              Nema potrebe da menjaš plan — uživaš u maksimalnoj vidljivosti. Ako želiš da odeš i
              korak dalje od vrha, Diamond Black otvara VIP tretman po meri.
            </p>
          </div>
          <DiamondBlackCard emphasized />
        </div>
      ) : (
        <>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            {upgradePlans.map((plan) => {
              const isLoading = submitting === plan.id;
              const featured = plan.isFeaturedDefault;
              return (
                <div
                  key={plan.id}
                  className={`flex flex-col rounded-2xl border p-6 ${
                    featured
                      ? "border-[#ffd9c2] bg-gradient-to-br from-[#fff4ef] to-white shadow-[0_22px_50px_-26px_rgba(194,65,12,0.28)]"
                      : "border-[#ece7e1] bg-white shadow-[0_18px_44px_-26px_rgba(12,24,40,0.16)]"
                  }`}
                >
                  <div className="flex items-start justify-between gap-3">
                    <div>
                      <TierBadge tier={plan.tier} />
                      <h3 className="mt-2 text-lg font-semibold text-[#0c1828]">{plan.nameSr}</h3>
                    </div>
                    {featured && (
                      <span className="rounded-full bg-[#fff4ef] px-2 py-0.5 text-xs font-bold text-[#c2410c]">
                        Preporuka
                      </span>
                    )}
                  </div>

                  <p className="mt-3 text-sm leading-relaxed text-zinc-500">
                    {plan.descriptionSr || "Pretplatnički plan za firme na BiznisPortalu."}
                  </p>

                  {/* Šta otključavaš */}
                  <div className="mt-4 flex items-start gap-2 rounded-xl bg-[#f7faff] px-3 py-2.5">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="mt-0.5 shrink-0 text-[#1aa3c9]" aria-hidden="true">
                      <path d="m5 13 4 4L19 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                    <p className="text-xs font-medium leading-relaxed text-[#33506a]">{upgradePush(plan.tier)}</p>
                  </div>

                  <div className="mt-5 text-3xl font-semibold text-[#0c1828]">
                    {plan.priceRsd ? fmtRsd(plan.priceRsd) : "Po dogovoru"}
                  </div>
                  <div className="text-xs text-zinc-500">
                    {plan.durationDays ? `Trajanje: ${plan.durationDays} dana` : "Custom trajanje"}
                  </div>

                  <div className="mt-6 flex-1" />

                  <button
                    type="button"
                    disabled={isLoading || !plan.priceRsd}
                    onClick={() => handleUpgrade(plan.id)}
                    className={`mt-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition ${
                      featured
                        ? "bg-[#c2410c] text-white hover:bg-[#a8380a] disabled:opacity-50"
                        : "border border-[#e2ddd6] bg-white text-[#0c1828] hover:border-[#c2410c] hover:text-[#c2410c] disabled:opacity-50"
                    }`}
                  >
                    {isLoading
                      ? "Kreiram predračun..."
                      : plan.priceRsd
                        ? "Pređi na ovaj plan"
                        : "Kontakt"}
                  </button>
                </div>
              );
            })}
          </div>

          {/* Diamond Black kao krajnji cilj (teaser) */}
          <DiamondBlackCard emphasized={false} />
        </>
      )}

      <p className="text-xs text-zinc-500">
        Po kreiranju predračuna dobićeš instrukcije za plaćanje. Plan se aktivira čim evidentiramo uplatu.
      </p>
    </div>
  );
}