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

interface Stats {
  total_sources: number
  high_risk_sources: number
  categories_breakdown: { [key: string]: number }
  top_domains: { domain: string; count: number; risk_level: number }[]
}

const Dashboard: NextPage = () => {
  const [stats, setStats] = useState<Stats | null>(null)

  useEffect(() => {
    fetch('/api/stats')
      .then(res => res.json())
      .then(setStats)
  }, [])

  return (
    <div>
      <Head><title>Verejný dashboard - Infohliadka</title></Head>
      <div style={{ padding: '40px 20px', maxWidth: '1200px', margin: '0 auto' }}>
        <h1>Verejný dashboard</h1>
        {stats && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '20px', marginTop: '30px' }}>
            <div style={{ padding: '20px', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
              <h3>Celkové štatistiky</h3>
              <p>Problematické zdroje: <strong>{stats.total_sources}</strong></p>
              <p>Vysoké riziko: <strong>{stats.high_risk_sources}</strong></p>
            </div>
            <div style={{ padding: '20px', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
              <h3>Top rizikoové domény</h3>
              {stats.top_domains.slice(0, 5).map((domain, i) => (
                <div key={i}>
                  <strong>{domain.domain}</strong> (riziko: {domain.risk_level})
                </div>
              ))}
            </div>
          </div>
        )}
        <div style={{ marginTop: '40px' }}>
          <Link href="/">← Späť na hlavnú stránku</Link>
        </div>
      </div>
    </div>
  )
}

export default Dashboard