<script setup>
import { ref } from 'vue'
import GradientButton from '@/components/GradientButton.vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue', 'analyze', 'reset'])

const form = ref({ ...props.modelValue })

function handleAnalyze() {
  emit('update:modelValue', { ...form.value })
  emit('analyze')
}

function handleReset() {
  form.value = { platform: '抖音', url: '', count: 20, sort_type: 0 }
  emit('update:modelValue', { ...form.value })
  emit('reset')
}
</script>

<template>
  <section class="card">
    <a-form :model="form" layout="vertical">
      <a-form-item label="平台">
        <a-radio-group v-model:value="form.platform" button-style="solid">
          <a-radio-button value="抖音">抖音</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="主页/视频链接">
        <a-input
          v-model:value="form.url"
          placeholder="粘贴抖音主页或视频链接，或点击下方示例试一试"
          allow-clear
          size="large"
        />
      </a-form-item>
      <a-form-item label="最大数量（建议保持默认值20）">
        <div class="slider-row">
          <a-slider v-model:value="form.count" :min="1" :max="100" :tooltip-open="true" style="flex:1" />
          <a-input-number v-model:value="form.count" :min="1" :max="100" style="width:96px; margin-left:12px;" />
        </div>
        <div class="form-hint">数量越大越全面，但分析时间更长；建议 20–30。</div>
      </a-form-item>
      <a-space>
        <GradientButton
          text="开始分析"
          :loading="loading"
          loading-text="分析中…"
          size="middle"
          @click="handleAnalyze"
        />
        <a-button @click="handleReset">清空</a-button>
      </a-space>
    </a-form>
  </section>
</template>

<style scoped>
.card {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-inset-card);
  border: 1px solid var(--color-border);
}

.slider-row {
  display: flex;
  align-items: center;
}

.form-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

:deep(.ant-input), :deep(.ant-input-affix-wrapper), :deep(textarea) {
  background: #0f0f0f;
  border-color: var(--color-border);
}

:deep(.ant-input:hover), :deep(.ant-input-affix-wrapper:hover), :deep(textarea:hover) {
  border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-border));
}

:deep(.ant-input:focus), :deep(.ant-input-affix-wrapper-focused), :deep(textarea:focus) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
}

:deep(.ant-slider) {
  padding: 10px 0;
}

:deep(.ant-slider-rail) {
  background-color: #252525;
  height: 4px;
}

:deep(.ant-slider-track) {
  background-color: var(--color-primary);
  height: 4px;
}

:deep(.ant-slider:hover .ant-slider-track) {
  background-color: var(--color-primary);
}

:deep(.ant-slider-handle::after) {
  box-shadow: 0 0 0 2px var(--color-primary);
}

:deep(.ant-slider-handle:focus-visible::after),
:deep(.ant-slider-handle:hover::after),
:deep(.ant-slider-handle:active::after) {
  box-shadow: 0 0 0 3px var(--color-primary);
}
</style>

