<script lang="ts">
import {
  type Formula,
  type Frame,
  getFrame,
  getId,
  isomorphic,
  latexSymbols,
  prettyPrint,
  unicodeSymbols,
} from "@cannorin/kripke";
import LuCheck from "lucide-svelte/icons/check";
import LuHeart from "lucide-svelte/icons/heart";
import LuHeartCrack from "lucide-svelte/icons/heart-crack";
import LuX from "lucide-svelte/icons/x";
import Katex from "$lib/components/katex.svelte";
import { cn } from "$lib/utils";
import { formulaHistory } from "../lib/store";
import FormulaInput from "./formula-input.svelte";
import FrameInput from "./frame-input.svelte";

export type GameStatus = "win" | "lose" | "playing";

export type Move =
  | { type: "guess"; frameId: number; correct: boolean }
  | { type: "check"; formulaStr: string; valid: number };

export type Props = {
  status?: GameStatus;
  moves?: Move[];
  relationSize: number;
  guess: (frameId: number) => boolean | Promise<boolean>;
  check: (formula: Formula) => number | Promise<number>;
  getAnswer: () => number | Promise<number>;
  onShare?: () => void;
};

let {
  status = $bindable<GameStatus>("playing"),
  moves = $bindable<Move[]>([]),
  relationSize,
  guess: guessImpl,
  check: checkImpl,
  getAnswer,
  onShare,
}: Props = $props();

let formula: Formula | undefined = $state(undefined);
let formulaStr = $derived(
  formula ? prettyPrint(formula, { symbols: latexSymbols }) : "",
);
let frame: Frame = $state(
  getFrame(moves.findLast((move) => move.type === "guess")?.frameId ?? 0),
);
let frameId = $derived(getId(frame));

let remainingRelations = $derived(relationSize - frame.relations.size);

let life = $derived(10 - moves.length);

$effect(() => {
  if (moves.some((move) => move.type === "guess" && move.correct)) {
    status = "win";
  } else if (life <= 0) {
    status = "lose";
  }
});

let canGuess = $derived.by(() => {
  if (status !== "playing" || remainingRelations !== 0) return false;
  const frameId = getId(frame);
  return !moves.some(
    (move) =>
      move.type === "guess" && isomorphic[move.frameId] === isomorphic[frameId],
  );
});

async function guess() {
  if (!canGuess) return;
  const frameId = getId(frame);
  const correct = await guessImpl(frameId);
  moves.push({ type: "guess", frameId, correct });
  moves = [...moves];
}

let canCheck = $derived.by(() => {
  if (status !== "playing" || life === 1 || !formula) return false;
  return !moves.some(
    (move) => move.type === "check" && move.formulaStr === formulaStr,
  );
});

async function check() {
  if (!canCheck || !formula) return;
  const valid = await checkImpl(formula);
  formulaHistory.update((h) =>
    formula ? h.add(prettyPrint(formula, { symbols: unicodeSymbols })) : h,
  );
  moves.push({ type: "check", formulaStr, valid });
  moves = [...moves];
  formula = undefined;
}

const colors: Record<number, string> = {
  0: "bg-muted",
  1: "bg-red-700",
  2: "bg-amber-700",
  3: "bg-yellow-600",
  4: "bg-green-700",
};
</script>

