<template>
  <div class="space-y-6">
    <!-- 工具栏 -->
    <div class="card p-4">
      <div class="flex flex-wrap gap-2">
        <button
          @click="updateCurrentTime"
          class="btn-primary"
        >
          <FontAwesomeIcon :icon="['fas', 'sync']" class="mr-2" />
          刷新时间
        </button>
        
        <button
          @click="copyResult"
          :disabled="!selectedTime"
          class="btn-secondary"
        >
          <FontAwesomeIcon 
            :icon="copied ? ['fas', 'check'] : ['fas', 'copy']" 
            :class="['mr-2', copied && 'text-success']"
          />
          复制时间
        </button>
        
        <button
          @click="resetToNow"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'clock']" class="mr-2" />
          当前时间
        </button>
        
        <button
          @click="addCustomTimezone"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'plus']" class="mr-2" />
          添加时区
        </button>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 输入区域 -->
      <div class="space-y-4">
        <!-- 时间输入 -->
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">输入时间</h3>
          
          <div class="space-y-4">
            <!-- 日期时间输入 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">选择日期时间</label>
              <input
                v-model="inputDateTime"
                type="datetime-local"
                class="input-field"
                @change="convertTimezones"
              >
            </div>
            
            <!-- 源时区 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">源时区</label>
              <select v-model="sourceTimezone" class="select-field" @change="convertTimezones">
                <option v-for="timezone in commonTimezones" :key="timezone.value" :value="timezone.value">
                  {{ timezone.label }}
                </option>
              </select>
            </div>
            
            <!-- 快速时间选择 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">快速选择</label>
              <div class="grid grid-cols-2 gap-2">
                <button
                  v-for="quickTime in quickTimes"
                  :key="quickTime.label"
                  @click="setQuickTime(quickTime)"
                  class="btn-sm btn-secondary text-xs"
                >
                  {{ quickTime.label }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 常用时区 -->
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">常用时区</h3>
          
          <div class="space-y-2">
            <div
              v-for="timezone in commonTimezones.slice(0, 8)"
              :key="timezone.value"
              class="flex items-center justify-between p-2 bg-block rounded"
            >
              <div>
                <div class="font-medium text-primary">{{ timezone.name }}</div>
                <div class="text-sm text-secondary">{{ timezone.value }}</div>
              </div>
              <div class="text-sm text-primary font-mono">
                {{ getTimezoneTime(timezone.value) }}
              </div>
            </div>
          </div>
        </div>

        <!-- 时区偏移计算 -->
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">时差计算</h3>
          
          <div class="space-y-3">
            <div class="flex space-x-2">
              <select v-model="timezone1" class="select-field flex-1">
                <option v-for="timezone in commonTimezones" :key="timezone.value" :value="timezone.value">
                  {{ timezone.name }}
                </option>
              </select>
              <span class="self-center text-secondary">vs</span>
              <select v-model="timezone2" class="select-field flex-1">
                <option v-for="timezone in commonTimezones" :key="timezone.value" :value="timezone.value">
                  {{ timezone.name }}
                </option>
              </select>
            </div>
            
            <div class="bg-block rounded p-3 text-center">
              <div class="text-sm text-secondary">时差</div>
              <div class="text-lg font-medium text-primary">{{ getTimeDifference() }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 结果区域 -->
      <div class="lg:col-span-2 space-y-4">
        <!-- 世界时钟 -->
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">世界时钟</h3>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div
              v-for="timezone in displayTimezones"
              :key="timezone.value"
              class="bg-block rounded-lg p-4"
            >
              <div class="flex items-center justify-between mb-2">
                <div>
                  <div class="font-medium text-primary">{{ timezone.name }}</div>
                  <div class="text-xs text-tertiary">{{ timezone.value }}</div>
                </div>
                <button
                  @click="removeTimezone(timezone.value)"
                  class="text-error hover:bg-error hover:bg-opacity-10 p-1 rounded"
                >
                  <FontAwesomeIcon :icon="['fas', 'times']" />
                </button>
              </div>
              
              <div class="text-center">
                <div class="text-2xl font-mono font-bold text-primary mb-1">
                  {{ getTimezoneTime(timezone.value, 'HH:mm:ss') }}
                </div>
                <div class="text-sm text-secondary">
                  {{ getTimezoneTime(timezone.value, 'yyyy-MM-dd EEEE') }}
                </div>
                <div class="text-xs text-tertiary mt-1">
                  UTC{{ getTimezoneOffset(timezone.value) }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 转换结果 -->
        <div v-if="conversionResults.length > 0" class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">转换结果</h3>
          
          <div class="space-y-3">
            <div
              v-for="result in conversionResults"
              :key="result.timezone"
              class="flex items-center justify-between p-3 bg-block rounded-lg"
            >
              <div class="flex-1">
                <div class="font-medium text-primary">{{ result.name }}</div>
                <div class="text-sm text-secondary">{{ result.timezone }}</div>
              </div>
              
              <div class="text-right">
                <div class="text-lg font-mono text-primary">{{ result.time }}</div>
                <div class="text-xs text-secondary">{{ result.date }}</div>
              </div>
              
              <button
                @click="copySpecificTime(result)"
                class="ml-3 p-2 text-secondary hover:text-primary transition-colors"
                :title="'复制 ' + result.name + ' 时间'"
              >
                <FontAwesomeIcon :icon="['fas', 'copy']" />
              </button>
            </div>
          </div>
        </div>

        <!-- 时区信息 -->
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">时区信息</h3>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- UTC时间 -->
            <div class="bg-block rounded-lg p-4">
              <div class="text-sm text-secondary mb-1">协调世界时 (UTC)</div>
              <div class="text-xl font-mono text-primary">{{ utcTime }}</div>
              <div class="text-xs text-tertiary mt-1">Coordinated Universal Time</div>
            </div>
            
            <!-- 本地时间 -->
            <div class="bg-block rounded-lg p-4">
              <div class="text-sm text-secondary mb-1">本地时间</div>
              <div class="text-xl font-mono text-primary">{{ localTime }}</div>
              <div class="text-xs text-tertiary mt-1">{{ localTimezone }}</div>
            </div>
            
            <!-- Unix时间戳 -->
            <div class="bg-block rounded-lg p-4">
              <div class="text-sm text-secondary mb-1">Unix时间戳</div>
              <div class="text-lg font-mono text-primary">{{ unixTimestamp }}</div>
              <div class="text-xs text-tertiary mt-1">秒 / 毫秒</div>
            </div>
            
            <!-- ISO 8601 -->
            <div class="bg-block rounded-lg p-4">
              <div class="text-sm text-secondary mb-1">ISO 8601</div>
              <div class="text-sm font-mono text-primary break-all">{{ isoTime }}</div>
              <div class="text-xs text-tertiary mt-1">国际标准时间格式</div>
            </div>
          </div>
        </div>

        <!-- 日程助手 -->
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">会议时间建议</h3>
          
          <div class="space-y-3">
            <div class="flex space-x-2">
              <select v-model="meetingTimezone1" class="select-field flex-1">
                <option v-for="timezone in commonTimezones" :key="timezone.value" :value="timezone.value">
                  {{ timezone.name }}
                </option>
              </select>
              <select v-model="meetingTimezone2" class="select-field flex-1">
                <option v-for="timezone in commonTimezones" :key="timezone.value" :value="timezone.value">
                  {{ timezone.name }}
                </option>
              </select>
            </div>
            
            <div class="bg-block rounded p-4">
              <div class="text-sm text-secondary mb-2">最佳会议时间段 (工作时间 9:00-18:00)</div>
              <div class="space-y-2">
                <div
                  v-for="suggestion in getMeetingSuggestions()"
                  :key="suggestion.time"
                  class="flex justify-between items-center text-sm"
                >
                  <span class="text-primary">{{ suggestion.time }}</span>
                  <span class="text-secondary">{{ suggestion.zones }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 状态消息 -->
    <div v-if="statusMessage" class="card p-4">
      <div :class="[
        'flex items-center space-x-2',
        statusType === 'success' ? 'text-success' : 'text-error'
      ]">
        <FontAwesomeIcon 
          :icon="statusType === 'success' ? ['fas', 'check'] : ['fas', 'times']" 
        />
        <span>{{ statusMessage }}</span>
      </div>
    </div>
  </div>
</template>

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

const { t } = useLanguage()

// 响应式状态
const inputDateTime = ref('')
const sourceTimezone = ref('Asia/Shanghai')
const selectedTime = ref('')
const copied = ref(false)
const statusMessage = ref('')
const statusType = ref<'success' | 'error'>('success')
const currentTime = ref(new Date())

// 时区比较
const timezone1 = ref('Asia/Shanghai')
const timezone2 = ref('America/New_York')

// 会议时间建议
const meetingTimezone1 = ref('Asia/Shanghai')
const meetingTimezone2 = ref('America/New_York')

// 显示的时区列表
const displayTimezones = ref([
  { name: '北京', value: 'Asia/Shanghai' },
  { name: '纽约', value: 'America/New_York' },
  { name: '伦敦', value: 'Europe/London' },
  { name: '东京', value: 'Asia/Tokyo' }
])

// 转换结果
const conversionResults = ref<Array<{
  name: string
  timezone: string
  time: string
  date: string
  fullTime: string
}>>([])

// 常用时区
const commonTimezones = [
  { name: '北京 (CST)', value: 'Asia/Shanghai', label: 'Asia/Shanghai (UTC+8)' },
  { name: '东京 (JST)', value: 'Asia/Tokyo', label: 'Asia/Tokyo (UTC+9)' },
  { name: '首尔 (KST)', value: 'Asia/Seoul', label: 'Asia/Seoul (UTC+9)' },
  { name: '新加坡 (SGT)', value: 'Asia/Singapore', label: 'Asia/Singapore (UTC+8)' },
  { name: '香港 (HKT)', value: 'Asia/Hong_Kong', label: 'Asia/Hong_Kong (UTC+8)' },
  { name: '悉尼 (AEDT)', value: 'Australia/Sydney', label: 'Australia/Sydney (UTC+11)' },
  { name: '伦敦 (GMT)', value: 'Europe/London', label: 'Europe/London (UTC+0)' },
  { name: '巴黎 (CET)', value: 'Europe/Paris', label: 'Europe/Paris (UTC+1)' },
  { name: '莫斯科 (MSK)', value: 'Europe/Moscow', label: 'Europe/Moscow (UTC+3)' },
  { name: '纽约 (EST)', value: 'America/New_York', label: 'America/New_York (UTC-5)' },
  { name: '洛杉矶 (PST)', value: 'America/Los_Angeles', label: 'America/Los_Angeles (UTC-8)' },
  { name: '芝加哥 (CST)', value: 'America/Chicago', label: 'America/Chicago (UTC-6)' },
  { name: '丹佛 (MST)', value: 'America/Denver', label: 'America/Denver (UTC-7)' },
  { name: 'UTC', value: 'UTC', label: 'UTC (UTC+0)' }
]

// 快速时间选择
const quickTimes = [
  { label: '现在', offset: 0 },
  { label: '1小时后', offset: 1 },
  { label: '明天此时', offset: 24 },
  { label: '下周此时', offset: 24 * 7 }
]

// 计算属性
const utcTime = computed(() => {
  return formatTime(currentTime.value, 'UTC', 'yyyy-MM-dd HH:mm:ss')
})

const localTime = computed(() => {
  return formatTime(currentTime.value, Intl.DateTimeFormat().resolvedOptions().timeZone, 'yyyy-MM-dd HH:mm:ss')
})

const localTimezone = computed(() => {
  return Intl.DateTimeFormat().resolvedOptions().timeZone
})

const unixTimestamp = computed(() => {
  const seconds = Math.floor(currentTime.value.getTime() / 1000)
  const milliseconds = currentTime.value.getTime()
  return `${seconds} / ${milliseconds}`
})

const isoTime = computed(() => {
  return currentTime.value.toISOString()
})

// 定时器
let timeInterval: number | undefined

// 格式化时间
const formatTime = (date: Date, timezone: string, format: string): string => {
  try {
    const options: Intl.DateTimeFormatOptions = {
      timeZone: timezone
    }
    
    if (format.includes('yyyy')) {
      options.year = 'numeric'
    }
    if (format.includes('MM')) {
      options.month = '2-digit'
    }
    if (format.includes('dd')) {
      options.day = '2-digit'
    }
    if (format.includes('HH')) {
      options.hour = '2-digit'
      options.hour12 = false
    }
    if (format.includes('mm')) {
      options.minute = '2-digit'
    }
    if (format.includes('ss')) {
      options.second = '2-digit'
    }
    if (format.includes('EEEE')) {
      options.weekday = 'long'
    }
    
    const formatter = new Intl.DateTimeFormat('zh-CN', options)
    
    if (format === 'HH:mm:ss') {
      return date.toLocaleTimeString('zh-CN', {
        timeZone: timezone,
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    } else if (format === 'yyyy-MM-dd EEEE') {
      return date.toLocaleDateString('zh-CN', {
        timeZone: timezone,
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        weekday: 'long'
      })
    } else {
      return formatter.format(date)
    }
  } catch (error) {
    return date.toISOString()
  }
}

// 获取时区时间
const getTimezoneTime = (timezone: string, format: string = 'yyyy-MM-dd HH:mm:ss'): string => {
  return formatTime(currentTime.value, timezone, format)
}

// 获取时区偏移
const getTimezoneOffset = (timezone: string): string => {
  try {
    const date = new Date()
    const utc = date.getTime() + (date.getTimezoneOffset() * 60000)
    const targetTime = new Date(utc + getTimezoneOffsetMinutes(timezone) * 60000)
    const offset = getTimezoneOffsetMinutes(timezone) / 60
    return offset >= 0 ? `+${offset}` : `${offset}`
  } catch {
    return '+0'
  }
}

// 获取时区偏移分钟数
const getTimezoneOffsetMinutes = (timezone: string): number => {
  try {
    const date = new Date()
    const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }))
    const targetDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }))
    return (targetDate.getTime() - utcDate.getTime()) / (1000 * 60)
  } catch {
    return 0
  }
}

