<script setup lang="ts">
import { ref } from "vue";

import { heavenApi, type HeavenReading } from "../../shared/api/heaven";
import { useUiStore } from "../../shared/stores/ui";

const props = defineProps<{ field: Record<string, any> | null; daily: HeavenReading | null; disabled: boolean }>();
const emit = defineEmits<{ interpret: [reading: HeavenReading]; saved: [reading: HeavenReading] }>();
const ui = useUiStore();
const industriesOpen = ref(false);
const loading = ref(false);
const layerMarks = ["壹", "贰", "叁"];

async function interpret(): Promise<void> {
  if (props.disabled || loading.value) return;
  if (props.daily?.status === "complete") {
    emit("interpret", props.daily);
    return;
  }
  loading.value = true;
  try {
    const response = await heavenApi.fortune(props.field?.date);
    emit("saved", response.reading);
    emit("interpret", response.reading);
  } catch (error) {
    ui.showToast(error instanceof Error ? error.message : "解运准备失败");
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <section v-if="field" class="heaven-panel fortune-panel">
    <div class="heaven-fortune-grid">
      <article class="card heaven-calendar-card">
        <div class="heaven-date-seal"><span>{{ field.date.slice(5) }}</span><small>{{ field.solar_term.current }}后</small></div>
        <div><p class="muted">{{ field.lunar_date }}</p><h2>{{ field.pillars.year }}年 · {{ field.pillars.month }}月 · {{ field.pillars.day }}日</h2><p>下一节气 {{ field.solar_term.next }}</p></div>
      </article>
      <article class="card heaven-phrase-card">
        <span>当日断语</span><h2>{{ field.phrase }}</h2><p>{{ field.movement.element }}运{{ field.movement.tendency }} · {{ field.six_qi.step_name }} · 客{{ field.six_qi.guest }}加临主{{ field.six_qi.host }}</p>
      </article>
    </div>

    <section class="heaven-qi-layout">
      <article class="card heaven-qi-layers">
        <header class="card-header"><h2>三层气机</h2><span class="tag">确定性历法</span></header>
        <div class="heaven-layer-list">
          <div v-for="(layer, index) in field.layers" :key="layer.label" class="heaven-layer-row"><span>{{ layerMarks[Number(index)] }}</span><div><strong>{{ layer.label }} · {{ layer.dominant }}</strong><p>{{ layer.summary }}</p></div></div>
        </div>
      </article>
      <article class="heaven-personal">
        <span class="muted">个人合参</span>
        <template v-if="field.personal"><h3>{{ field.personal.day_master_element }}日主 · 当日合参</h3><p>{{ field.personal.tone }}</p><small>{{ field.personal.notice }}</small></template>
        <template v-else><h3>尚未设置个人资料</h3><p>可在账户设置的个人资料中补充出生信息。</p></template>
      </article>
    </section>

    <section class="card heaven-industries">
      <button class="heaven-section-toggle" type="button" @click="industriesOpen = !industriesOpen"><span>五行对应行业</span><span>{{ industriesOpen ? '收起' : '展开' }}</span></button>
      <div v-if="industriesOpen" class="heaven-industry-grid">
        <div v-for="group in field.sector_catalog" :key="group.element"><strong>{{ group.element }}</strong><p>{{ group.industries.join(' · ') }}</p></div>
      </div>
    </section>
    <div class="heaven-fortune-actions"><p>{{ field.notice }}</p><button class="btn btn-primary" type="button" :disabled="disabled || loading" @click="interpret">{{ daily?.status === 'complete' ? '已解运 · 查看结果' : loading ? '准备中' : '解运' }}</button></div>
  </section>
</template>
