import { useState, useCallback } from 'react'

function timestampToDate(ts: number): string {
  const d = new Date(ts * 1000)
  return d.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })
}

function dateToTimestamp(dateStr: string): number {
  return Math.floor(new Date(dateStr).getTime() / 1000)
}

export default function TimestampTool() {
  const [timestamp, setTimestamp] = useState('')
  const [dateStr, setDateStr] = useState('')
  const [tsResult, setTsResult] = useState('')
  const [dateResult, setDateResult] = useState('')
  const [now, setNow] = useState(Math.floor(Date.now() / 1000))

  const handleTsToDate = useCallback(() => {
    const ts = parseInt(timestamp, 10)
    if (isNaN(ts)) {
      setTsResult('请输入有效的时间戳')
      return
    }
    setTsResult(timestampToDate(ts))
  }, [timestamp])

  const handleDateToTs = useCallback(() => {
    if (!dateStr) {
      setDateResult('请选择日期时间')
      return
    }
    const ts = dateToTimestamp(dateStr)
    setDateResult(String(ts))
  }, [dateStr])

  const refreshNow = useCallback(() => {
    const n = Math.floor(Date.now() / 1000)
    setNow(n)
  }, [])

  const copyToTsInput = useCallback(() => {
    setTimestamp(String(now))
  }, [now])

  return (
    <div className="h-full flex flex-col gap-6">
      <div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
        <div className="text-sm text-gray-400 mb-2">当前时间戳</div>
        <div className="flex items-center gap-3">
          <code className="text-lg font-mono text-blue-400">{now}</code>
          <button onClick={refreshNow} className="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-xs transition-colors">刷新</button>
          <button onClick={copyToTsInput} className="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-xs transition-colors">填入</button>
          <span className="text-sm text-gray-400">{timestampToDate(now)}</span>
        </div>
      </div>

      <div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
        <label className="text-sm text-gray-400 mb-2 block">时间戳 → 日期</label>
        <div className="flex gap-2">
          <input
            className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 font-mono text-sm outline-none focus:border-blue-500"
            value={timestamp}
            onChange={(e) => setTimestamp(e.target.value)}
            placeholder="输入时间戳（秒）"
          />
          <button onClick={handleTsToDate} className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors shrink-0">转换</button>
        </div>
        {tsResult && <p className="mt-2 text-sm font-mono text-green-400">{tsResult}</p>}
      </div>

      <div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
        <label className="text-sm text-gray-400 mb-2 block">日期 → 时间戳</label>
        <div className="flex gap-2">
          <input
            type="datetime-local"
            className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500 [color-scheme:dark]"
            value={dateStr}
            onChange={(e) => setDateStr(e.target.value)}
          />
          <button onClick={handleDateToTs} className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors shrink-0">转换</button>
        </div>
        {dateResult && <p className="mt-2 text-sm font-mono text-green-400">{dateResult}</p>}
      </div>
    </div>
  )
}