// 获取时差
const getTimeDifference = (): string => {
  const offset1 = getTimezoneOffsetMinutes(timezone1.value)
  const offset2 = getTimezoneOffsetMinutes(timezone2.value)
  const diffMinutes = Math.abs(offset1 - offset2)
  const hours = Math.floor(diffMinutes / 60)
  const minutes = diffMinutes % 60
  
  if (hours === 0) {
    return `${minutes} 分钟`
  } else if (minutes === 0) {
    return `${hours} 小时`
  } else {
    return `${hours} 小时 ${minutes} 分钟`
  }
}

// 获取会议建议
const getMeetingSuggestions = (): Array<{ time: string; zones: string }> => {
  const suggestions = []
  
  for (let hour = 9; hour <= 18; hour++) {
    const time1 = `${hour.toString().padStart(2, '0')}:00`
    const date = new Date()
    date.setHours(hour, 0, 0, 0)
    
    const time2 = formatTime(date, meetingTimezone2.value, 'HH:mm')
    const hour2 = parseInt(time2.split(':')[0])
    
    if (hour2 >= 9 && hour2 <= 18) {
      suggestions.push({
        time: `${time1} - ${time2}`,
        zones: `${getTimezoneName(meetingTimezone1.value)} - ${getTimezoneName(meetingTimezone2.value)}`
      })
    }
  }
  
  return suggestions.slice(0, 3)
}

