import { useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { toast } from "sonner";
import { apiErrorText, mockPayOutcome } from "@/api/driver";
import { useAuth } from "@/store/auth";
import { Spinner } from "@/components/Spinner";

/**
 * Учебная «касса»: чем закончится платёж, который сотрудник создал под просмотром.
 *
 * Это подмена банка, а не экрана приложения. Настоящий экран оплаты
 * (`/pay/:orderId`) остаётся тем же самым и разбирает те же статусы — иначе
 * отладка проверяла бы поведение, которого у водителя не будет.
 */
const OUTCOMES = [
  { key: "paid", label: "Оплата прошла", hint: "PAID — экран «Оплачено»" },
  { key: "rejected", label: "Банк отклонил", hint: "REJECTED — «Оплата не прошла»" },
  { key: "expired", label: "Счёт протух", hint: "DEADLINE_EXPIRED — «Срок оплаты истёк»" },
  { key: "reversed", label: "Деньги вернулись", hint: "REVERSED — «Платёж возвращён»" },
] as const;

export function MockPayPage() {
  const { orderId = "" } = useParams();
  const nav = useNavigate();
  const impersonated = useAuth((s) => s.impersonated);
  const [busy, setBusy] = useState<string | null>(null);

  async function choose(outcome: (typeof OUTCOMES)[number]["key"]) {
    setBusy(outcome);
    try {
      await mockPayOutcome(orderId, outcome);
      nav(`/pay/${orderId}`, { replace: true });
    } catch (e: unknown) {
      toast.error(await apiErrorText(e, "Не удалось разыграть исход"));
    } finally {
      setBusy(null);
    }
  }

  if (!impersonated) {
    return (
      <div className="pt-24 text-center">
        <p className="text-sm font-semibold mb-1">Учебная оплата недоступна</p>
        <p className="text-muted text-xs mb-6">Этот экран работает только при просмотре сотрудником.</p>
        <button className="btn-ghost" onClick={() => nav("/")}>На главную</button>
      </div>
    );
  }

  return (
    <div className="pt-8">
      <button className="text-muted text-xs mb-3" onClick={() => nav(-1)}>‹ Назад</button>
      <h1 className="text-lg font-extrabold mb-1">Учебная оплата</h1>
      <p className="text-muted text-xs mb-5">
        Банка в этом платеже нет: ни списания, ни чека, ни проводки. Выберите, что
        «ответит» банк — приложение покажет ровно то же, что увидел бы водитель.
      </p>
      <div className="card divide-y divide-line">
        {OUTCOMES.map((o) => (
          <button
            key={o.key}
            disabled={busy !== null}
            onClick={() => choose(o.key)}
            className="w-full text-left px-4 py-3 flex items-center justify-between gap-3 disabled:opacity-50"
          >
            <span>
              <span className="block text-sm font-semibold">{o.label}</span>
              <span className="block text-muted text-xs">{o.hint}</span>
            </span>
            {busy === o.key && <Spinner />}
          </button>
        ))}
      </div>
      <p className="text-muted text-xs mt-4">Заказ: {orderId}</p>
    </div>
  );
}