import { content, upgradeMaxLevel, type ShipStat, type Upgrade } from "@deadhead/content";
import type { Ship } from "@deadhead/schema";
import {
  effectiveStats,
  nextUpgradeLevel,
  upgradeCost,
  upgradeShopMs,
  validateUpgrade,
  type EffectiveStats,
  type UpgradeFailure,
} from "@deadhead/sim";
import { useState } from "react";
import { useClock } from "../clock/clock";
import { formatCredits, formatDuration, formatMillionKm } from "../format";
import { shipModel } from "../game";
import { errorMessage, useGameAction, useLoadedPlayer } from "../state/actions";
import { Button, Pill, Sheet } from "../ui";

/** Why an upgrade can't be started now, in plain words (decisions 0.5.64, 0.5.65). */
export const UPGRADE_REASONS: Record<UpgradeFailure, string> = {
  "tutorial-active": "Finish the company runs first",
  "not-upgradable": "Company ship",
  "ship-not-idle": "In flight",
  "ship-in-shop": "In the shop",
  "not-at-hq": "Not at an HQ",
  "upgrade-maxed": "Maxed",
  "insufficient-funds": "Can't afford",
};

/** How each upgradable stat reads, with its unit. */
const STAT_LABELS: Record<ShipStat, { label: string; format: (s: EffectiveStats) => string }> = {
  cruiseSpeedKmPerGameHour: {
    label: "Speed",
    format: (s) => `${formatMillionKm(s.cruiseSpeedKmPerGameHour / 1e6)}/h`,
  },
  cargoCapacityTonnes: {
    label: "Capacity",
    format: (s) => `${Math.round(s.cargoCapacityTonnes * 10) / 10} t`,
  },
  fuelRangeMillionKm: { label: "Range", format: (s) => formatMillionKm(s.fuelRangeMillionKm) },
  overheadGameHours: {
    label: "Takeoff/landing",
    format: (s) => `${s.overheadGameHours.toFixed(2)} h`,
  },
  handlingGameHoursPerTonne: {
    label: "Handling",
    format: (s) => `${(s.handlingGameHoursPerTonne * 60).toFixed(2)} min/t`,
  },
};

/** "Speed 2.00M km/h → 2.20M km/h": a stat now and after the next level. */
export function upgradeEffect(ship: Ship, upgrade: Upgrade): string | null {
  const model = shipModel(ship.modelId);
  const next = nextUpgradeLevel(upgrade, model.id, ship.upgrades);
  if (next === null) return null;
  const { label, format } = STAT_LABELS[upgrade.stat];
  const before = effectiveStats(model, ship.upgrades, content);
  const after = effectiveStats(model, { ...ship.upgrades, [upgrade.id]: next }, content);
  return `${label} ${format(before)} → ${format(after)}`;
}

/** The ship's detail view: its upgrades, the next level of each, and starting one (CR-009). */
export function ShipUpgrades({ shipId, onClose }: { shipId: string; onClose: () => void }) {
  const state = useLoadedPlayer();
  // The live ship, so the sheet shows the new level as soon as state refreshes.
  const ship = state.ships.find((s) => s.id === shipId)!;
  const now = useClock((s) => s.now);
  const start = useGameAction("startUpgrade");
  const [confirming, setConfirming] = useState<Upgrade | null>(null);
  const model = shipModel(ship.modelId);
  const atHq = ship.locationId !== null && state.bays.some((b) => b.locationId === ship.locationId);

  return (
    <Sheet
      titleId="upgrades-title"
      eyebrow={model.name}
      title={ship.name}
      subtitle="Upgrades are installed at an HQ. The ship stays in the shop until the work is done."
    >
      <h3 className="mt-4 font-display text-sm font-bold tracking-wider text-ink-300 uppercase">
        Upgrades
      </h3>
      <ul className="mt-2 space-y-2">
        {content.upgrades.map((upgrade) => {
          const level = ship.upgrades[upgrade.id] ?? 0;
          const next = nextUpgradeLevel(upgrade, model.id, ship.upgrades);
          const check = validateUpgrade(
            {
              ship: {
                id: ship.id,
                modelId: ship.modelId,
                locationId: ship.locationId ?? "",
                inFlight: ship.status === "in-flight",
                upgrades: ship.upgrades,
                inShopUntil: ship.inShopUntil,
              },
              upgrade,
              atHq,
              tutorialActive: state.tutorial !== null,
              credits: state.company.credits,
              now,
            },
            content,
          );
          const max = upgradeMaxLevel(upgrade, model.id);
          return (
            <li
              key={upgrade.id}
              aria-label={upgrade.name}
              className="rounded-xl border border-space-600 bg-space-900/60 p-3 text-sm"
            >
              <div className="flex items-baseline justify-between gap-2">
                <span className="font-display font-bold tracking-wide">{upgrade.name}</span>
                <span className="text-ink-400">
                  Level {level}/{max}
                </span>
              </div>
              {next !== null && (
                <div className="mt-1 text-ink-200">{upgradeEffect(ship, upgrade)}</div>
              )}
              {next !== null && (
                <div className="mt-1 text-ink-400 tabular-nums">
                  {formatCredits(upgradeCost(model, next, content.config))} ·{" "}
                  {formatDuration(upgradeShopMs(next, content.config))} in the shop
                </div>
              )}
              <div className="mt-2 flex items-center justify-between gap-2">
                {check.ok ? (
                  <Button size="sm" onClick={() => setConfirming(upgrade)}>
                    Upgrade to level {next}
                  </Button>
                ) : (
                  <Pill tone={check.reason === "upgrade-maxed" ? "emerald" : "muted"}>
                    {UPGRADE_REASONS[check.reason]}
                  </Pill>
                )}
              </div>
              {confirming?.id === upgrade.id && check.ok && (
                <div
                  role="group"
                  aria-label={`Start ${upgrade.name} ${check.level}?`}
                  className="mt-2 rounded-lg bg-space-950/70 p-2"
                >
                  <p className="text-ink-200">
                    {upgrade.name} {check.level} costs {formatCredits(check.cost)}. {ship.name}{" "}
                    can&apos;t fly for {formatDuration(check.shopUntil - now)} while it&apos;s in
                    the shop.
                  </p>
                  <div className="mt-2 flex gap-2">
                    <Button
                      needsServer
                      size="sm"
                      disabled={start.isPending}
                      onClick={() =>
                        start.mutate(
                          { shipId: ship.id, upgradeId: upgrade.id },
                          { onSettled: () => setConfirming(null) },
                        )
                      }
                    >
                      Start upgrade
                    </Button>
                    <Button size="sm" variant="secondary" onClick={() => setConfirming(null)}>
                      Cancel
                    </Button>
                  </div>
                </div>
              )}
            </li>
          );
        })}
      </ul>
      {start.isError && (
        <p role="alert" className="mt-3 text-sm text-rose-300">
          {errorMessage(start.error)}
        </p>
      )}
      <Button variant="secondary" block onClick={onClose} className="mt-4">
        Close
      </Button>
    </Sheet>
  );
}