import { useEffect, useState } from 'react'
import { getDashboardStats } from '../api/client'
import { Server, Database, Folder, HardDrive, Cpu, MemoryStick } from 'lucide-react'

interface Stats {
  site_count: number
  ftp_count: number
  database_count: number
  system: {
    cpu_percent: number
    memory_percent: number
    memory_used_mb: number
    memory_total_mb: number
    disk_percent: number
    disk_used_gb: number
    disk_total_gb: number
  }
}

export function DashboardPage() {
  const [stats, setStats] = useState<Stats | null>(null)
  const [error, setError] = useState('')

  useEffect(() => {
    getDashboardStats()
      .then(setStats)
      .catch((err) => setError(err.message))
  }, [])

  if (error) {
    return (
      <div className="p-4 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-700">
        {error}
      </div>
    )
  }

  if (!stats) {
    return <div className="text-gray-500">Loading...</div>
  }

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Dashboard</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <StatCard
          icon={<Server className="w-8 h-8" />}
          title="Websites"
          value={stats.site_count}
        />
        <StatCard
          icon={<Folder className="w-8 h-8" />}
          title="FTP Accounts"
          value={stats.ftp_count}
        />
        <StatCard
          icon={<Database className="w-8 h-8" />}
          title="Databases"
          value={stats.database_count}
        />
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <StatCard
          icon={<Cpu className="w-8 h-8" />}
          title="CPU"
          value={`${stats.system.cpu_percent}%`}
        />
        <StatCard
          icon={<MemoryStick className="w-8 h-8" />}
          title="Memory"
          value={`${stats.system.memory_percent}%`}
          subtitle={`${stats.system.memory_used_mb} / ${stats.system.memory_total_mb} MB`}
        />
        <StatCard
          icon={<HardDrive className="w-8 h-8" />}
          title="Disk"
          value={`${stats.system.disk_percent}%`}
          subtitle={`${stats.system.disk_used_gb} / ${stats.system.disk_total_gb} GB`}
        />
      </div>
    </div>
  )
}

function StatCard({
  icon,
  title,
  value,
  subtitle,
}: {
  icon: React.ReactNode
  title: string
  value: string | number
  subtitle?: string
}) {
  return (
    <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700">
      <div className="flex items-center gap-3">
        <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
          {icon}
        </div>
        <div>
          <p className="text-sm text-gray-500 dark:text-gray-400">{title}</p>
          <p className="text-xl font-bold text-gray-800 dark:text-white">{value}</p>
          {subtitle && (
            <p className="text-xs text-gray-500 dark:text-gray-400">{subtitle}</p>
          )}
        </div>
      </div>
    </div>
  )
}
