'use client'

import { useSession } from 'next-auth/react'
import { redirect } from 'next/navigation'
import GrafanaPanel from '@/components/monitoring/GrafanaPanel'
import LokiLogViewer from '@/components/monitoring/LokiLogViewer'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/Tabs'

export default function MonitoringPage() {
  const { data: session, status } = useSession()

  if (status === 'loading') {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      </div>
    )
  }

  if (!session) {
    redirect('/api/auth/signin')
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6">Monitoring</h1>
      
      <Tabs defaultValue="grafana" className="space-y-4">
        <TabsList>
          <TabsTrigger value="grafana">Grafana Dashboards</TabsTrigger>
          <TabsTrigger value="logs">Logs (Loki)</TabsTrigger>
        </TabsList>

        <TabsContent value="grafana" className="space-y-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div>
              <h2 className="text-xl font-semibold mb-4">System Metrics</h2>
              <GrafanaPanel
                dashboardUID="system"
                panelId={1}
                height="400px"
              />
            </div>
            <div>
              <h2 className="text-xl font-semibold mb-4">Application Metrics</h2>
              <GrafanaPanel
                dashboardUID="application"
                panelId={2}
                height="400px"
              />
            </div>
          </div>
        </TabsContent>

        <TabsContent value="logs">
          <LokiLogViewer />
        </TabsContent>
      </Tabs>
    </div>
  )
}

