'use client';

import { useQuery } from '@tanstack/react-query';
import { Activity, AlertTriangle, Box, Server } from 'lucide-react';
import { MetricCard } from '@/components/dashboard/MetricCard';
import { RecentAlerts } from '@/components/dashboard/RecentAlerts';
import { api } from '@/lib/api';

export default function DashboardPage() {
  const { data: overview, isLoading } = useQuery({
    queryKey: ['dashboard', 'overview'],
    queryFn: () => api.get('/api/v1/dashboard/overview'),
    refetchInterval: 30000,
  });

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-white">
          🐍 OPHION Dashboard
        </h1>
        <span className="text-sm text-gray-400">
          {new Date().toLocaleString()}
        </span>
      </div>

      {/* Overview Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <MetricCard
          title="Agents"
          value={overview?.agents?.active ?? '-'}
          subtitle={`${overview?.agents?.total ?? 0} total`}
          icon={<Server className="h-5 w-5" />}
          color="blue"
        />
        <MetricCard
          title="Services"
          value={overview?.services?.count ?? '-'}
          subtitle="discovered"
          icon={<Box className="h-5 w-5" />}
          color="green"
        />
        <MetricCard
          title="Alerts"
          value={overview?.alerts?.firing ?? 0}
          subtitle="firing"
          icon={<AlertTriangle className="h-5 w-5" />}
          color={overview?.alerts?.firing > 0 ? 'red' : 'gray'}
        />
        <MetricCard
          title="Status"
          value="Healthy"
          subtitle="all systems operational"
          icon={<Activity className="h-5 w-5" />}
          color="green"
        />
      </div>

      {/* Alerts */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <RecentAlerts />
        
        <div className="bg-gray-900/50 rounded-lg p-4 border border-gray-800">
          <h3 className="text-lg font-semibold text-white mb-4">Quick Links</h3>
          <div className="space-y-2">
            <QuickLink href="/traces" label="View Traces" desc="Distributed tracing" />
            <QuickLink href="/logs" label="Search Logs" desc="Container logs" />
            <QuickLink href="/metrics" label="Metrics" desc="System metrics" />
            <QuickLink href="/services" label="Service Map" desc="Dependencies" />
          </div>
        </div>
      </div>
    </div>
  );
}

function QuickLink({ href, label, desc }: { href: string; label: string; desc: string }) {
  return (
    <a
      href={href}
      className="flex items-center justify-between p-3 bg-gray-800/50 rounded-lg hover:bg-gray-800 transition-colors"
    >
      <div>
        <p className="text-white font-medium">{label}</p>
        <p className="text-sm text-gray-400">{desc}</p>
      </div>
      <span className="text-gray-400">→</span>
    </a>
  );
}