// 获取时区名称
const getTimezoneName = (timezone: string): string => {
  const found = commonTimezones.find(tz => tz.value === timezone)
  return found ? found.name : timezone
}

// 设置快速时间
const setQuickTime = (quickTime: any) => {
  const date = new Date()
  date.setHours(date.getHours() + quickTime.offset)
  
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  
  inputDateTime.value = `${year}-${month}-${day}T${hours}:${minutes}`
  convertTimezones()
}

// 转换时区
const convertTimezones = () => {
  if (!inputDateTime.value) return
  
  const inputDate = new Date(inputDateTime.value)
  if (isNaN(inputDate.getTime())) return
  
  conversionResults.value = displayTimezones.value.map(timezone => {
    const time = formatTime(inputDate, timezone.value, 'HH:mm:ss')
    const date = formatTime(inputDate, timezone.value, 'yyyy-MM-dd EEEE')
    const fullTime = formatTime(inputDate, timezone.value, 'yyyy-MM-dd HH:mm:ss')
    
    return {
      name: timezone.name,
      timezone: timezone.value,
      time,
      date,
      fullTime
    }
  })
}

// 添加自定义时区
const addCustomTimezone = () => {
  const timezone = prompt('请输入时区标识符 (如: Asia/Shanghai):')
  if (!timezone) return
  
  try {
    // 验证时区是否有效
    formatTime(new Date(), timezone, 'HH:mm:ss')
    
    const name = prompt('请输入时区显示名称:', timezone) || timezone
    
    displayTimezones.value.push({
      name,
      value: timezone
    })
    
    convertTimezones()
    showStatus('时区添加成功', 'success')
  } catch (error) {
    showStatus('无效的时区标识符', 'error')
  }
}

