<template>
  <div class="md:max-w-[720px] mx-auto">
    <n-card segmented>
      <template #header>
        <n-page-header @back="navigateTo('/')">
          <template #title>{{ problem?.title }}</template>
          <template #subtitle>
            <div class="flex items-center gap-2">
              <n-tag size="small" class="case-capital">{{ problem?.type }}</n-tag>
            </div>
          </template>
        </n-page-header>
      </template>

      <m-d-c :value="problem?.description" class="problem-description" tag="article" />

      <n-divider class="mx-[-24px] w-[calc(100%+48px)]" />

      <section>
        <div v-if="example" class="grid gap-4 -md:gird-cols-1 md:grid-cols-2">
          <div>
            <div>Example Input</div>
            <pre class="language-text" v-if="example?.spec?.stdin">{{ example?.spec?.stdin }}</pre>
            <pre class="language-text font-italic" v-else>本题无输入</pre>
          </div>
          <div>
            <div>Example Output</div>
            <pre class="language-text" v-if="example?.answer?.stdout">{{ example?.answer?.stdout }}</pre>
            <pre class="language-text font-italic" v-else>本题无输出</pre>
          </div>
        </div>
        <n-empty v-else description="本题无公开样例" />
      </section>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { NCard, NTag, NPageHeader, NDivider, NEmpty } from "naive-ui";
import "prismjs/themes/prism.css";
import "prismjs/prism";

const client = useSupabaseClient();
const route = useRoute();

const { data: problem } = await client.from("problems").select<any, any>("*").eq("id", route.params.id).single();
const { data: example } = await client
  .from("problem_cases")
  .select<any, any>("*")
  .eq("problem", route.params.id)
  .single();
</script>
