"use client";

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

type Plan = {
  slug: string;
  nameSr: string;
  descriptionSr: string | null;
  priceRsd: number;
  billingInterval: "MONTHLY" | "YEARLY";
  tier: string;
  entitlements: string[];
};

const featureLabels: Record<string, string> = {
  PROFILE_MANAGEMENT: "Samostalno upravljanje profilom",
  IDENTITY_BADGE: "Institucionalna oznaka",
  BASIC_ANALYTICS: "Analitika pregleda i klikova",
  PROGRAM_CATALOG: "Katalog programa i rokova",
  STUDENT_INQUIRIES: "Strukturirani studentski upiti",
  EVENTS: "Programi i događaji",
  MONTHLY_REPORT: "Mesečni izveštaj",
  INTERNSHIPS: "Prakse za studente",
  EMPLOYER_PARTNERS: "Employer partneri",
  PRIORITY_POSITION: "Prioritetna pozicija",
  ADVANCED_ANALYTICS: "Napredni tržišni uvidi",
  COBRANDED_CAMPAIGNS: "Co-branded kampanje",
};
const tierLabels: Record<string, string> = {
  CONFIRMED: "Potvrđen",
  PARTNER: "Partnerski",
  STRATEGIC: "Strateški",
};

export function UniversityPlanCheckout({
  plans,
  currentTier,
  validTo,
}: {
  plans: Plan[];
  currentTier: string | null;
  validTo: string | null;
}) {
  const router = useRouter();
  const [loading, setLoading] = useState<string | null>(null);
  const [error, setError] = useState("");
  const tiers = ["CONFIRMED", "PARTNER", "STRATEGIC"];
  async function checkout(slug: string) {
    setLoading(slug);
    setError("");
    try {
      const response = await fetch("/api/portal/university/checkout", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ planSlug: slug }),
      });
      const result = (await response.json()) as {
        invoiceId?: string;
        error?: string;
      };
      if (!response.ok || !result.invoiceId)
        throw new Error(result.error || "Predračun nije kreiran.");
      router.push(`/portal/invoices/${result.invoiceId}/placanje`);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Predračun nije kreiran.");
      setLoading(null);
    }
  }
  return (
    <div>
      {currentTier ? (
        <div className="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 p-5 text-emerald-950">
          <p className="text-xs font-extrabold uppercase tracking-[0.14em]">
            Aktivan paket
          </p>
          <p className="mt-2 text-xl font-black">
            {tierLabels[currentTier] || currentTier}
          </p>
          {validTo ? (
            <p className="mt-1 text-sm">
              Važi do {new Date(validTo).toLocaleDateString("sr-RS")}
            </p>
          ) : null}
        </div>
      ) : null}
      <div className="grid gap-5 xl:grid-cols-3">
        {tiers.map((tier) => {
          const monthly = plans.find(
            (plan) => plan.tier === tier && plan.billingInterval === "MONTHLY"
          );
          const yearly = plans.find(
            (plan) => plan.tier === tier && plan.billingInterval === "YEARLY"
          );
          if (!monthly || !yearly) return null;
          const featured = tier === "PARTNER";
          return (
            <article
              key={tier}
              className={`relative flex flex-col rounded-[1.7rem] border bg-white p-6 shadow-[0_16px_45px_rgba(12,24,40,0.07)] ${
                featured ? "border-[#705bc4]" : "border-[#e7e2dd]"
              }`}
            >
              {featured ? (
                <span className="absolute right-5 top-5 rounded-full bg-[#705bc4] px-3 py-1 text-[0.62rem] font-extrabold uppercase tracking-[0.14em] text-white">
                  Preporučeno
                </span>
              ) : null}
              <p className="text-xs font-extrabold uppercase tracking-[0.14em] text-[#705bc4]">
                Institucionalni nivo
              </p>
              <h2 className="mt-3 text-2xl font-black text-[#171126]">
                {tier === "CONFIRMED"
                  ? "Potvrđen"
                  : tier === "PARTNER"
                  ? "Partner"
                  : "Strateški"}
              </h2>
              <p className="mt-3 min-h-12 text-sm leading-6 text-[#6b6475]">
                {monthly.descriptionSr}
              </p>
              <ul className="mt-5 flex-1 space-y-2 text-sm text-[#4f4859]">
                {monthly.entitlements
                  .filter((item) => featureLabels[item])
                  .map((item) => (
                    <li key={item} className="flex gap-2">
                      <span className="font-black text-[#705bc4]">✓</span>
                      {featureLabels[item]}
                    </li>
                  ))}
              </ul>
              <div className="mt-6 grid gap-2">
                <button
                  onClick={() => checkout(monthly.slug)}
                  disabled={Boolean(loading)}
                  className="rounded-xl bg-[#705bc4] px-4 py-3 text-sm font-extrabold text-white disabled:opacity-60"
                >
                  {loading === monthly.slug
                    ? "Kreiramo predračun…"
                    : `Mesečno · ${monthly.priceRsd.toLocaleString(
                        "sr-RS"
                      )} RSD`}
                </button>
                <button
                  onClick={() => checkout(yearly.slug)}
                  disabled={Boolean(loading)}
                  className="rounded-xl border border-[#dcd5f5] bg-white px-4 py-3 text-sm font-extrabold text-[#4b3b82] disabled:opacity-60"
                >
                  {loading === yearly.slug
                    ? "Kreiramo predračun…"
                    : `Godišnje · ${yearly.priceRsd.toLocaleString(
                        "sr-RS"
                      )} RSD`}
                </button>
              </div>
            </article>
          );
        })}
      </div>
      {error ? (
        <p
          role="alert"
          className="mt-5 rounded-xl bg-red-50 p-4 text-sm font-bold text-red-700"
        >
          {error}
        </p>
      ) : null}
    </div>
  );
}