"use client";
/**
 * Per-eSIM controls on the dashboard: how much is left, buy more, stop paying.
 *
 * The list on its own answered "did my purchase happen". These three answer
 * the questions people actually come back for, and the third one is the
 * reason: a plan that can only be cancelled by emailing support is a plan the
 * customer cancels through their bank.
 *
 * Everything here loads lazily, one eSIM at a time, on expand. The dashboard
 * already makes one fulfilment call per order to render the list; making three
 * more per order up front would turn a slow page into an unusable one for the
 * customer with six eSIMs, who is exactly the customer worth keeping.
 */

import { useCallback, useState } from "react";
import {
  daysUntil,
  formatBytes,
  formatDataAllowance,
  formatPrice,
  formatValidity,
} from "@/vendor/geo";
import type { EsimUsage, TopUpOption } from "@/vendor/carrier/types";

interface Props {
  orderId: string;
  /** Already cancelled upstream. The cancel control is not offered again. */
  cancelled: boolean;
}

type Loadable<T> =
  | { phase: "idle" }
  | { phase: "loading" }
  | { phase: "ready"; value: T }
  | { phase: "error"; message: string };

const GENERIC_ERROR = "We couldn't reach your plan just now. Try again in a moment.";

async function readJson<T>(res: Response): Promise<T & { error?: string }> {
  return (await res.json().catch(() => ({}))) as T & { error?: string };
}

