import { content, type ShipModel } from "@deadhead/content";
import { useState } from "react";
import { formatCredits, formatMillionKm, locationName } from "../format";
import { errorMessage, useGameAction, useLoadedPlayer } from "../state/actions";
import { Art, Button, Icon, Panel, Screen, ScreenHeader, Sheet, type IconName } from "../ui";

const LANDING_LABELS = { vacuum: "Vacuum", atmospheric: "Atmospheric", hardened: "Hardened" };

const MODELS = content.purchasableShipModels;
const best = {
  speed: Math.max(...MODELS.map((m) => m.cruiseSpeedKmPerGameHour)),
  capacity: Math.max(...MODELS.map((m) => m.cargoCapacityTonnes)),
  range: Math.max(...MODELS.map((m) => m.fuelRangeMillionKm)),
};
/** Range spans 5 to 1,000M km, so its bar uses a log scale to stay readable. */
const rangeShare = (range: number) => Math.log10(1 + range) / Math.log10(1 + best.range);

/** Ship models for sale, delivered to the HQ (bay) the player picks (Steps 9.8, 10B.9). */
export function Market() {
  const state = useLoadedPlayer();
  const buy = useGameAction("buyShip");
  const [buying, setBuying] = useState<ShipModel | null>(null);

  return (
    <Screen className="max-w-5xl">
      <ScreenHeader
        title="Market"
        eyebrow="Shipyard"
        icon="market"
        subtitle="New ships are delivered with no pilot to one of your HQs."
      />
      {buy.isError && (
        <p role="alert" className="text-sm text-rose-300">
          {errorMessage(buy.error)}
        </p>
      )}
      {buy.isSuccess && (
        <p
          role="status"
          className="flex items-center gap-2 rounded-lg border border-emerald-400/40 bg-emerald-950/50 px-3 py-2 text-sm text-emerald-200"
        >
          <Icon name="check" className="size-4 shrink-0" />
          {buy.data.ship.name} is waiting at {locationName(buy.data.ship.locationId ?? "")}.
        </p>
      )}
      <ul className="grid gap-4 md:grid-cols-3">
        {MODELS.map((model) => {
          const affordable = state.company.credits >= model.price;
          return (
            <Panel as="li" key={model.id} feature={affordable} className="flex flex-col text-sm">
              <div className="relative -mx-4 -mt-4 grid h-40 place-items-center overflow-hidden rounded-t-xl bg-radial from-cyan-400/20 via-space-850/40 to-transparent to-75%">
                <div className="absolute inset-x-8 bottom-4 h-3 rounded-[50%] bg-cyan-300/15 blur-md" />
                <Art
                  sprite={model.sprite}
                  className="relative size-32 rotate-[30deg] drop-shadow-[0_10px_14px_rgb(0_0_0/0.8)]"
                />
              </div>
              <div className="mt-2 flex items-baseline justify-between gap-2">
                <span className="font-display text-xl font-bold tracking-wide">{model.name}</span>
                <span
                  className={`font-display text-base font-bold tabular-nums ${affordable ? "text-amber-300" : "text-ink-400"}`}
                >
                  {formatCredits(model.price)}
                </span>
              </div>
              <dl className="mt-3 space-y-2 text-ink-200">
                <Spec
                  icon="speed"
                  label="Speed"
                  value={`${formatMillionKm(model.cruiseSpeedKmPerGameHour / 1e6)}/h`}
                  share={model.cruiseSpeedKmPerGameHour / best.speed}
                />
                <Spec
                  icon="cargo"
                  label="Capacity"
                  value={`${model.cargoCapacityTonnes} t`}
                  share={model.cargoCapacityTonnes / best.capacity}
                />
                <Spec
                  icon="range"
                  label="Range"
                  value={formatMillionKm(model.fuelRangeMillionKm)}
                  share={rangeShare(model.fuelRangeMillionKm)}
                />
                <Spec icon="landing" label="Landing" value={LANDING_LABELS[model.landingClass]} />
              </dl>
              <Button
                aria-label={`Buy ${model.name}`}
                block
                disabled={!affordable || state.bays.length === 0 || buy.isPending}
                onClick={() => setBuying(model)}
                className="mt-4"
              >
                {affordable ? "Buy" : "Not enough credits"}
              </Button>
            </Panel>
          );
        })}
      </ul>
      {buying && (
        <DeliveryPicker
          model={buying}
          pending={buy.isPending}
          onBuy={(bayId) =>
            buy.mutate({ modelId: buying.id, bayId }, { onSettled: () => setBuying(null) })
          }
          onClose={() => setBuying(null)}
        />
      )}
    </Screen>
  );
}

/** One spec line: label and value (dt directly before dd), with a bar relative to the best model. */
function Spec(props: { icon: IconName; label: string; value: string; share?: number }) {
  return (
    <div>
      <div className="flex items-center justify-between gap-2">
        <dt className="flex items-center gap-1.5 font-display text-[11px] tracking-[0.14em] text-ink-400 uppercase">
          <Icon name={props.icon} className="size-3.5" />
          {props.label}
        </dt>
        <dd className="font-display font-semibold tabular-nums">{props.value}</dd>
      </div>
      {props.share !== undefined && (
        <div aria-hidden="true" className="mt-1 h-1 overflow-hidden rounded-full bg-space-950/80">
          <div
            className="h-full rounded-full bg-linear-to-r from-cyan-500 to-sky-300"
            style={{ width: `${Math.max(4, props.share * 100)}%` }}
          />
        </div>
      )}
    </div>
  );
}

/** "Deliver to which HQ?": choose the bay the new ship appears at (decision 0.5.35). */
function DeliveryPicker(props: {
  model: ShipModel;
  pending: boolean;
  onBuy: (bayId: string) => void;
  onClose: () => void;
}) {
  const state = useLoadedPlayer();
  const [bayId, setBayId] = useState(state.bays.length === 1 ? state.bays[0]!.id : null);

  return (
    <Sheet
      titleId="delivery-title"
      eyebrow="Delivery"
      title="Deliver to which HQ?"
      subtitle={`Your ${props.model.name} will wait there, idle and without a pilot.`}
    >
      <fieldset className="mt-4 space-y-2">
        <legend className="sr-only">HQ</legend>
        {state.bays.map((bay) => {
          const sprite = content.location(bay.locationId)?.sprite;
          return (
            <label
              key={bay.id}
              className="flex cursor-pointer items-center gap-3 rounded-xl border border-space-600 bg-space-900/60 p-3 text-sm transition has-checked:border-amber-400 has-checked:bg-amber-500/10 has-checked:shadow-glow-amber"
            >
              <input
                type="radio"
                name="hq"
                checked={bayId === bay.id}
                onChange={() => setBayId(bay.id)}
                className="size-4 accent-amber-400"
              />
              {sprite && <Art sprite={sprite} className="size-8" />}
              <span className="font-display font-semibold">{locationName(bay.locationId)}</span>
            </label>
          );
        })}
      </fieldset>
      <Button
        block
        disabled={bayId === null || props.pending}
        onClick={() => bayId && props.onBuy(bayId)}
        className="mt-4"
      >
        Buy for {formatCredits(props.model.price)}
      </Button>
      <Button variant="secondary" block onClick={props.onClose} className="mt-2">
        Cancel
      </Button>
    </Sheet>
  );
}