<script setup lang="ts">
import AccountInputCard from './AccountInputCard.vue'
import type { DailyInputAccount } from '../../types'

interface Props {
  selectedDate: string
  accounts: DailyInputAccount[]
  loading: boolean
  saving: boolean
  generating: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  selectDate: [string]
  updateLinks: [{ accountId: string; links: string[] }]
  save: []
  generate: []
}>()
</script>

<template>
  <section class="panel">
    <div class="panel-head">
      <div>
        <p class="eyebrow">Daily Input</p>
        <h2 class="panel-title">按公众号录入当日链接</h2>
      </div>
      <label class="date-box" for="input-date">
        <span class="date-label">录入日期</span>
        <input
          id="input-date"
          class="date-input"
          :value="props.selectedDate"
          type="date"
          @input="emit('selectDate', ($event.target as HTMLInputElement).value)"
        />
      </label>
    </div>

    <div class="rule-strip">
      <span>空链接不会保存</span>
      <span>重复链接自动去重</span>
      <span>同一公众号支持多条文章</span>
    </div>

    <div class="account-grid hide-scrollbar">
      <AccountInputCard
        v-for="account in props.accounts"
        :key="account.account_id"
        :account="account"
        :disabled="props.saving || props.generating || props.loading"
        @update-links="emit('updateLinks', $event)"
      />
    </div>

    <div class="action-row">
      <button
        class="action-button action-button--secondary"
        type="button"
        :disabled="props.saving || props.generating"
        @click="emit('save')"
      >
        {{ props.saving ? '保存中...' : '保存录入' }}
      </button>
      <button
        class="action-button action-button--primary"
        type="button"
        :disabled="props.generating"
        @click="emit('generate')"
      >
        {{ props.generating ? '生成中...' : '生成日报' }}
      </button>
    </div>
  </section>
</template>

<style scoped>
.panel {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  min-height: 0;
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-panel);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.panel-title {
  margin: 0;
  font-family: "Palatino Linotype", "STSong", "Songti SC", serif;
  font-size: 30px;
  color: var(--ink-strong);
}

.date-box {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.date-label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.date-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.75);
  outline: none;
}

.rule-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(255, 250, 244, 0.76);
  font-size: 13px;
  color: var(--ink-soft);
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.action-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.action-button {
  padding: 12px 18px;
  border-radius: 999px;
}

.action-button--secondary {
  color: var(--ink-main);
  background: rgba(0, 0, 0, 0.06);
}

.action-button--primary {
  color: white;
  background: var(--accent);
}

@media (max-width: 1120px) {
  .panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .date-box {
    min-width: auto;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }
}
</style>