// 移除时区
const removeTimezone = (timezone: string) => {
  displayTimezones.value = displayTimezones.value.filter(tz => tz.value !== timezone)
  convertTimezones()
}

// 更新当前时间
const updateCurrentTime = () => {
  currentTime.value = new Date()
}

// 重置到现在
const resetToNow = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, '0')
  const day = now.getDate().toString().padStart(2, '0')
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  
  inputDateTime.value = `${year}-${month}-${day}T${hours}:${minutes}`
  convertTimezones()
}

// 复制结果
const copyResult = async () => {
  if (!selectedTime.value) return
  
  try {
    await navigator.clipboard.writeText(selectedTime.value)
    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch (error) {
    showStatus('复制失败', 'error')
  }
}

// 复制特定时间
const copySpecificTime = async (result: any) => {
  try {
    await navigator.clipboard.writeText(result.fullTime)
    showStatus(`已复制 ${result.name} 时间`, 'success')
  } catch (error) {
    showStatus('复制失败', 'error')
  }
}

// 显示状态消息
const showStatus = (message: string, type: 'success' | 'error') => {
  statusMessage.value = message
  statusType.value = type
  setTimeout(() => {
    statusMessage.value = ''
  }, 3000)
}

// 组件挂载
onMounted(() => {
  resetToNow()
  updateCurrentTime()
  
  // 每秒更新时间
  timeInterval = setInterval(() => {
    updateCurrentTime()
  }, 1000)
})

// 组件卸载
onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script> 