"use client";

import Link from "next/link";
import { useMemo, useState } from "react";

import { Spinner } from "@/components/common/Spinner";

type InvitationView = {
  institutionName: string;
  groupSlug: "univerziteti" | "komore";
  email: string;
  contactName: string | null;
  roleTitle: string | null;
  expiresAt: string;
  phone: string | null;
  website: string | null;
  address: string | null;
  preselectedPlanSlug: string | null;
};

type PlanView = {
  id: string;
  slug: string;
  tier: "CONFIRMED" | "PARTNER" | "STRATEGIC";
  billingInterval: "MONTHLY" | "YEARLY";
  nameSr: string;
  descriptionSr: string | null;
  priceRsd: number;
  durationDays: number;
  entitlements: string[];
};

const tierNames = {
  CONFIRMED: "Potvrđen",
  PARTNER: "Partner",
  STRATEGIC: "Strateški",
} as const;

const tierColors = {
  CONFIRMED: "#2563eb",
  PARTNER: "#0f8b78",
  STRATEGIC: "#7c3aed",
} as const;

function money(value: number) {
  return new Intl.NumberFormat("sr-Latn-RS").format(value);
}

export function InstitutionalOnboardingForm({
  token,
  invitation,
  invalidReason,
  plans,
}: {
  token: string;
  invitation: InvitationView | null;
  invalidReason: string | null;
  plans: PlanView[];
}) {
  const initialPlan =
    invitation?.preselectedPlanSlug &&
    plans.some((plan) => plan.slug === invitation.preselectedPlanSlug)
      ? invitation.preselectedPlanSlug
      : plans.find(
          (plan) => plan.billingInterval === "YEARLY" && plan.tier === "PARTNER"
        )?.slug ??
        plans[0]?.slug ??
        "";
  const [step, setStep] = useState(1);
  const [contactName, setContactName] = useState(invitation?.contactName ?? "");
  const [phone, setPhone] = useState(invitation?.phone ?? "");
  const [website, setWebsite] = useState(invitation?.website ?? "");
  const [address, setAddress] = useState(invitation?.address ?? "");
  const [planSlug, setPlanSlug] = useState(initialPlan);
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [acceptedTerms, setAcceptedTerms] = useState(false);
  const [showPassword, setShowPassword] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const selectedPlan = useMemo(
    () => plans.find((plan) => plan.slug === planSlug) ?? null,
    [planSlug, plans]
  );

  if (!invitation || invalidReason) {
    return (
      <main className="flex min-h-screen items-center justify-center bg-[#07111f] px-5 py-12 text-white">
        <section className="w-full max-w-lg rounded-[2rem] border border-white/10 bg-white/[0.05] p-8 text-center shadow-2xl">
          <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-400/10 text-2xl">
            !
          </div>
          <h1 className="mt-5 font-display text-2xl font-bold">
            Pozivnica nije aktivna
          </h1>
          <p className="mt-3 text-sm leading-7 text-white/60">
            {invalidReason ??
              "Aktivaciona veza nije važeća. Zatražite novu pozivnicu od BiznisPortal tima."}
          </p>
          <Link
            href="/portal/login"
            className="mt-7 inline-flex h-12 items-center justify-center rounded-xl bg-white px-5 text-sm font-extrabold text-[#07111f]"
          >
            Idi na prijavu
          </Link>
        </section>
      </main>
    );
  }

  const groupName =
    invitation.groupSlug === "komore"
      ? "Komorski centar"
      : "Univerzitetski centar";

  function nextStep() {
    setError(null);
    if (step === 1 && contactName.trim().length < 2) {
      setError(
        "Unesite ime osobe koja će upravljati institucionalnim nalogom."
      );
      return;
    }
    if (step === 2 && !selectedPlan) {
      setError("Izaberite institucionalni paket.");
      return;
    }
    setStep((current) => Math.min(3, current + 1));
  }

  async function submit() {
    setError(null);
    if (password.length < 8) {
      setError("Šifra mora imati najmanje 8 karaktera.");
      return;
    }
    if (password !== confirmPassword) {
      setError("Šifre se ne poklapaju.");
      return;
    }
    if (!acceptedTerms) {
      setError("Potvrdite uslove korišćenja da biste završili aktivaciju.");
      return;
    }
    setBusy(true);
    try {
      const response = await fetch(
        `/api/institutional-onboarding/${encodeURIComponent(token)}`,
        {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({
            password,
            confirmPassword,
            contactName,
            phone: phone || null,
            website: website || null,
            address: address || null,
            planSlug,
            acceptedTerms,
          }),
        }
      );
      const result = (await response.json().catch(() => ({}))) as {
        ok?: boolean;
        redirect?: string;
        message?: string;
      };
      if (!response.ok || !result.ok) {
        throw new Error(result.message || "Aktivacija nije uspela.");
      }
      window.location.assign(result.redirect || "/portal");
    } catch (submissionError) {
      setError(
        submissionError instanceof Error
          ? submissionError.message
          : "Aktivacija nije uspela."
      );
      setBusy(false);
    }
  }

  return (
    <main className="min-h-screen bg-[#f4f6fa] text-[#101828]">
      <div className="border-b border-slate-200 bg-white">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 sm:px-8">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/images/biznisportal-logo-web.svg"
            alt="BiznisPortal"
            className="h-8 w-auto"
          />
          <span className="rounded-full bg-[#eff4fb] px-3 py-1.5 text-[0.65rem] font-extrabold uppercase tracking-[0.16em] text-[#315171]">
            Sigurna institucionalna aktivacija
          </span>
        </div>
      </div>

      <div className="mx-auto grid max-w-7xl gap-6 px-5 py-8 sm:px-8 lg:grid-cols-[340px_minmax(0,1fr)] lg:py-12">
        <aside className="rounded-[2rem] bg-[linear-gradient(145deg,#0a1c31,#173957)] p-7 text-white shadow-[0_28px_80px_-45px_rgba(7,17,31,0.9)] lg:sticky lg:top-8 lg:h-fit">
          <p className="text-[0.68rem] font-extrabold uppercase tracking-[0.2em] text-[#8fc5e9]">
            {groupName}
          </p>
          <h1 className="mt-4 font-display text-3xl font-bold leading-tight">
            {invitation.institutionName}
          </h1>
          <p className="mt-3 text-sm leading-7 text-white/62">
            Potvrdite podatke, izaberite paket i postavite bezbedan pristup za
            svoj tim.
          </p>
          <div className="mt-7 space-y-3 border-t border-white/10 pt-6 text-sm">
            <div>
              <span className="block text-[0.62rem] font-bold uppercase tracking-widest text-white/40">
                Pozvana adresa
              </span>
              <span className="mt-1 block break-all font-semibold">
                {invitation.email}
              </span>
            </div>
            {invitation.roleTitle ? (
              <div>
                <span className="block text-[0.62rem] font-bold uppercase tracking-widest text-white/40">
                  Uloga
                </span>
                <span className="mt-1 block font-semibold">
                  {invitation.roleTitle}
                </span>
              </div>
            ) : null}
            <div>
              <span className="block text-[0.62rem] font-bold uppercase tracking-widest text-white/40">
                Pozivnica važi do
              </span>
              <span className="mt-1 block font-semibold">
                {new Intl.DateTimeFormat("sr-Latn-RS", {
                  dateStyle: "long",
                }).format(new Date(invitation.expiresAt))}
              </span>
            </div>
          </div>
          <div className="mt-7 rounded-2xl border border-white/10 bg-white/[0.06] p-4 text-xs leading-6 text-white/58">
            Plaćanje nije izvršeno ovom pozivnicom. Posle potvrde dobićete
            predračun i sigurne opcije plaćanja.
          </div>
        </aside>

        <section className="rounded-[2rem] border border-slate-200 bg-white p-5 shadow-[0_24px_70px_-50px_rgba(15,23,42,0.55)] sm:p-8">
          <div className="grid grid-cols-3 gap-2 border-b border-slate-100 pb-6">
            {[
              [1, "Podaci"],
              [2, "Paket"],
              [3, "Pristup"],
            ].map(([number, label]) => (
              <button
                key={number}
                type="button"
                onClick={() => Number(number) < step && setStep(Number(number))}
                className={`rounded-xl px-2 py-3 text-xs font-extrabold transition ${
                  step === number
                    ? "bg-[#eaf2fb] text-[#173957]"
                    : Number(number) < step
                    ? "text-emerald-700"
                    : "text-slate-400"
                }`}
              >
                <span className="mr-1.5">
                  {Number(number) < step ? "✓" : number}
                </span>
                {label}
              </button>
            ))}
          </div>

          {step === 1 ? (
            <div className="mt-7">
              <p className="text-[0.68rem] font-extrabold uppercase tracking-[0.18em] text-[#315171]">
                Korak 1 od 3
              </p>
              <h2 className="mt-2 font-display text-2xl font-bold">
                Potvrdite kontakt podatke
              </h2>
              <p className="mt-2 text-sm leading-6 text-slate-500">
                Ovi podaci služe za komunikaciju i pripremu računa. Javni podaci
                se kasnije uređuju iz institucionalnog centra.
              </p>
              <div className="mt-6 grid gap-4 sm:grid-cols-2">
                <label className="text-sm font-bold text-slate-700 sm:col-span-2">
                  Ime i prezime administratora
                  <input
                    value={contactName}
                    onChange={(event) => setContactName(event.target.value)}
                    className="mt-2 h-12 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 font-medium outline-none focus:border-[#4f7ea8] focus:bg-white"
                    placeholder="Ime i prezime"
                  />
                </label>
                <label className="text-sm font-bold text-slate-700">
                  Telefon
                  <input
                    value={phone}
                    onChange={(event) => setPhone(event.target.value)}
                    className="mt-2 h-12 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 font-medium outline-none focus:border-[#4f7ea8] focus:bg-white"
                    placeholder="+381..."
                  />
                </label>
                <label className="text-sm font-bold text-slate-700">
                  Veb-sajt
                  <input
                    value={website}
                    onChange={(event) => setWebsite(event.target.value)}
                    className="mt-2 h-12 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 font-medium outline-none focus:border-[#4f7ea8] focus:bg-white"
                    placeholder="https://..."
                  />
                </label>
                <label className="text-sm font-bold text-slate-700 sm:col-span-2">
                  Adresa
                  <input
                    value={address}
                    onChange={(event) => setAddress(event.target.value)}
                    className="mt-2 h-12 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 font-medium outline-none focus:border-[#4f7ea8] focus:bg-white"
                    placeholder="Zvanična adresa institucije"
                  />
                </label>
              </div>
            </div>
          ) : null}

          {step === 2 ? (
            <div className="mt-7">
              <p className="text-[0.68rem] font-extrabold uppercase tracking-[0.18em] text-[#315171]">
                Korak 2 od 3
              </p>
              <h2 className="mt-2 font-display text-2xl font-bold">
                Izaberite nivo i period
              </h2>
              <p className="mt-2 text-sm leading-6 text-slate-500">
                Godišnje plaćanje uključuje dva meseca vrednosti bez dodatne
                obaveze.
              </p>
              <div className="mt-6 grid gap-3 xl:grid-cols-2">
                {plans.map((plan) => {
                  const selected = plan.slug === planSlug;
                  const accent = tierColors[plan.tier];
                  return (
                    <button
                      key={plan.id}
                      type="button"
                      onClick={() => setPlanSlug(plan.slug)}
                      className={`relative rounded-2xl border p-5 text-left transition ${
                        selected
                          ? "border-[#315171] bg-[#f4f8fc] shadow-[0_14px_35px_-25px_rgba(23,57,87,0.7)]"
                          : "border-slate-200 hover:border-slate-300"
                      }`}
                    >
                      <span
                        className="inline-flex rounded-full px-2.5 py-1 text-[0.62rem] font-black uppercase tracking-widest text-white"
                        style={{ backgroundColor: accent }}
                      >
                        {tierNames[plan.tier]}
                      </span>
                      <span className="absolute right-5 top-5 text-sm font-black text-slate-400">
                        {plan.billingInterval === "YEARLY"
                          ? "Godišnje"
                          : "Mesečno"}
                      </span>
                      <div className="mt-4 flex items-end gap-2">
                        <strong className="font-display text-2xl">
                          {money(plan.priceRsd)} RSD
                        </strong>
                        <span className="pb-1 text-xs text-slate-500">
                          /{" "}
                          {plan.billingInterval === "YEARLY" ? "god." : "mes."}
                        </span>
                      </div>
                      <p className="mt-2 text-xs leading-5 text-slate-500">
                        {plan.descriptionSr}
                      </p>
                      <p className="mt-3 text-[0.68rem] font-bold text-slate-400">
                        {plan.entitlements.length} aktivnih institucionalnih
                        prava
                      </p>
                      {selected ? (
                        <span className="absolute bottom-4 right-4 text-sm font-black text-emerald-700">
                          Izabrano ✓
                        </span>
                      ) : null}
                    </button>
                  );
                })}
              </div>
            </div>
          ) : null}

          {step === 3 ? (
            <div className="mt-7">
              <p className="text-[0.68rem] font-extrabold uppercase tracking-[0.18em] text-[#315171]">
                Korak 3 od 3
              </p>
              <h2 className="mt-2 font-display text-2xl font-bold">
                Zaštitite institucionalni nalog
              </h2>
              <p className="mt-2 text-sm leading-6 text-slate-500">
                Nakon potvrde bićete prijavljeni i preusmereni na predračun za
                izabrani paket.
              </p>
              <div className="mt-6 rounded-2xl bg-[#f5f8fb] p-5">
                <span className="text-[0.62rem] font-black uppercase tracking-widest text-slate-400">
                  Izabrani paket
                </span>
                <div className="mt-2 flex flex-wrap items-end justify-between gap-3">
                  <strong className="text-lg">
                    {selectedPlan
                      ? `${tierNames[selectedPlan.tier]} · ${
                          selectedPlan.billingInterval === "YEARLY"
                            ? "godišnje"
                            : "mesečno"
                        }`
                      : "—"}
                  </strong>
                  <span className="font-display text-xl font-black">
                    {selectedPlan ? `${money(selectedPlan.priceRsd)} RSD` : "—"}
                  </span>
                </div>
              </div>
              <div className="mt-5 grid gap-4 sm:grid-cols-2">
                <label className="text-sm font-bold text-slate-700">
                  Nova šifra
                  <input
                    type={showPassword ? "text" : "password"}
                    value={password}
                    onChange={(event) => setPassword(event.target.value)}
                    autoComplete="new-password"
                    className="mt-2 h-12 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 outline-none focus:border-[#4f7ea8] focus:bg-white"
                    placeholder="Najmanje 8 karaktera"
                  />
                </label>
                <label className="text-sm font-bold text-slate-700">
                  Potvrdite šifru
                  <input
                    type={showPassword ? "text" : "password"}
                    value={confirmPassword}
                    onChange={(event) => setConfirmPassword(event.target.value)}
                    autoComplete="new-password"
                    className="mt-2 h-12 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 outline-none focus:border-[#4f7ea8] focus:bg-white"
                    placeholder="Ponovite šifru"
                  />
                </label>
              </div>
              <button
                type="button"
                onClick={() => setShowPassword((current) => !current)}
                className="mt-3 text-xs font-bold text-[#315171]"
              >
                {showPassword ? "Sakrij šifru" : "Prikaži šifru"}
              </button>
              <label className="mt-5 flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-4 text-xs leading-5 text-slate-600">
                <input
                  type="checkbox"
                  checked={acceptedTerms}
                  onChange={(event) => setAcceptedTerms(event.target.checked)}
                  className="mt-0.5 h-4 w-4 rounded border-slate-300"
                />
                <span>
                  Potvrđujem da sam ovlašćen/a da upravljam profilom institucije
                  i prihvatam uslove korišćenja i obradu podataka neophodnu za
                  pružanje usluge.
                </span>
              </label>
            </div>
          ) : null}

          {error ? (
            <p className="mt-5 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
              {error}
            </p>
          ) : null}

          <div className="mt-7 flex items-center justify-between border-t border-slate-100 pt-6">
            <button
              type="button"
              onClick={() => {
                setError(null);
                setStep((current) => Math.max(1, current - 1));
              }}
              disabled={step === 1 || busy}
              className="h-11 rounded-xl px-4 text-sm font-bold text-slate-500 disabled:opacity-0"
            >
              Nazad
            </button>
            {step < 3 ? (
              <button
                type="button"
                data-testid="institutional-onboarding-next"
                onClick={nextStep}
                className="h-12 rounded-xl bg-[#173957] px-6 text-sm font-extrabold text-white shadow-lg shadow-[#173957]/15"
              >
                Nastavi
              </button>
            ) : (
              <button
                type="button"
                data-testid="institutional-onboarding-submit"
                onClick={submit}
                disabled={busy}
                className="inline-flex h-12 items-center gap-2 rounded-xl bg-[#173957] px-6 text-sm font-extrabold text-white shadow-lg shadow-[#173957]/15 disabled:opacity-60"
              >
                {busy ? <Spinner className="h-4 w-4" /> : null}
                {busy ? "Aktiviram..." : "Aktiviraj nalog i pripremi račun"}
              </button>
            )}
          </div>
        </section>
      </div>
    </main>
  );
}