{#snippet sampleArrow()}
  <svg width="50" height="10" class="mt-[2px]">
    <path d="M 0 5 L 45 5" stroke="rgb(var(--foreground))" stroke-width="1" />
    <polygon points="46 5 38.4824590337 7.73616114661 38.4824590337 2.26383885339" stroke="rgb(var(--foreground))" stroke-width="0.5" fill="rgb(var(--foreground))" />"
  </svg>
{/snippet}

<div class="w-[300px] flex flex-col gap-4">
  <div class="flex items-center justify-between">
    {#each [1,2,3,4,5,6,7,8,9,10] as i}
      {#if i <= life}
        <LuHeart class={cn("text-primary", life <= 3 && "animate-pulse")} />
      {:else}
        <LuHeartCrack class="text-muted animate-blink" />
      {/if}
    {/each}
  </div>

  <div class="flex flex-col items-center gap-2">
    <div class="w-[300px] h-[300px] flex flex-col items-center justify-between border rounded border-border">
      <span class="text-xs text-muted self-start px-2 py-1">id: {frameId} (≈ {isomorphic[frameId]})</span>
      <FrameInput bind:frame disabled={status !== "playing"} />
      <span class="text-sm px-2 py-1 self-end flex items-center">
        {@render sampleArrow()} × {remainingRelations}
      </span>
    </div>

    <button
      onclick={guess}
      disabled={!canGuess}
      class={[
        "rounded w-full p-1 text-background font-bold flex items-center justify-center gap-2",
        canGuess ? "bg-primary" : "bg-muted cursor-not-allowed"
      ]}>
      Guess! <span class="flex items-center font-normal">(<LuHeart size=14 class="mt-1 mr-[1px]"/> 1)</span>
    </button>
  </div>

  <form
    class="flex flex-col items-center gap-2"
    onsubmit={(e) => { e.preventDefault(); check(); }}>
    <FormulaInput bind:formula disabled={status !== "playing"} />
    <button
      type="submit"
      disabled={!canCheck}
      class={[
        "rounded w-full p-1 text-background font-bold flex items-center justify-center gap-2",
        canCheck ? "bg-primary" : "bg-muted cursor-not-allowed"
      ]}>
      {#if life <= 1}
        Can't Check <span class="font-normal">(Last Move!)</span>
      {:else}
        Check! <span class="flex items-center font-normal">(<LuHeart size=14 class="mt-1 mr-[1px]"/> 1)</span>
      {/if}
    </button>
  </form>

  <div>
    <ul class="flex flex-col-reverse gap-2">
      {#each moves as move}
        {#if move.type === "guess"}
          <li class="flex justify-between items-center animate-fade-in">
            <FrameInput disabled width={125} height={125} frame={getFrame(move.frameId)} />
            <span class={["rounded w-6 h-6 min-w-6 min-h-6 max-w-6 max-h-6 text-background flex items-center justify-center", move.correct ? "bg-green-700" : "bg-muted"]}>
              {#if move.correct}
                <LuCheck size=24 />
              {:else}
                <LuX size=24 />
              {/if}
            </span>
          </li>
        {/if}
        {#if move.type === "check"}
          <li class="flex justify-between items-center animate-fade-in">
            <Katex math={move.formulaStr} />
            <span class={["rounded w-6 h-6 min-w-6 min-h-6 max-w-6 max-h-6 text-background font-bold flex items-center justify-center pb-[2px]", colors[move.valid]]}>{move.valid}</span>
          </li>
        {/if}
      {/each}
      {#if formulaStr}
        <li class="flex justify-between items-center animate-fade-in">
          <Katex math={formulaStr} />
          <span class={["rounded w-6 h-6 min-w-6 min-h-6 max-w-6 max-h-6 text-background font-bold flex items-center justify-center pb-[2px] bg-muted"]}>?</span>
        </li>
      {/if}
      {#if status === "win"}
        <li>
          <button
            class="flex flex-col items-center gap-2 rounded bg-green-700 text-background p-5 animate-fade-in w-full"
            onclick={() => onShare?.()}>
            <p class="text-xl font-bold">YOU WIN!</p>
            <p class="sr-only">Open result screen</p>
          </button>
        </li>
      {:else if status === "lose"}
        {#await getAnswer() then answerId}
          <li>
            <button
              class="flex flex-col gap-2 rounded bg-foreground text-background p-5 animate-fade-in w-full"
              onclick={() => onShare?.()}>
              <div>
                <p class="text-xl font-bold">YOU LOSE!</p>
                <p class="text-sm">The answer was:</p>
              </div>
              <div class="flex flex-col items-center rounded bg-background w-full">
                <span class="text-xs text-muted self-start px-2 py-1">id: {answerId}</span>
                <FrameInput class="pb-6" disabled width={250} height={250} frame={getFrame(answerId)} />
              </div>
              <p class="sr-only">Open result screen</p>
            </button>
          </li>
        {/await}
      {/if}
    </ul>
  </div>
</div>

