'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import type { VoteSite } from '@/lib/vote'

export function VotePanel({ sites, canVote }: { sites: VoteSite[]; canVote: boolean }) {
  const t = useTranslations('Vote')
  const [busyId, setBusyId] = useState<number | null>(null)
  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)

  async function vote(site: VoteSite) {
    if (busyId !== null) return
    window.open(site.url, '_blank', 'noopener,noreferrer')
    setBusyId(site.id)
    setMessage(null)
    try {
      const res = await fetch('/api/vote', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ url: site.url }),
      })
      const d: { success?: boolean; error?: string; points?: number; siteName?: string; hours?: number; minutes?: number } =
        await res.json()
      if (d.success) {
        setMessage({ ok: true, text: t('success', { site: d.siteName ?? site.name, points: d.points ?? 0 }) })
      } else if (d.error === 'cooldown') {
        setMessage({ ok: false, text: t('cooldown', { hours: d.hours ?? 0, minutes: d.minutes ?? 0 }) })
      } else {
        setMessage({ ok: false, text: t(d.error === 'siteNotFound' ? 'siteNotFound' : 'genericError') })
      }
    } catch {
      setMessage({ ok: false, text: t('genericError') })
    } finally {
      setBusyId(null)
    }
  }

  if (sites.length === 0) return <p className="second-brown">{t('noSites')}</p>

  return (
    <div className="centered">
      {sites.map((s) => (
        <div key={s.id} className="item-box">
          {s.image_url && (
            // eslint-disable-next-line @next/next/no-img-element
            <img className="item-img-box" src={s.image_url} alt={s.name} />
          )}
          <p className="yellow-info">{s.name}</p>
          <p className="vp-color small-font">
            {s.points} {t('pv')}
          </p>
          {canVote ? (
            <button type="button" className="vote-button" onClick={() => vote(s)} disabled={busyId !== null}>
              {busyId === s.id ? t('voting') : t('vote')}
            </button>
          ) : (
            <a href={s.url} target="_blank" rel="noopener noreferrer">
              {t('vote')}
            </a>
          )}
        </div>
      ))}
      <hr />
      <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
        {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
      </div>
      {!canVote && <p className="second-brown small-font">{t('loginToVote')}</p>}
    </div>
  )
}