bootnode/console/app/dashboard/page.tsx

"use client"
import { getApiUrl } from "@/lib/api"

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,
  AlertCircle
} from "@luxfi/ui/icons"

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 [error, setError] = useState<string | 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.
        //
        // Every one of these used to be `.catch(() => null)` followed by
        // `res?.ok ? json : []`, so a 401 after token expiry, a CORS refusal, a
        // 5xx or the API being down all became empty data — and the page then
        // rendered "0 API keys / 0 webhooks / 0 networks / 0 team members" as if
        // that were the truth. A user cannot tell an empty account from a broken
        // one. Failures are now collected and surfaced; whatever DID load still
        // renders, so one dead endpoint does not blank the page.
        const apiUrl = getApiUrl()
        const load = (path: string) =>
          fetch(`${apiUrl}${path}`, { headers })
            .then(async (r) =>
              r.ok
                ? { ok: true as const, data: await r.json() }
                : { ok: false as const, why: `${path} → HTTP ${r.status}` }
            )
            .catch((e) => ({
              ok: false as const,
              why: `${path} → ${e instanceof Error ? e.message : String(e)}`,
            }))

        const [team, keys, hooks, chains, nodes] = await Promise.all([
          load("/v1/team"),
          load("/v1/auth/keys"),
          load("/v1/webhooks"),
          load("/v1/chains"),
          load("/v1/nodes/"),
        ])

        const failed = [team, keys, hooks, chains, nodes].filter((r) => !r.ok)
        setError(
          failed.length
            ? `Could not load ${failed.length} of 5 data sources — the numbers below are incomplete. ${failed
                .map((f) => (f as { why: string }).why)
                .join("; ")}`
            : null
        )

        const teamData = team.ok ? team.data : { members: [], total: 0 }
        const keysData = keys.ok ? keys.data : []
        const webhooksData = hooks.ok ? hooks.data : []
        const chainsData = chains.ok ? chains.data : []
        const nodesData = nodes.ok ? nodes.data : []

        // 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 === "healthy").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) {
        // A throw here means the whole load failed, not one endpoint. Record it
        // so the page says so instead of showing a confident row of zeros.
        console.error("Failed to fetch dashboard data:", err)
        setError(err instanceof Error ? err.message : String(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>

      {/* Load failures are stated, not rendered as zeros. Without this the page
          showed "0 API keys / 0 webhooks / 0 networks" for an expired token,
          a CORS refusal or a dead API — indistinguishable from a new account. */}
      {error && (
        <Card className="border-destructive/50">
          <CardContent className="p-4">
            <div className="flex items-start gap-3">
              <AlertCircle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
              <div className="min-w-0">
                <p className="text-sm font-medium">Some data could not be loaded</p>
                <p className="text-sm text-muted-foreground break-words">{error}</p>
              </div>
              <Button
                variant="outline"
                size="sm"
                className="ml-auto shrink-0"
                onClick={() => window.location.reload()}
              >
                Retry
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* 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>
  )
}