import React from 'react'
import Link from 'next/link'
import type { Metadata } from 'next'
import { prisma } from '@/lib/prisma'
import './admin.css'

export const dynamic = 'force-dynamic'

export const metadata: Metadata = { title: 'Admin — OndeVoar.pt' }

export default async function AdminPage() {
  const [pendingSpots, pendingReviews, totalSpots, totalUsers] = await Promise.all([
    prisma.spot.count({ where: { status: 'PENDING' } }),
    prisma.review.count({ where: { status: 'PENDING' } }),
    prisma.spot.count({ where: { status: 'APPROVED' } }),
    prisma.user.count(),
  ])

  return (
    <div className="admin-page">
      <div className="admin-container">
        <h1 className="admin-title">Painel de Administração</h1>
        <p className="admin-subtitle">Moderação de spots, reviews e conteúdo da plataforma</p>

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

        <div className="admin-stats">
          <div className="admin-stat-card">
            <div className="admin-stat-num" style={{ color: pendingSpots > 0 ? 'var(--ov-cond-fg)' : undefined }}>
              {pendingSpots}
            </div>
            <div className="admin-stat-label">Spots pendentes</div>
          </div>
          <div className="admin-stat-card">
            <div className="admin-stat-num" style={{ color: pendingReviews > 0 ? 'var(--ov-cond-fg)' : undefined }}>
              {pendingReviews}
            </div>
            <div className="admin-stat-label">Reviews pendentes</div>
          </div>
          <div className="admin-stat-card">
            <div className="admin-stat-num">{totalSpots}</div>
            <div className="admin-stat-label">Spots aprovados</div>
          </div>
          <div className="admin-stat-card">
            <div className="admin-stat-num">{totalUsers}</div>
            <div className="admin-stat-label">Utilizadores</div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 'var(--ov-space-4)', flexWrap: 'wrap' }}>
          <Link
            href="/admin/spots"
            style={{
              padding: 'var(--ov-space-4) var(--ov-space-6)',
              background: pendingSpots > 0 ? 'var(--ov-navy)' : 'var(--ov-white)',
              color: pendingSpots > 0 ? 'var(--ov-white)' : 'var(--ov-steel)',
              border: '1.5px solid var(--ov-line)',
              borderRadius: 'var(--ov-radius-lg)',
              fontFamily: 'var(--ov-font-sans)',
              fontWeight: 600,
              fontSize: 'var(--ov-fs-sm)',
              textDecoration: 'none',
              display: 'flex',
              alignItems: 'center',
              gap: 'var(--ov-space-2)',
            }}
          >
            Moderar spots
            {pendingSpots > 0 && (
              <span style={{ background: 'var(--ov-cond)', borderRadius: '999px', padding: '1px 7px', fontSize: 11 }}>
                {pendingSpots}
              </span>
            )}
          </Link>
          <Link
            href="/admin/reviews"
            style={{
              padding: 'var(--ov-space-4) var(--ov-space-6)',
              background: pendingReviews > 0 ? 'var(--ov-navy)' : 'var(--ov-white)',
              color: pendingReviews > 0 ? 'var(--ov-white)' : 'var(--ov-steel)',
              border: '1.5px solid var(--ov-line)',
              borderRadius: 'var(--ov-radius-lg)',
              fontFamily: 'var(--ov-font-sans)',
              fontWeight: 600,
              fontSize: 'var(--ov-fs-sm)',
              textDecoration: 'none',
              display: 'flex',
              alignItems: 'center',
              gap: 'var(--ov-space-2)',
            }}
          >
            Moderar reviews
            {pendingReviews > 0 && (
              <span style={{ background: 'var(--ov-cond)', borderRadius: '999px', padding: '1px 7px', fontSize: 11 }}>
                {pendingReviews}
              </span>
            )}
          </Link>
        </div>
      </div>
    </div>
  )
}