'use client'

import { useEffect, useRef, useState } from 'react'
import { authFetch, getApiBase } from '../../lib/auth'

type Delivery = { id: string; month: string; state: string; detail: string }
type Preference = { email: string | null; can_send: boolean; state: string; detail: string; deliveries: Delivery[] }

export default function EmailReportControl({ month }: { month: string }) {
  const [data, setData] = useState<Preference | null>(null)
  const [busy, setBusy] = useState(false)
  const [notice, setNotice] = useState('')
  const [error, setError] = useState('')
  const [revision, setRevision] = useState(0)
  const request = useRef<{ month: string; id: string } | null>(null)
  const pending = data?.deliveries.some((item) => ['queued', 'preparing', 'sending', 'retry'].includes(item.state)) ?? false

  useEffect(() => {
    const abort = new AbortController()
    void authFetch(`${getApiBase()}/profile/email-recaps`, { signal: abort.signal }).then(async (response) => {
      if (!response.ok) throw new Error('Could not load your report email preferences. Refresh to try again.')
      const result = await response.json()
      if (!abort.signal.aborted) setData(result)
    }).catch((err: Error) => { if (!abort.signal.aborted) setError(err.message) })
    return () => abort.abort()
  }, [revision])

  useEffect(() => {
    if (!pending) return
    const timer = window.setInterval(() => setRevision((value) => value + 1), 10000)
    return () => window.clearInterval(timer)
  }, [pending])

  const send = async () => {
    if (busy || !data?.can_send) return
    setBusy(true); setError(''); setNotice('')
    if (request.current?.month !== month) request.current = { month, id: crypto.randomUUID() }
    try {
      const response = await authFetch(`${getApiBase()}/profile/email-recaps/send`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ month, request_id: request.current.id }),
      })
      const result = await response.json().catch(() => ({}))
      if (!response.ok) throw new Error(typeof result.detail === 'string' ? result.detail : 'Could not queue your report. Try again.')
      setNotice(result.message); request.current = null
      setRevision((value) => value + 1)
    } catch (err) { setError(err instanceof Error ? err.message : 'Could not queue your report.') }
    finally { setBusy(false) }
  }

  return <section className="stats-panel report-email-panel" aria-label="Email your report">
    <div className="stats-panel-heading"><h2>Email yourself this report</h2><a href="/profile#monthly-recaps">Email preferences</a></div>
    <p>Choose a month above, including the current month so far, then send its viewing and request summary to your confirmed profile email.</p>
    {data?.can_send ? <p><strong>{data.email}</strong> · One report email every five minutes.</p> : data && <p>{data.state === 'enabled' ? data.detail : 'Confirm your profile email in Email preferences first. You can choose on-demand delivery without automatic monthly emails.'}</p>}
    <button type="button" disabled={busy || !data?.can_send} onClick={() => void send()}>{busy ? 'Queueing report…' : 'Email this report'}</button>
    {notice && <p role="status">{notice}</p>}
    {error && <p role="alert">{error}</p>}
    {!!data?.deliveries.length && <details><summary>Recent report emails</summary><ul>{data.deliveries.map((item) => <li key={item.id}><strong>{item.month}</strong> · {item.state === 'sent' ? 'Accepted by mail server' : item.state} — {item.detail || 'Waiting for delivery'}</li>)}</ul></details>}
  </section>
}