import { useState, useEffect } from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'

interface DashboardStats {
  total_sources: number
  pending_sources: number
  pending_reports: number
  high_risk_sources: number
  sources_added_week: number
  reports_today: number
}

const AdminDashboard: NextPage = () => {
  const [stats, setStats] = useState<DashboardStats | null>(null)
  const [loading, setLoading] = useState(true)

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

  const fetchStats = async () => {
    try {
      const response = await fetch('/api/admin/dashboard')
      if (response.ok) {
        const data = await response.json()
        setStats(data)
      }
    } catch (error) {
      console.error('Failed to fetch stats:', error)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div>
        <Head>
          <title>Admin Panel - Infohliadka</title>
        </Head>
        <div>Loading...</div>
      </div>
    )
  }

  return (
    <div>
      <Head>
        <title>Admin Panel - Infohliadka</title>
      </Head>

      <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
        <h1>Admin Dashboard</h1>
        
        {stats && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px', marginTop: '30px' }}>
            <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
              <h3>Celkové zdroje</h3>
              <div style={{ fontSize: '24px', fontWeight: 'bold' }}>{stats.total_sources}</div>
            </div>
            
            <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
              <h3>Čakajúce schválenie</h3>
              <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#f59e0b' }}>{stats.pending_sources}</div>
            </div>
            
            <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
              <h3>Vysoké riziko</h3>
              <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#ef4444' }}>{stats.high_risk_sources}</div>
            </div>
            
            <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
              <h3>Nové hlásenia</h3>
              <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#3b82f6' }}>{stats.pending_reports}</div>
            </div>
            
            <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
              <h3>Pridané tento týždeň</h3>
              <div style={{ fontSize: '24px', fontWeight: 'bold' }}>{stats.sources_added_week}</div>
            </div>
            
            <div style={{ padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
              <h3>Hlásenia dnes</h3>
              <div style={{ fontSize: '24px', fontWeight: 'bold' }}>{stats.reports_today}</div>
            </div>
          </div>
        )}

        <div style={{ marginTop: '40px' }}>
          <h2>Rýchle akcie</h2>
          <div style={{ display: 'flex', gap: '15px', marginTop: '20px' }}>
            <a href="/admin/sources" style={{ 
              padding: '12px 24px', 
              backgroundColor: '#3b82f6', 
              color: 'white', 
              textDecoration: 'none', 
              borderRadius: '6px' 
            }}>
              Správa zdrojov
            </a>
            <a href="/admin/reports" style={{ 
              padding: '12px 24px', 
              backgroundColor: '#10b981', 
              color: 'white', 
              textDecoration: 'none', 
              borderRadius: '6px' 
            }}>
              Hlásenia
            </a>
          </div>
        </div>
      </div>
    </div>
  )
}

export default AdminDashboard