<script setup lang="ts">
import { storeToRefs } from "pinia";
import type { OpsStripState } from "../viewerHudState";
import { useViewerSelectionStore } from "../ui/stores/viewerSelection";
import type { Selectable } from "../viewerTypes";

defineProps<{
  state: OpsStripState;
}>();

const emit = defineEmits<{
  history: [selection: Selectable];
  focus: [selection: Selectable, cameraMode?: "follow" | "tactical"];
}>();

const selectionStore = useViewerSelectionStore();
const { selectedEntityId, selectedEntityKind } = storeToRefs(selectionStore);

function isSelected(kind: Selectable["kind"], id: string) {
  return selectedEntityKind.value === kind && selectedEntityId.value === id;
}

function onStationClick(id: string, label: string) {
  selectionStore.selectSelection({ id, kind: "station", label }, "ui");
}

function onStationDoubleClick(id: string, label: string) {
  selectionStore.selectSelection({ id, kind: "station", label }, "ui");
  emit("focus", { kind: "station", id }, "tactical");
}

function onShipClick(id: string, label: string) {
  selectionStore.selectSelection({ id, kind: "ship", label }, "ui");
}

function onShipDoubleClick(id: string, label: string) {
  selectionStore.selectSelection({ id, kind: "ship", label }, "ui");
  emit("focus", { kind: "ship", id }, "follow");
}
</script>

<template>
  <section class="ops-strip">
    <article
      v-for="faction in state.factions"
      :key="faction.id"
      class="ship-card faction-card"
      :data-faction-id="faction.id"
    >
      <div class="ship-card-header">
        <h3>{{ faction.label }}</h3>
        <span class="ship-card-badge">faction</span>
      </div>
      <div
        v-if="faction.stateLines.length > 0"
        class="ship-card-ai"
      >
        <p class="ship-card-section-title">GOAP State</p>
        <p
          v-for="line in faction.stateLines"
          :key="line"
        >
          {{ line }}
        </p>
      </div>
      <div
        v-if="faction.priorities.length > 0"
        class="ship-card-ai"
      >
        <p class="ship-card-section-title">Priorities</p>
        <p
          v-for="priority in faction.priorities"
          :key="`${faction.id}-${priority.label}`"
          class="ship-card-split-line"
        >
          <span>{{ priority.label }}</span>
          <span>{{ priority.value }}</span>
        </p>
      </div>
    </article>

    <article
      v-for="station in state.stations"
      :key="station.id"
      :class="['ship-card', 'station-card', isSelected('station', station.id) && 'is-selected']"
      :data-station-id="station.id"
      @click="onStationClick(station.id, station.label)"
      @dblclick="onStationDoubleClick(station.id, station.label)"
    >
      <div class="ship-card-header">
        <h3>{{ station.label }}</h3>
        <span class="ship-card-badge">{{ station.badge }}</span>
      </div>
      <p
        v-for="line in station.lines"
        :key="`${station.id}-${line}`"
      >
        {{ line }}
      </p>
      <div
        v-if="station.processes.length > 0"
        class="ship-card-ai"
      >
        <div
          v-for="process in station.processes"
          :key="`${station.id}-${process.label}`"
          class="ship-action-progress"
        >
          <div class="ship-action-progress-label">
            <span>{{ process.label }}</span>
            <span>{{ process.valueLabel }}</span>
          </div>
          <div class="ship-action-progress-track">
            <div
              class="ship-action-progress-fill"
              :style="{ width: `${process.progress}%` }"
            />
          </div>
        </div>
      </div>
    </article>

    <article
      v-for="ship in state.ships"
      :key="ship.id"
      :class="['ship-card', isSelected('ship', ship.id) && 'is-selected', ship.followed && 'is-followed']"
      :data-ship-id="ship.id"
      @click="onShipClick(ship.id, ship.label)"
      @dblclick="onShipDoubleClick(ship.id, ship.label)"
    >
      <div class="ship-card-header">
        <h3>{{ ship.label }}</h3>
        <div class="ship-card-meta">
          <span class="ship-card-badge">{{ ship.badge }}</span>
          <button
            type="button"
            class="ship-card-history-button"
            :data-history-ship-id="ship.id"
            :aria-label="`Open history for ${ship.label}`"
            title="Open history"
            @click.stop="emit('history', { kind: 'ship', id: ship.id })"
          >
            &#128340;
          </button>
        </div>
      </div>
      <p
        v-for="line in ship.locationLines"
        :key="`${ship.id}-${line}`"
      >
        {{ line }}
      </p>
      <p
        v-for="line in ship.lines"
        :key="`${ship.id}-${line}`"
      >
        {{ line }}
      </p>
      <div
        v-if="ship.action"
        class="ship-action-progress"
      >
        <div class="ship-action-progress-label">
          <span>{{ ship.action.label }}</span>
          <span>{{ ship.action.valueLabel }}</span>
        </div>
        <div class="ship-action-progress-track">
          <div
            class="ship-action-progress-fill"
            :style="{ width: `${ship.action.progress}%` }"
          />
        </div>
      </div>
      <div class="ship-card-ai">
        <p
          v-for="line in ship.aiLines"
          :key="`${ship.id}-${line}`"
        >
          {{ line }}
        </p>
      </div>
    </article>
  </section>
</template>
