'use client'

import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import '../admin.css'

interface PendingReview {
  id: string
  rating: number
  body: string
  status: string
  createdAt: string
  spot: { id: string; name: string } | null
  author: { name: string | null; email: string | null } | null
}

function ReviewModCard({ review, onDone }: { review: PendingReview; onDone: () => void }) {
  const [note, setNote] = useState('')
  const [busy, setBusy] = useState(false)
  const [done, setDone] = useState<string | null>(null)

  const moderate = async (action: string) => {
    setBusy(true)
    await fetch(`/api/reviews/${review.id}/moderate`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action, note: note || undefined }),
    })
    setDone(action)
    setBusy(false)
    setTimeout(onDone, 800)
  }

  if (done) {
    return (
      <div className="mod-card" style={{ opacity: 0.5 }}>
        <div className="mod-card-title">Review — <span className={`mod-status-badge ${done}`}>{done}</span></div>
      </div>
    )
  }

  return (
    <div className="mod-card">
      <div className="mod-card-header">
        <div>
          <div className="mod-card-title">
            {review.author?.name ?? review.author?.email ?? 'anónimo'}
            {' '}<span style={{ color: '#F5A623' }}>{'★'.repeat(review.rating)}{'☆'.repeat(5 - review.rating)}</span>
          </div>
          <div className="mod-card-meta">
            Spot: {review.spot
              ? <Link href={`/spots/${review.spot.id}`} target="_blank" style={{ color: 'var(--ov-blue)' }}>{review.spot.name}</Link>
              : '—'}
            {' · '}{new Date(review.createdAt).toLocaleDateString('pt-PT')}
          </div>
        </div>
        <span className={`mod-status-badge ${review.status}`}>{review.status}</span>
      </div>
      <p className="mod-card-desc">{review.body}</p>
      <div className="mod-actions">
        <input className="mod-note-input" placeholder="Nota (opcional)" value={note} onChange={(e) => setNote(e.target.value)} />
        <button className="mod-btn mod-btn-approve" onClick={() => moderate('APPROVED')} disabled={busy}>Aprovar</button>
        <button className="mod-btn mod-btn-reject" onClick={() => moderate('REJECTED')} disabled={busy}>Rejeitar</button>
      </div>
    </div>
  )
}

export default function AdminReviewsPage() {
  const [reviews, setReviews] = useState<PendingReview[]>([])
  const [loading, setLoading] = useState(true)

  const load = () => {
    setLoading(true)
    fetch('/api/admin/reviews')
      .then((r) => r.json())
      .then(({ reviews: data }) => setReviews(data ?? []))
      .finally(() => setLoading(false))
  }

  useEffect(() => { load() }, [])

  return (
    <div className="admin-page">
      <div className="admin-container">
        <h1 className="admin-title">Moderação de Reviews</h1>
        <p className="admin-subtitle">{reviews.length} review{reviews.length !== 1 ? 's' : ''} pendente{reviews.length !== 1 ? 's' : ''}</p>

        <div className="admin-tabs">
          <Link href="/admin" className="admin-tab">Dashboard</Link>
          <Link href="/admin/spots" className="admin-tab">Spots</Link>
          <Link href="/admin/reviews" className="admin-tab active">Reviews</Link>
        </div>

        {loading && <div className="admin-empty">A carregar…</div>}
        {!loading && reviews.length === 0 && <div className="admin-empty">Nenhuma review pendente. Tudo em dia!</div>}
        {!loading && reviews.length > 0 && (
          <div className="mod-list">
            {reviews.map((r) => <ReviewModCard key={r.id} review={r} onDone={load} />)}
          </div>
        )}
      </div>
    </div>
  )
}