'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'

export default function AdminDashboardPage() {
  const router = useRouter()
  const [authenticated, setAuthenticated] = useState(false)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Check authentication
    fetch('/api/admin/check')
      .then((res) => res.json())
      .then((data) => {
        if (data.authenticated) {
          setAuthenticated(true)
        } else {
          router.push('/admin/login')
        }
      })
      .catch(() => {
        router.push('/admin/login')
      })
      .finally(() => {
        setLoading(false)
      })
  }, [router])

  const handleLogout = async () => {
    await fetch('/api/admin/logout', { method: 'POST' })
    router.push('/admin/login')
  }

  if (loading) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'var(--bg)'
      }}>
        <p style={{ color: 'var(--muted)' }}>Loading...</p>
      </div>
    )
  }

  if (!authenticated) {
    return null
  }

  return (
    <div style={{
      minHeight: '100vh',
      background: 'var(--bg)',
      padding: '40px 20px'
    }}>
      <div className="container" style={{ maxWidth: '800px', margin: '0 auto' }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '40px'
        }}>
          <h1>Admin Dashboard</h1>
          <div style={{ display: 'flex', gap: '12px' }}>
            <button
              onClick={() => router.push('/')}
              style={{
                padding: '10px 20px',
                background: 'transparent',
                border: '1px solid var(--border)',
                borderRadius: '8px',
                color: 'var(--text)',
                cursor: 'pointer',
                fontSize: '14px'
              }}
            >
              View Site
            </button>
            <button
              onClick={handleLogout}
              style={{
                padding: '10px 20px',
                background: '#dc2626',
                border: 'none',
                borderRadius: '8px',
                color: '#fff',
                cursor: 'pointer',
                fontSize: '14px'
              }}
            >
              Logout
            </button>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
          gap: '20px'
        }}>
          <button
            onClick={() => router.push('/admin/drops')}
            className="cta"
            style={{
              padding: '40px',
              fontSize: '18px',
              textAlign: 'center',
              display: 'block',
              width: '100%',
              cursor: 'pointer'
            }}
          >
            Drops Management
          </button>

          <button
            onClick={() => router.push('/admin/buyers')}
            className="cta"
            style={{
              padding: '40px',
              fontSize: '18px',
              textAlign: 'center',
              display: 'block',
              width: '100%',
              cursor: 'pointer'
            }}
          >
            Buyer Management
          </button>

          <button
            onClick={() => router.push('/admin/sales')}
            className="cta"
            style={{
              padding: '40px',
              fontSize: '18px',
              textAlign: 'center',
              display: 'block',
              width: '100%',
              cursor: 'pointer'
            }}
          >
            Sales Management
          </button>
        </div>
      </div>
    </div>
  )
}