'use client'

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

interface PendingSpot {
  id: string
  name: string
  description: string
  lat: number
  lng: number
  difficulty: string
  status: string
  createdAt: string
  author: { name: string | null; email: string | null } | null
}

function SpotModCard({ spot, onDone }: { spot: PendingSpot; 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/spots/${spot.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">{spot.name} — <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">{spot.name}</div>
          <div className="mod-card-meta">
            {spot.difficulty} · {spot.lat.toFixed(4)}, {spot.lng.toFixed(4)} · {spot.author?.name ?? spot.author?.email ?? 'anónimo'} · {new Date(spot.createdAt).toLocaleDateString('pt-PT')}
          </div>
        </div>
        <span className={`mod-status-badge ${spot.status}`}>{spot.status}</span>
      </div>
      <p className="mod-card-desc">{spot.description}</p>
      <div style={{ marginBottom: 'var(--ov-space-3)' }}>
        <Link href={`/spots/${spot.id}`} target="_blank" style={{ fontSize: 'var(--ov-fs-xs)', color: 'var(--ov-blue)', fontFamily: 'var(--ov-font-sans)' }}>
          Ver spot →
        </Link>
      </div>
      <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-revision" onClick={() => moderate('REVISION')} disabled={busy}>Revisão</button>
        <button className="mod-btn mod-btn-reject" onClick={() => moderate('REJECTED')} disabled={busy}>Rejeitar</button>
      </div>
    </div>
  )
}

export default function AdminSpotsPage() {
  const [spots, setSpots] = useState<PendingSpot[]>([])
  const [loading, setLoading] = useState(true)

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

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

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

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

        {loading && <div className="admin-empty">A carregar…</div>}
        {!loading && spots.length === 0 && <div className="admin-empty">Nenhum spot pendente. Tudo em dia!</div>}
        {!loading && spots.length > 0 && (
          <div className="mod-list">
            {spots.map((s) => <SpotModCard key={s.id} spot={s} onDone={load} />)}
          </div>
        )}
      </div>
    </div>
  )
}