<script setup lang="ts">
import type { BlueprintFunction } from "@/data/listBlueprint"

defineProps<{ fn: BlueprintFunction }>()
</script>

<template>
  <div>
    <div class="flex flex-wrap items-baseline gap-2">
      <span class="text-lg font-bold tracking-wide text-accent">{{ fn.name }}</span>
      <span
        v-for="c in fn.caps"
        :key="c"
        class="chip"
        :class="c === 'List' ? 'chip-core' : 'chip-cap'"
        >{{ c }}</span
      >
    </div>
    <p class="mb-4 mt-1 text-xs text-base-content/50">{{ fn.verb }}</p>

    <section v-if="fn.state.length" class="block-sec">
      <div class="k"><span>State touched</span><span class="rule" /></div>
      <div v-for="[name, type] in fn.state" :key="name" class="flex gap-2">
        <span>{{ name }}</span
        ><span class="text-base-content/40">:</span><span class="text-secondary">{{ type }}</span>
      </div>
    </section>

    <section v-if="fn.behaviors.length" class="block-sec">
      <div class="k">
        <span>Behavior{{ fn.behaviors.length > 1 ? "s" : "" }}</span
        ><span class="rule" />
      </div>
      <div v-for="b in fn.behaviors" :key="b.sig" class="beh">
        <div class="text-accent">{{ b.sig }}</div>
        <div class="flex gap-2 text-xs text-base-content/70">
          <span class="w-7 shrink-0 text-base-content/40">pre</span
          ><span class="text-base-content">{{ b.pre }}</span>
        </div>
        <div class="flex gap-2 text-xs text-base-content/70">
          <span class="w-7 shrink-0 text-base-content/40">eff</span
          ><span class="text-base-content">{{ b.eff }}</span>
        </div>
      </div>
    </section>

    <section v-if="fn.invariants.length" class="block-sec">
      <div class="k">
        <span>Invariant{{ fn.invariants.length > 1 ? "s" : "" }}</span
        ><span class="rule" />
      </div>
      <ul class="tight">
        <li v-for="i in fn.invariants" :key="i">{{ i }}</li>
      </ul>
    </section>

    <section v-if="fn.failures.length" class="block-sec">
      <div class="k text-error/80">
        <span>⚠ Failure mode{{ fn.failures.length > 1 ? "s" : "" }}</span
        ><span class="rule" />
      </div>
      <ul class="tight text-error">
        <li v-for="x in fn.failures" :key="x">{{ x }}</li>
      </ul>
    </section>

    <section v-if="fn.perf.length" class="block-sec">
      <div class="k text-warning/80"><span>⚡ Critical performance</span><span class="rule" /></div>
      <ul class="tight text-warning">
        <li v-for="x in fn.perf" :key="x">{{ x }}</li>
      </ul>
    </section>

    <p v-for="n in fn.notes" :key="n" class="text-[11px] italic text-base-content/40">— {{ n }}</p>
  </div>
</template>

<style scoped>
.chip {
  border: 1px solid;
  font-size: 10px;
  padding: 1px 6px;
  letter-spacing: 0.06em;
}
.chip-cap {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}
.chip-core {
  border-color: color-mix(in srgb, var(--color-base-content) 40%, transparent);
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}
.block-sec {
  margin-bottom: 0.875rem;
}
.k {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
  margin-bottom: 0.35rem;
}
.k .rule {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--color-base-content) 15%, transparent);
}
.beh {
  border-left: 2px solid color-mix(in srgb, var(--color-base-content) 30%, transparent);
  padding-left: 0.625rem;
  margin-bottom: 0.5rem;
}
.tight {
  margin: 0;
  padding-left: 1rem;
  list-style: disc;
}
.tight li {
  margin: 0.125rem 0;
}
</style>
