<template>
  <div class="space-y-6">
    <!-- 当前时间戳 -->
    <div class="card p-4">
      <h3 class="text-lg font-semibold text-primary mb-3">{{ t('tools.timestamp_converter.current_timestamp') }}</h3>
      <div class="space-y-3">
        <div class="flex items-center space-x-4">
          <span class="text-secondary">当前时间戳:</span>
          <span class="text-primary font-mono text-lg">{{ currentTimestamp }}</span>
          <button
            @click="copyTimestamp"
            class="btn-secondary px-3 py-1 text-sm"
          >
            <FontAwesomeIcon :icon="['fas', 'copy']" class="mr-1" />
            {{ t('tools.timestamp_converter.copy_timestamp') }}
          </button>
        </div>
        <div class="flex items-center space-x-4">
          <span class="text-secondary">当前日期:</span>
          <span class="text-primary">{{ currentDateTime }}</span>
          <button
            @click="copyDateTime"
            class="btn-secondary px-3 py-1 text-sm"
          >
            <FontAwesomeIcon :icon="['fas', 'copy']" class="mr-1" />
            {{ t('tools.timestamp_converter.copy_date') }}
          </button>
        </div>
      </div>
    </div>

    <!-- 转换工具 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 时间戳转日期 -->
      <div class="card p-4">
        <h3 class="text-lg font-semibold text-primary mb-3">{{ t('tools.timestamp_converter.timestamp_to_date') }}</h3>
        <div class="space-y-3">
          <input
            v-model="timestampInput"
            type="text"
            :placeholder="t('tools.timestamp_converter.timestamp_placeholder')"
            class="input-field"
            @input="convertTimestampToDate"
          >
          <button
            @click="useCurrentTimestamp"
            class="btn-secondary"
          >
            使用当前时间戳
          </button>
          <div v-if="timestampResult" class="space-y-2">
            <label class="block text-sm font-medium text-secondary">转换结果:</label>
            <div class="bg-block p-3 rounded font-mono text-sm">
              <div><strong>本地时间:</strong> {{ timestampResult.local }}</div>
              <div><strong>UTC时间:</strong> {{ timestampResult.utc }}</div>
              <div><strong>ISO格式:</strong> {{ timestampResult.iso }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 日期转时间戳 -->
      <div class="card p-4">
        <h3 class="text-lg font-semibold text-primary mb-3">{{ t('tools.timestamp_converter.date_to_timestamp') }}</h3>
        <div class="space-y-3">
          <input
            v-model="dateInput"
            type="datetime-local"
            class="input-field"
            @input="convertDateToTimestamp"
          >
          <button
            @click="useCurrentDate"
            class="btn-secondary"
          >
            使用当前时间
          </button>
          <div v-if="dateResult" class="space-y-2">
            <label class="block text-sm font-medium text-secondary">转换结果:</label>
            <div class="bg-block p-3 rounded font-mono text-sm">
              <div><strong>时间戳(秒):</strong> {{ dateResult.seconds }}</div>
              <div><strong>时间戳(毫秒):</strong> {{ dateResult.milliseconds }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速转换 -->
    <div class="card p-4">
      <h3 class="text-lg font-semibold text-primary mb-3">快速转换</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <button
          v-for="quick in quickOptions"
          :key="quick.label"
          @click="() => applyQuickTimestamp(quick.timestamp)"
          class="btn-secondary text-sm"
        >
          {{ quick.label }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useLanguage } from '@/composables/useLanguage'

const { t } = useLanguage()

// 响应式状态
const currentTimestamp = ref(0)
const currentDateTime = ref('')
const timestampInput = ref('')
const dateInput = ref('')
const timestampResult = ref<any>(null)
const dateResult = ref<any>(null)

// 更新当前时间戳
const updateCurrentTime = () => {
  const now = new Date()
  currentTimestamp.value = Math.floor(now.getTime() / 1000)
  currentDateTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 时间戳转日期
const convertTimestampToDate = () => {
  const input = timestampInput.value.trim()
  if (!input) {
    timestampResult.value = null
    return
  }

  try {
    let timestamp = parseInt(input)
    
    // 判断是秒还是毫秒
    if (timestamp.toString().length === 10) {
      timestamp *= 1000
    }
    
    const date = new Date(timestamp)
    
    if (isNaN(date.getTime())) {
      timestampResult.value = { error: '无效的时间戳' }
      return
    }
    
    timestampResult.value = {
      local: date.toLocaleString('zh-CN'),
      utc: date.toUTCString(),
      iso: date.toISOString()
    }
  } catch (error) {
    timestampResult.value = { error: '转换失败' }
  }
}

// 日期转时间戳
const convertDateToTimestamp = () => {
  if (!dateInput.value) {
    dateResult.value = null
    return
  }

  try {
    const date = new Date(dateInput.value)
    const timestamp = date.getTime()
    
    if (isNaN(timestamp)) {
      dateResult.value = { error: '无效的日期' }
      return
    }
    
    dateResult.value = {
      seconds: Math.floor(timestamp / 1000),
      milliseconds: timestamp
    }
  } catch (error) {
    dateResult.value = { error: '转换失败' }
  }
}

// 使用当前时间戳
const useCurrentTimestamp = () => {
  timestampInput.value = currentTimestamp.value.toString()
  convertTimestampToDate()
}

// 使用当前日期
const useCurrentDate = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  
  dateInput.value = `${year}-${month}-${day}T${hours}:${minutes}`
  convertDateToTimestamp()
}

// 复制时间戳
const copyTimestamp = async () => {
  try {
    await navigator.clipboard.writeText(currentTimestamp.value.toString())
  } catch (error) {
    console.error('复制失败:', error)
  }
}

// 复制日期时间
const copyDateTime = async () => {
  try {
    await navigator.clipboard.writeText(currentDateTime.value)
  } catch (error) {
    console.error('复制失败:', error)
  }
}

// 快速选项
const quickOptions = [
  { label: '1小时前', timestamp: () => Math.floor(Date.now() / 1000) - 3600 },
  { label: '1天前', timestamp: () => Math.floor(Date.now() / 1000) - 86400 },
  { label: '1周前', timestamp: () => Math.floor(Date.now() / 1000) - 604800 },
  { label: '1月前', timestamp: () => Math.floor(Date.now() / 1000) - 2592000 }
]

// 应用快速时间戳
const applyQuickTimestamp = (timestampFn: () => number) => {
  timestampInput.value = timestampFn().toString()
  convertTimestampToDate()
}

// 定时器
let timer: NodeJS.Timeout

onMounted(() => {
  updateCurrentTime()
  timer = setInterval(updateCurrentTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script> 