export function EsimControls({ orderId, cancelled: initiallyCancelled }: Props) {
  const [open, setOpen] = useState(false);
  const [usage, setUsage] = useState<Loadable<EsimUsage>>({ phase: "idle" });
  const [topUps, setTopUps] = useState<Loadable<TopUpOption[]>>({ phase: "idle" });
  const [cancelled, setCancelled] = useState(initiallyCancelled);
  const [confirmingCancel, setConfirmingCancel] = useState(false);
  const [cancelState, setCancelState] = useState<Loadable<true>>({ phase: "idle" });
  const [buying, setBuying] = useState<string | null>(null);

  const base = `/api/orders/${encodeURIComponent(orderId)}`;

  const load = useCallback(async () => {
    setUsage({ phase: "loading" });
    setTopUps({ phase: "loading" });

    const [usageRes, topUpRes] = await Promise.allSettled([
      fetch(`${base}/usage`, { cache: "no-store" }),
      fetch(`${base}/top-up-options`, { cache: "no-store" }),
    ]);

    if (usageRes.status === "fulfilled") {
      const payload = await readJson<{ usage?: EsimUsage }>(usageRes.value);
      setUsage(
        usageRes.value.ok && payload.usage
          ? { phase: "ready", value: payload.usage }
          : { phase: "error", message: payload.error ?? GENERIC_ERROR },
      );
    } else {
      setUsage({ phase: "error", message: GENERIC_ERROR });
    }

    if (topUpRes.status === "fulfilled") {
      const payload = await readJson<{ options?: TopUpOption[] }>(topUpRes.value);
      setTopUps(
        topUpRes.value.ok && Array.isArray(payload.options)
          ? { phase: "ready", value: payload.options }
          : { phase: "error", message: payload.error ?? GENERIC_ERROR },
      );
    } else {
      setTopUps({ phase: "error", message: GENERIC_ERROR });
    }
  }, [base]);

  function toggle() {
    const next = !open;
    setOpen(next);
    if (next && usage.phase === "idle") void load();
  }

  async function buyTopUp(option: TopUpOption) {
    setBuying(option.id);
    try {
      const res = await fetch("/api/checkout/guest", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          templateId: option.id,
          channel: "dashboard-topup",
          topUpForOrderId: orderId,
        }),
      });
      const payload = await readJson<{ url?: string }>(res);
      if (!res.ok || !payload.url) throw new Error(payload.error ?? GENERIC_ERROR);
      window.location.href = payload.url;
    } catch (err) {
      setBuying(null);
      setTopUps({
        phase: "error",
        message: err instanceof Error ? err.message : GENERIC_ERROR,
      });
    }
  }

  async function doCancel() {
    setCancelState({ phase: "loading" });
    try {
      const res = await fetch(`${base}/cancel`, { method: "POST" });
      const payload = await readJson<{ cancelledAt?: string }>(res);
      if (!res.ok) throw new Error(payload.error ?? GENERIC_ERROR);
      setCancelled(true);
      setConfirmingCancel(false);
      setCancelState({ phase: "ready", value: true });
    } catch (err) {
      setCancelState({
        phase: "error",
        message: err instanceof Error ? err.message : GENERIC_ERROR,
      });
    }
  }

  return (
    <div className="mt-4 border-t border-sand-200 pt-4 dark:border-sand-800">
      <button
        type="button"
        onClick={toggle}
        aria-expanded={open}
        className="text-sm font-medium text-sand-600 hover:text-sand-900 dark:text-sand-400 dark:hover:text-sand-50"
      >
        {open ? "Hide plan details" : "Usage, top-up and cancel"}
      </button>

      {open && (
        <div className="mt-4 grid gap-6">
          <UsageMeter state={usage} />

          <section>
            <p className="mb-2 text-xs font-semibold tracking-wide text-sand-500 uppercase">
              Add more data
            </p>
            {topUps.phase === "loading" && <p className="text-sm text-sand-500">Checking…</p>}
            {topUps.phase === "error" && (
              <p className="text-sm text-sand-500">{topUps.message}</p>
            )}
            {topUps.phase === "ready" && topUps.value.length === 0 && (
              <p className="text-sm text-sand-500">
                This plan can&apos;t be topped up. Buy another when it runs out.
              </p>
            )}
            {topUps.phase === "ready" && topUps.value.length > 0 && (
              <ul className="grid gap-2">
                {topUps.value.map((option) => (
                  <li
                    key={option.id}
                    className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-sand-200 px-4 py-3 dark:border-sand-800"
                  >
                    <div>
                      <p className="text-sm font-medium text-sand-900 dark:text-sand-50">
                        {option.name}
                      </p>
                      <p className="text-xs text-sand-500">
                        {formatDataAllowance(option.dataGb)} · {formatValidity(option.validityDays)}
                      </p>
                    </div>
                    <button
                      type="button"
                      onClick={() => void buyTopUp(option)}
                      disabled={buying !== null}
                      className="rounded-full px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
                      style={{ background: "var(--brand-accent)" }}
                    >
                      {buying === option.id
                        ? "Opening checkout…"
                        : formatPrice(option.price_cents, option.currency)}
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </section>

          <section>
            <p className="mb-2 text-xs font-semibold tracking-wide text-sand-500 uppercase">
              Cancel
            </p>
            {cancelled ? (
              <p className="text-sm text-sand-500">
                This plan is cancelled. Any data already on the eSIM stays usable until it
                expires.
              </p>
            ) : confirmingCancel ? (
              <div>
                <p className="mb-3 text-sm text-sand-700 dark:text-sand-300">
                  Cancel this plan? It stops renewing. Data already paid for stays on the eSIM
                  until it expires, and this cannot be undone from here.
                </p>
                <div className="flex flex-wrap gap-3">
                  <button
                    type="button"
                    onClick={() => void doCancel()}
                    disabled={cancelState.phase === "loading"}
                    className="rounded-full bg-red-600 px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
                  >
                    {cancelState.phase === "loading" ? "Cancelling…" : "Yes, cancel it"}
                  </button>
                  <button
                    type="button"
                    onClick={() => setConfirmingCancel(false)}
                    className="rounded-full border border-sand-300 px-5 py-2 text-sm text-sand-900 dark:border-sand-700 dark:text-sand-50"
                  >
                    Keep it
                  </button>
                </div>
                {cancelState.phase === "error" && (
                  <p className="mt-3 text-sm text-sand-500">{cancelState.message}</p>
                )}
              </div>
            ) : (
              <button
                type="button"
                onClick={() => setConfirmingCancel(true)}
                className="text-sm font-medium text-sand-500 underline underline-offset-4 hover:text-sand-900 dark:hover:text-sand-50"
              >
                Cancel this plan
              </button>
            )}
          </section>
        </div>
      )}
    </div>
  );
}

function UsageMeter({ state }: { state: Loadable<EsimUsage> }) {
  if (state.phase === "loading") {
    return <p className="text-sm text-sand-500">Reading your usage…</p>;
  }
  if (state.phase === "error") {
    return <p className="text-sm text-sand-500">{state.message}</p>;
  }
  if (state.phase !== "ready") return null;

  const { usedBytes, totalBytes, expiresAt } = state.value;
  const left = daysUntil(expiresAt);
  // Only drawn when the operator stated a ceiling. A bar with an invented
  // denominator is a number the customer plans a trip around.
  const pct =
    typeof totalBytes === "number" && totalBytes > 0
      ? Math.min(100, Math.round((usedBytes / totalBytes) * 100))
      : null;

  return (
    <section>
      <p className="mb-2 text-xs font-semibold tracking-wide text-sand-500 uppercase">Usage</p>
      <p className="text-sm text-sand-900 dark:text-sand-50">
        {formatBytes(usedBytes)} used
        {typeof totalBytes === "number" ? ` of ${formatBytes(totalBytes)}` : ""}
      </p>
      {pct !== null && (
        <div
          role="progressbar"
          aria-valuenow={pct}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-label="Data used"
          className="mt-2 h-2 w-full overflow-hidden rounded-full bg-sand-200 dark:bg-sand-800"
        >
          <div
            className="h-full rounded-full"
            style={{ width: `${pct}%`, background: "var(--brand-accent)" }}
          />
        </div>
      )}
      {left !== null && (
        <p className="mt-2 text-xs text-sand-500">
          {left === 0 ? "Expires today" : left === 1 ? "1 day left" : `${left} days left`}
        </p>
      )}
    </section>
  );
}