import { content } from "@deadhead/content";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router";
import { useApi } from "../api/context";
import { formatCredits } from "../format";
import { errorMessage, useLoadedPlayer } from "../state/actions";
import { PLAYER_STATE_KEY } from "../state/player";
import { Art, Button, Sheet } from "../ui";

/**
 * The one-time deal (decision 0.5.30): shown when the server says it is
 * available, after any delivery summary has been dismissed. There is no
 * decline option.
 */
export function DealModal() {
  const state = useLoadedPlayer();
  const api = useApi();
  const queryClient = useQueryClient();
  const navigate = useNavigate();
  const accept = useMutation({
    mutationFn: () => api.call("acceptDeal", {}),
    onSuccess: (newState) => {
      queryClient.setQueryData(PLAYER_STATE_KEY, newState);
      void navigate("/");
    },
  });

  if (!state.tutorial?.dealAvailable || state.summaries.length > 0) return null;

  const { dealLoanAmount } = content;
  const { loanRepaymentShare } = content.config;
  // The deal's ships (decisions 0.5.30, 0.5.82).
  const courier = content.shipModel(content.config.deal.avatarShipModelId)!;
  const clipper = content.shipModel(content.config.deal.veteranShipModelId)!;
  const bay = content.location(content.config.deal.bayLocationId)!;
  const veteran = content.veteranPilot;

  return (
    <Sheet
      titleId="deal-title"
      eyebrow="Incoming transmission"
      title="An offer from Halvorsen"
      tone="amber"
      layer="z-30"
    >
      <div className="mt-3 flex items-center gap-3">
        <div className="flex shrink-0 -space-x-6">
          <Art sprite={courier.sprite} className="size-16 -rotate-12" />
          <Art sprite={clipper.sprite} className="size-16 rotate-12" />
        </div>
        <p className="text-sm text-ink-200">
          Old Halvorsen is retiring. He&apos;ll sell you his {courier.name}, his {clipper.name}, and
          his {bay.name} bay — and {veteran.name}, who flies that {clipper.name}. Pay him back out
          of every job.
        </p>
      </div>
      <dl className="mt-4 grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 rounded-xl bg-space-950/60 p-3 text-sm ring-1 ring-amber-400/25">
        <dt className="font-display text-[11px] tracking-[0.14em] text-ink-400 uppercase">
          You get
        </dt>
        <dd aria-label="Ships and bay">
          A {courier.name} for you, a {clipper.name} for {veteran.name}, and a bay at {bay.name}
        </dd>
        <dt className="font-display text-[11px] tracking-[0.14em] text-ink-400 uppercase">Pilot</dt>
        <dd aria-label="Veteran pilot">
          …and {veteran.name}. {veteran.bio}
        </dd>
        <dt className="font-display text-[11px] tracking-[0.14em] text-ink-400 uppercase">Loan</dt>
        <dd
          aria-label="Loan amount"
          className="font-display font-semibold text-amber-200 tabular-nums"
        >
          {formatCredits(dealLoanAmount)}
        </dd>
        <dt className="font-display text-[11px] tracking-[0.14em] text-ink-400 uppercase">
          Repayment
        </dt>
        <dd aria-label="Repayment share">
          {Math.round(loanRepaymentShare * 100)}% of every payout until it&apos;s paid off
        </dd>
      </dl>
      {accept.isError && (
        <p role="alert" className="mt-3 text-sm text-rose-300">
          {errorMessage(accept.error)}
        </p>
      )}
      <Button
        size="lg"
        block
        onClick={() => accept.mutate()}
        disabled={accept.isPending}
        className="mt-5"
      >
        Shake on it
      </Button>
    </Sheet>
  );
}