import { useCallback, useEffect, useMemo, useState } from 'react'
import '@fortawesome/fontawesome-free/css/all.min.css'
import './App.css'

const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL || '/api').replace(/\/$/, '')
const ADMIN_URL = import.meta.env.VITE_ADMIN_URL || 'http://localhost:5002/admin/login'
const DEFAULT_FORM = Object.freeze({
  name: '',
  message: '',
  gender: '保密',
  qq: '',
})

const BACKGROUND_IMAGES = Array.from({ length: 29 }, (_, index) => `/background/image${index + 1}.png`)

const formatCount = (value) => {
  const num = typeof value === 'number' ? value : Number(value || 0)
  return Number.isNaN(num) ? 0 : num
}

function App() {
  const [formData, setFormData] = useState({ ...DEFAULT_FORM })
  const [limits, setLimits] = useState({ name: 7, message: 100 })
  const [stats, setStats] = useState({ total_bottles: 0 })
  const [motto, setMotto] = useState('载入中...')
  const [throwStatus, setThrowStatus] = useState('')
  const [pickupStatus, setPickupStatus] = useState('')
  const [currentBottle, setCurrentBottle] = useState(null)
  const [cooldowns, setCooldowns] = useState({ throw: 0, pickup: 0 })
  const [loadingAction, setLoadingAction] = useState({ throw: false, pickup: false })
  const [reactionDisabled, setReactionDisabled] = useState(false)
  const isThrowing = loadingAction.throw
  const isPicking = loadingAction.pickup

  const randomBackground = useMemo(() => {
    if (!BACKGROUND_IMAGES.length) {
      return ''
    }
    const index = Math.floor(Math.random() * BACKGROUND_IMAGES.length)
    return BACKGROUND_IMAGES[index]
  }, [])

  useEffect(() => {
    if (randomBackground) {
      document.documentElement.style.setProperty('--app-background-image', `url(${randomBackground})`)
    }
  }, [randomBackground])

  const startCooldown = useCallback((type, seconds = 5) => {
    const duration = Math.max(1, Math.ceil(seconds))
    setCooldowns((prev) => ({ ...prev, [type]: duration }))
  }, [])

  useEffect(() => {
    const timer = setInterval(() => {
      setCooldowns((prev) => {
        const next = {
          throw: prev.throw > 0 ? prev.throw - 1 : 0,
          pickup: prev.pickup > 0 ? prev.pickup - 1 : 0,
        }
        if (next.throw === prev.throw && next.pickup === prev.pickup) {
          return prev
        }
        return next
      })
    }, 1000)
    return () => clearInterval(timer)
  }, [])

  const fetchConfig = useCallback(async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/config`)
      const data = await response.json()
      if (data.success && data.config) {
        setLimits({
          name: data.config.name_limit ?? 7,
          message: data.config.message_limit ?? 100,
        })
      }
    } catch (error) {
      console.error('Failed to fetch config', error)
    }
  }, [])

  const fetchStats = useCallback(async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/stats`)
      const data = await response.json()
      if (data.success && data.stats) {
        setStats(data.stats)
      }
    } catch (error) {
      console.error('Failed to fetch stats', error)
    }
  }, [])

  const fetchMotto = useCallback(async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/motto`)
      const data = await response.json()
      if (data.success) {
        setMotto(data.motto)
      }
    } catch (error) {
      console.error('Failed to fetch motto', error)
      setMotto('良言一句三冬暖，恶语伤人六月寒')
    }
  }, [])

  useEffect(() => {
    fetchConfig()
    fetchStats()
    fetchMotto()
  }, [fetchConfig, fetchStats, fetchMotto])

  const handleInputChange = useCallback((event) => {
    const { name, value } = event.target
    if (name === 'qq' && value && /[^0-9]/.test(value)) {
      return
    }
    setFormData((prev) => ({ ...prev, [name]: value }))
  }, [])

  const resetForm = useCallback(() => {
    setFormData({ ...DEFAULT_FORM })
  }, [])

  const handleThrowSubmit = useCallback(
    async (event) => {
      event.preventDefault()
      if (cooldowns.throw > 0 || isThrowing) {
        return
      }

      setLoadingAction((prev) => ({ ...prev, throw: true }))
      setThrowStatus('正在扔瓶子...')

      try {
        const response = await fetch(`${API_BASE_URL}/throw`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            name: formData.name,
            message: formData.message,
            gender: formData.gender,
            qq: formData.qq,
          }),
        })

        const data = await response.json()
        if (response.ok && data.success) {
          setThrowStatus('瓶子已成功扔出！祝你好运~')
          resetForm()
          fetchStats()
          startCooldown('throw', 5)
        } else {
          const waitTime = data.wait_time ?? 0
          setThrowStatus(`出错了: ${data.error || data.message || '未知错误'}`)
          if (waitTime) {
            startCooldown('throw', waitTime)
          }
        }
      } catch (error) {
        console.error('Throw request failed', error)
        setThrowStatus('请求失败，请检查网络连接。')
      } finally {
        setLoadingAction((prev) => ({ ...prev, throw: false }))
      }
    },
    [cooldowns.throw, isThrowing, formData, fetchStats, resetForm, startCooldown],
  )

  const handlePickup = useCallback(async () => {
    if (cooldowns.pickup > 0 || isPicking) {
      return
    }
    setLoadingAction((prev) => ({ ...prev, pickup: true }))
    setPickupStatus('正在打捞瓶子...')

    try {
      const response = await fetch(`${API_BASE_URL}/pickup`)
      const data = await response.json()
      if (response.ok && data.success && data.bottle) {
        setCurrentBottle(data.bottle)
        setReactionDisabled(false)
        setPickupStatus('捡到了一个瓶子！缘分来了~')
        startCooldown('pickup', 5)
      } else {
        setCurrentBottle(null)
        const waitTime = data.wait_time ?? 0
        setPickupStatus(data.message || data.error || '海里没有瓶子了，或者出错了。')
        if (waitTime) {
          startCooldown('pickup', waitTime)
        }
      }
    } catch (error) {
      console.error('Pickup request failed', error)
      setPickupStatus('请求失败，请检查网络连接。')
      setCurrentBottle(null)
    } finally {
      setLoadingAction((prev) => ({ ...prev, pickup: false }))
    }
  }, [cooldowns.pickup, isPicking, startCooldown])

  const handleReaction = useCallback(
    async (reaction) => {
      if (!currentBottle) {
        return
      }
      setReactionDisabled(true)
      try {
        const response = await fetch(`${API_BASE_URL}/react`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ bottle_id: currentBottle.id, reaction }),
        })
        const data = await response.json()
        if (response.ok && data.success) {
          setCurrentBottle((prev) =>
            prev
              ? {
                  ...prev,
                  likes: reaction === 'like' ? formatCount(prev.likes) + 1 : prev.likes,
                  dislikes: reaction === 'dislike' ? formatCount(prev.dislikes) + 1 : prev.dislikes,
                }
              : prev,
          )
          setPickupStatus(
            reaction === 'like' ? '感谢您的点赞！' : '已记录您的反馈，该瓶子被捡起的概率将会降低。',
          )
        } else {
          setPickupStatus(data.error || '记录反馈时出错。')
          setReactionDisabled(false)
        }
      } catch (error) {
        console.error('Reaction request failed', error)
        setPickupStatus('请求失败，请稍后再试。')
        setReactionDisabled(false)
      }
    },
    [currentBottle],
  )

  const nameCharCount = useMemo(() => formData.name.length, [formData.name])
  const messageCharCount = useMemo(() => formData.message.length, [formData.message])

  return (
    <div className="page-wrapper">
      <div className="background-overlay" aria-hidden="true" />

      <div className="container">
        <h1>
          <i className="fas fa-heart heart-icon" /> 萌芽漂流瓶{' '}
          <i className="fas fa-heart heart-icon" />
        </h1>
        <p className="tagline">让心意随海浪飘向远方，邂逅那个懂你的人(´,,•ω•,,)♡...</p>


        <div className="stats-container">
          <p>
            <i className="fas fa-wine-bottle" /> 海洋中共有{' '}
            <span id="total-bottles">{formatCount(stats.total_bottles)}</span> 个漂流瓶在寻找有缘人
          </p>
        </div>

        <div className="action-section throw-section">
          <h2>
            <i className="fas fa-paper-plane" /> 扔一个漂流瓶(,,・ω・,,)
          </h2>
          <form id="throw-bottle-form" onSubmit={handleThrowSubmit}>
            <div>
              <label htmlFor="name">
                你的昵称:{' '}
                <span className={`char-count ${nameCharCount >= limits.name ? 'char-count-limit' : ''}`}>
                  <span id="name-char-count">{nameCharCount}</span>/{' '}
                  <span id="name-limit">{limits.name}</span>
                </span>
              </label>
              <input
                id="name"
                name="name"
                type="text"
                value={formData.name}
                onChange={handleInputChange}
                maxLength={limits.name}
                placeholder="告诉对方你是谁..."
                required
              />
            </div>

            <div>
              <label htmlFor="message">
                漂流瓶内容:{' '}
                <span
                  className={`char-count ${
                    messageCharCount >= limits.message ? 'char-count-limit' : ''
                  }`}
                >
                  <span id="message-char-count">{messageCharCount}</span>/{' '}
                  <span id="message-limit">{limits.message}</span>
                </span>
              </label>
              <textarea
                id="message"
                name="message"
                rows="4"
                value={formData.message}
                onChange={handleInputChange}
                maxLength={limits.message}
                placeholder="写下你想说的话，也许会有人懂..."
                required
              />
            </div>

            <div>
              <label htmlFor="gender">性别:</label>
              <select id="gender" name="gender" value={formData.gender} onChange={handleInputChange}>
                <option value="保密">保密</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>

            <div>
              <label htmlFor="qq">QQ号 (选填):</label>
              <input
                id="qq"
                name="qq"
                type="text"
                value={formData.qq}
                inputMode="numeric"
                pattern="[0-9]*"
                onChange={handleInputChange}
                placeholder="填写QQ号展示头像..."
              />
            </div>

            {cooldowns.throw > 0 ? (
              <div id="throw-cooldown" className="cooldown-timer">
                <i className="fas fa-hourglass-half" /> 冷却中: <span id="throw-countdown">{cooldowns.throw}</span> 秒
              </div>
            ) : (
              <button type="submit" id="throw-button" className="btn-throw" disabled={isThrowing}>
                <i className="fas fa-paper-plane" /> {isThrowing ? '正在扔瓶子...' : '扔出去'}
              </button>
            )}
          </form>
          <p id="throw-status">{throwStatus}</p>
        </div>

        <div className="action-section pickup-section">
          <h2>
            <i className="fas fa-search-location" /> 捡一个漂流瓶(,,・ω・,,)
          </h2>

          {cooldowns.pickup > 0 ? (
            <div id="pickup-cooldown" className="cooldown-timer">
              <i className="fas fa-hourglass-half" /> 冷却中: <span id="pickup-countdown">{cooldowns.pickup}</span> 秒
            </div>
          ) : (
            <button
              type="button"
              id="pickup-bottle-button"
              className="btn-pickup"
              onClick={handlePickup}
              disabled={isPicking}
            >
              <i className="fas fa-hand-paper" /> {isPicking ? '正在打捞...' : '捡瓶子'}
            </button>
          )}

          {currentBottle && (
            <div id="bottle-display" className="appear">
              <div className="bottle-header">
                {currentBottle.qq_avatar_url ? (
                  <img id="bottle-avatar" src={currentBottle.qq_avatar_url} alt="QQ Avatar" />
                ) : null}
                <h3>
                  来自 <span id="bottle-name">{currentBottle.name}</span>{' '}
                  <span className="gender-badge" id="bottle-gender">
                    {currentBottle.gender || '保密'}
                  </span>{' '}
                  的漂流瓶
                </h3>
              </div>

              <div className="message-content">
                <p id="bottle-message">{currentBottle.message}</p>
              </div>

              <div className="bottle-footer">
                <div className="bottle-info">
                  <small>
                    <i className="far fa-clock" /> 时间: <span id="bottle-timestamp">{currentBottle.timestamp}</span>
                  </small>
                  <small>
                    <i className="fas fa-map-marker-alt" /> IP:{' '}
                    <span id="bottle-ip">{currentBottle.ip_address || '未知'}</span>
                  </small>
                  {currentBottle.qq_number ? (
                    <small id="bottle-qq-number">
                      <i className="fab fa-qq" /> QQ: <span id="qq-number-val">{currentBottle.qq_number}</span>
                    </small>
                  ) : null}
                </div>

                <div className="bottle-reactions">
                  <button
                    type="button"
                    id="like-button"
                    className="reaction-btn like-btn"
                    onClick={() => handleReaction('like')}
                    disabled={reactionDisabled}
                  >
                    <i className="far fa-thumbs-up" /> <span id="like-count">{formatCount(currentBottle.likes)}</span>
                  </button>
                  <button
                    type="button"
                    id="dislike-button"
                    className="reaction-btn dislike-btn"
                    onClick={() => handleReaction('dislike')}
                    disabled={reactionDisabled}
                  >
                    <i className="far fa-thumbs-down" />{' '}
                    <span id="dislike-count">{formatCount(currentBottle.dislikes)}</span>
                  </button>
                </div>
              </div>
            </div>
          )}

          <p id="pickup-status">{pickupStatus}</p>
        </div>

        <footer>
          <p>
            © 2025 萌芽漂流瓶-蜀ICP备2025151694号 <i className="fas fa-heart" />
          </p>

        </footer>
      </div>
    </div>
  )
}

export default App