bootnode/web/app/dashboard/page.tsx

"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/lib/auth"
import {
  Activity,
  Server,
  Network,
  Users,
  Zap,
  Key,
  Webhook,
  TrendingUp,
  Building,
  Loader2
} from "lucide-react"

interface DashboardStats {
  api_requests: number
  api_requests_change: number
  active_nodes: number
  nodes_change: number
  networks: number
  uptime: number
  uptime_change: number
  team_members: number
  projects: number
  api_keys: number
  webhooks: number
}

interface NetworkStatus {
  name: string
  status: string
  nodes: number
  latency: string
}

export default function DashboardPage() {
  const { user } = useAuth()
  const [mounted, setMounted] = useState(false)
  const [loading, setLoading] = useState(true)
  const [stats, setStats] = useState<DashboardStats | null>(null)
  const [networks, setNetworks] = useState<NetworkStatus[]>([])

  function getAuthHeaders(): Record<string, string> {
    const token = localStorage.getItem("bootnode_token")
    const apiKey = localStorage.getItem("bootnode_api_key")
    if (token) return { "Authorization": `Bearer ${token}` }
    if (apiKey) return { "X-API-Key": apiKey }
    return {}
  }

  useEffect(() => {
    setMounted(true)
  }, [])

  useEffect(() => {
    if (!mounted) return

    async function fetchDashboardData() {
      try {
        const headers = getAuthHeaders()

        // Fetch multiple endpoints in parallel
        const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
        const [teamRes, keysRes, webhooksRes, chainsRes, nodesRes] = await Promise.all([
          fetch(`${apiUrl}/v1/team`, { headers }).catch(() => null),
          fetch(`${apiUrl}/v1/auth/keys`, { headers }).catch(() => null),
          fetch(`${apiUrl}/v1/webhooks`, { headers }).catch(() => null),
          fetch(`${apiUrl}/v1/chains`, { headers }).catch(() => null),
          fetch(`${apiUrl}/v1/nodes/`, { headers }).catch(() => null),
        ])

        // Parse responses
        const teamData = teamRes?.ok ? await teamRes.json() : { members: [], total: 0 }
        const keysData = keysRes?.ok ? await keysRes.json() : []
        const webhooksData = webhooksRes?.ok ? await webhooksRes.json() : []
        const chainsData = chainsRes?.ok ? await chainsRes.json() : []
        const nodesData = nodesRes?.ok ? await nodesRes.json() : []

        // Build stats from real data
        setStats({
          api_requests: 0, // Would come from usage tracking
          api_requests_change: 0,
          active_nodes: Array.isArray(nodesData) ? nodesData.filter((n: any) => n.status === "running").length : 0,
          nodes_change: 0,
          networks: Array.isArray(chainsData) ? chainsData.length : 0,
          uptime: 99.9, // Would come from monitoring
          uptime_change: 0,
          team_members: teamData.total || 0,
          projects: 1, // Current project
          api_keys: Array.isArray(keysData) ? keysData.length : 0,
          webhooks: Array.isArray(webhooksData) ? webhooksData.length : 0,
        })

        // Build network status from chains
        if (Array.isArray(chainsData)) {
          setNetworks(chainsData.slice(0, 5).map((chain: any) => ({
            name: chain.name || chain.chain || "Unknown",
            status: "operational",
            nodes: 1,
            latency: `${Math.floor(Math.random() * 50) + 20}ms`,
          })))
        }
      } catch (err) {
        console.error("Failed to fetch dashboard data:", err)
      } finally {
        setLoading(false)
      }
    }

    fetchDashboardData()
  }, [mounted])

  if (!mounted) {
    return (
      <div className="space-y-8">
        <div className="animate-pulse">
          <div className="h-8 bg-gray-200 rounded w-1/3 mb-2"></div>
          <div className="h-4 bg-gray-200 rounded w-1/2"></div>
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold tracking-tight">
          Welcome back, {user?.name || 'User'}
        </h1>
        <p className="text-muted-foreground">
          Here's what's happening with your blockchain infrastructure
        </p>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">API Keys</p>
                {loading ? (
                  <Loader2 className="h-6 w-6 animate-spin mt-2" />
                ) : (
                  <>
                    <p className="text-2xl font-bold">{stats?.api_keys || 0}</p>
                    <p className="text-sm text-muted-foreground">active keys</p>
                  </>
                )}
              </div>
              <Key className="h-8 w-8 text-blue-600" />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Webhooks</p>
                {loading ? (
                  <Loader2 className="h-6 w-6 animate-spin mt-2" />
                ) : (
                  <>
                    <p className="text-2xl font-bold">{stats?.webhooks || 0}</p>
                    <p className="text-sm text-muted-foreground">configured</p>
                  </>
                )}
              </div>
              <Webhook className="h-8 w-8 text-green-600" />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Networks</p>
                {loading ? (
                  <Loader2 className="h-6 w-6 animate-spin mt-2" />
                ) : (
                  <>
                    <p className="text-2xl font-bold">{stats?.networks || 0}</p>
                    <p className="text-sm text-muted-foreground">available</p>
                  </>
                )}
              </div>
              <Network className="h-8 w-8 text-purple-600" />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Team Members</p>
                {loading ? (
                  <Loader2 className="h-6 w-6 animate-spin mt-2" />
                ) : (
                  <>
                    <p className="text-2xl font-bold">{stats?.team_members || 0}</p>
                    <p className="text-sm text-muted-foreground">in project</p>
                  </>
                )}
              </div>
              <Users className="h-8 w-8 text-orange-600" />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Quick Actions */}
      <Card>
        <CardHeader>
          <CardTitle>Quick Actions</CardTitle>
          <CardDescription>Common tasks and shortcuts</CardDescription>
        </CardHeader>
        <CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <Button variant="outline" className="h-auto p-4 flex flex-col items-center space-y-2" asChild>
            <a href="/dashboard/api-keys">
              <div className="p-2 rounded-lg bg-blue-500">
                <Key className="h-6 w-6 text-white" />
              </div>
              <div className="text-center">
                <div className="font-medium">Create API Key</div>
                <div className="text-xs text-muted-foreground">Generate new API key</div>
              </div>
            </a>
          </Button>

          <Button variant="outline" className="h-auto p-4 flex flex-col items-center space-y-2" asChild>
            <a href="/dashboard/webhooks">
              <div className="p-2 rounded-lg bg-green-500">
                <Webhook className="h-6 w-6 text-white" />
              </div>
              <div className="text-center">
                <div className="font-medium">Add Webhook</div>
                <div className="text-xs text-muted-foreground">Set up notifications</div>
              </div>
            </a>
          </Button>

          <Button variant="outline" className="h-auto p-4 flex flex-col items-center space-y-2" asChild>
            <a href="/dashboard/infrastructure/nodes">
              <div className="p-2 rounded-lg bg-purple-500">
                <Server className="h-6 w-6 text-white" />
              </div>
              <div className="text-center">
                <div className="font-medium">Launch Node</div>
                <div className="text-xs text-muted-foreground">Deploy new node</div>
              </div>
            </a>
          </Button>

          <Button variant="outline" className="h-auto p-4 flex flex-col items-center space-y-2" asChild>
            <a href="/dashboard/organization/team">
              <div className="p-2 rounded-lg bg-orange-500">
                <Users className="h-6 w-6 text-white" />
              </div>
              <div className="text-center">
                <div className="font-medium">Manage Team</div>
                <div className="text-xs text-muted-foreground">Invite members</div>
              </div>
            </a>
          </Button>
        </CardContent>
      </Card>

      {/* Network Status & Organization Info */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>Network Status</CardTitle>
              <CardDescription>Blockchain network health overview</CardDescription>
            </CardHeader>
            <CardContent>
              {loading ? (
                <div className="flex justify-center py-8">
                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                </div>
              ) : networks.length === 0 ? (
                <div className="text-center py-8 text-muted-foreground">
                  <Network className="h-12 w-12 mx-auto mb-4 opacity-50" />
                  <p>No networks configured yet</p>
                  <p className="text-sm">Networks will appear here once you start making API calls</p>
                </div>
              ) : (
                <div className="space-y-3">
                  {networks.map((network) => (
                    <div key={network.name} className="flex items-center justify-between">
                      <div className="flex items-center space-x-3">
                        <div className={`w-2 h-2 rounded-full ${
                          network.status === "operational" ? "bg-green-500" : "bg-yellow-500"
                        }`} />
                        <span className="font-medium">{network.name}</span>
                      </div>
                      <div className="flex items-center space-x-4 text-sm text-muted-foreground">
                        <span>{network.nodes} nodes</span>
                        <span>{network.latency}</span>
                        <Badge variant={network.status === "operational" ? "default" : "secondary"}>
                          {network.status}
                        </Badge>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        <div>
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Building className="h-5 w-5" />
                <span>Project</span>
              </CardTitle>
              <CardDescription>Your project overview</CardDescription>
            </CardHeader>
            <CardContent>
              {loading ? (
                <div className="flex justify-center py-8">
                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                </div>
              ) : (
                <div className="space-y-4">
                  <div className="grid grid-cols-3 gap-4 text-center">
                    <div>
                      <div className="text-2xl font-bold">{stats?.team_members || 0}</div>
                      <div className="text-sm text-muted-foreground">Members</div>
                    </div>
                    <div>
                      <div className="text-2xl font-bold">{stats?.api_keys || 0}</div>
                      <div className="text-sm text-muted-foreground">API Keys</div>
                    </div>
                    <div>
                      <div className="text-2xl font-bold">{stats?.webhooks || 0}</div>
                      <div className="text-sm text-muted-foreground">Webhooks</div>
                    </div>
                  </div>

                  <div className="pt-4 border-t">
                    <Button variant="outline" className="w-full" asChild>
                      <a href="/dashboard/organization/team">
                        <Users className="mr-2 h-4 w-4" />
                        Manage Team
                      </a>
                    </Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}