// apps/admin/src/app/(admin)/page.tsx
// D3RO Voice Admin CRM — Unified Dashboard Overview (Midnight Glass v2)

import { Box, Typography, Button } from '@mui/material'
import { fetchServerStats } from '@/lib/api-server'
import { isSupabaseAdminConfigured } from '@/lib/supabase-admin'
import { fetchSubscriptionRevenue, type SubscriptionRevenue } from '@/lib/subscription-metrics'
import { C, FONT_SANS, FONT_MONO, panelSx, tableSx, statusBadgeSx } from '@/lib/console-theme'
import { DoubleBezelCard, StatRing, TactileBadge } from '@d3ro/ui/components/ds'
import Link from 'next/link'

export default async function AdminOverviewPage(): Promise<React.ReactElement> {
  const stats = await fetchServerStats()
  const nonOperationalNodes = stats.nodes.filter((node) => node.status !== 'operational')

  let revenue: SubscriptionRevenue | null = null
  if (isSupabaseAdminConfigured()) {
    try {
      revenue = await fetchSubscriptionRevenue()
    } catch {
      revenue = null
    }
  }

  const revenueCards = revenue
    ? [
        {
          title: 'Annual Recurring Revenue',
          value: `$${revenue.arrUsd.toLocaleString()}`,
          subtext: 'Active subscriptions × 12 months',
          color: 'green' as const,
          badge: 'ARR',
          badgeColor: 'green' as const,
        },
        {
          title: 'Monthly Recurring Revenue',
          value: `$${revenue.mrrUsd.toLocaleString()}`,
          subtext: `Pro ${revenue.tierBreakdown.pro.toLocaleString()} · Pro+ ${revenue.tierBreakdown.pro_plus.toLocaleString()}`,
          color: 'blue' as const,
          badge: 'MRR',
          badgeColor: 'blue' as const,
        },
        {
          title: 'Active Subscriptions',
          value: revenue.activeCount.toLocaleString(),
          subtext: 'Supabase subscriptions with status = active',
          color: 'purple' as const,
          badge: 'BILLING',
          badgeColor: 'purple' as const,
        },
      ]
    : []

  const bentoCards = [
    {
      title: 'Backend Uptime',
      value: `${Math.floor(stats.serverUptimeSeconds / 3600).toLocaleString()}h`,
      subtext: 'Measured by the active .NET API process',
      color: 'purple' as const,
      badge: 'RUNTIME',
      badgeColor: 'purple' as const,
      icon: (
        <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      ),
    },
    {
      title: 'Active Admin Accounts Today',
      value: `${stats.activeUsersToday.toLocaleString()} Active`,
      subtext: `${stats.totalUsers.toLocaleString()} administrator accounts`,
      color: 'blue' as const,
      badge: 'AUTH',
      badgeColor: 'blue' as const,
      icon: (
        <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 100-6 3 3 0 000 6z" />
        </svg>
      ),
    },
    {
      title: 'Total API Requests & Compute',
      value: `${stats.totalRequests.toLocaleString()}`,
      subtext: `Total Compute Cost: $${stats.totalCost.toFixed(4)}`,
      color: 'green' as const,
      badge: 'TELEMETRY',
      badgeColor: 'green' as const,
      icon: (
        <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      ),
    },
    {
      title: 'Recorded Backend Errors',
      value: stats.errorCount.toLocaleString(),
      subtext: 'Persisted server error log entries',
      color: 'orange' as const,
      badge: 'ERROR LOG',
      badgeColor: 'orange' as const,
      icon: (
        <svg width="22" height="22" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      ),
    },
  ]

  return (
    <>
      {/* Header bar */}
      <Box
        sx={{
          ...panelSx,
          minHeight: 84,
          px: { xs: 2.5, md: 4 },
          py: 2,
          display: 'flex',
          flexWrap: 'wrap',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 2,
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          <Box
            sx={{
              width: 4,
              height: 32,
              borderRadius: '999px',
              background: 'linear-gradient(180deg, var(--d3-tag-cyan) 0%, var(--d3-accent-main) 50%, var(--d3-tag-purple) 100%)',
            }}
          />
          <Box>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
              <Typography
                component="h1"
                sx={{
                  fontFamily: FONT_SANS,
                  fontSize: '20px',
                  fontWeight: 500,
                  color: C.bright,
                  letterSpacing: '-0.02em',
                  m: 0,
                }}
              >
                Unified Dashboard Overview
              </Typography>
              <TactileBadge ledColor="green" ledPulse tone="success" mono>
                BACKEND CONNECTED
              </TactileBadge>
            </Box>
            <Typography
              sx={{
                fontFamily: FONT_MONO,
                fontSize: '11px',
                color: C.dim,
                letterSpacing: '0.04em',
                mt: 0.25,
              }}
            >
              Backend runtime counters, error ledger, reported node health
            </Typography>
          </Box>
        </Box>

        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
          <Link href="/pipelines" style={{ textDecoration: 'none' }}>
            <Button
              variant="outlined"
              size="small"
              sx={{
                fontFamily: FONT_SANS,
                fontSize: '12px',
                color: C.bright,
                borderColor: C.borderHl,
                bgcolor: 'var(--d3-bg-card-soft)',
                borderRadius: '10px',
                textTransform: 'none',
                px: 2,
                '&:hover': { borderColor: C.accentLight, bgcolor: 'var(--d3-bg-raised-soft)' },
              }}
            >
              View Pipelines Console →
            </Button>
          </Link>
        </Box>
      </Box>

      {/* Main Content Area */}
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3.5 }}>
        {/* Revenue KPI Row */}
        {revenueCards.length > 0 && (
          <Box
            sx={{
              display: 'grid',
              gridTemplateColumns: { xs: '1fr', sm: 'repeat(3, 1fr)' },
              gap: 2.5,
            }}
          >
            {revenueCards.map((card) => (
              <DoubleBezelCard
                key={card.title}
                interactive
                bezelPadding="5px"
                innerPadding="20px"
                sx={{ height: '100%' }}
              >
                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
                  <StatRing color={card.color} size={46}>
                    <Typography sx={{ fontFamily: FONT_MONO, fontSize: '13px', fontWeight: 500 }}>$</Typography>
                  </StatRing>
                  <Box component="span" sx={statusBadgeSx(card.badgeColor)}>
                    {card.badge}
                  </Box>
                </Box>

                <Typography
                  sx={{
                    fontFamily: FONT_SANS,
                    fontSize: '11px',
                    fontWeight: 500,
                    color: C.dim,
                    letterSpacing: '0.04em',
                  }}
                >
                  {card.title}
                </Typography>

                <Typography
                  sx={{
                    fontFamily: FONT_MONO,
                    fontSize: '26px',
                    fontWeight: 500,
                    color: C.bright,
                    my: 0.75,
                  }}
                >
                  {card.value}
                </Typography>

                <Typography
                  sx={{
                    fontFamily: FONT_SANS,
                    fontSize: '11px',
                    color: C.text,
                  }}
                >
                  {card.subtext}
                </Typography>
              </DoubleBezelCard>
            ))}
          </Box>
        )}

        {/* Executive Bento Grid */}
        <Box
          sx={{
            display: 'grid',
            gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', lg: 'repeat(4, 1fr)' },
            gap: 2.5,
          }}
        >
          {bentoCards.map((card) => (
            <DoubleBezelCard
              key={card.title}
              interactive
              bezelPadding="5px"
              innerPadding="20px"
              sx={{ height: '100%' }}
            >
              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
                <StatRing color={card.color} size={46}>
                  {card.icon}
                </StatRing>
                <Box component="span" sx={statusBadgeSx(card.badgeColor)}>
                  {card.badge}
                </Box>
              </Box>

              <Typography
                sx={{
                  fontFamily: FONT_SANS,
                  fontSize: '11px',
                  fontWeight: 500,
                  color: C.dim,
                  letterSpacing: '0.04em',
                }}
              >
                {card.title}
              </Typography>

              <Typography
                sx={{
                  fontFamily: FONT_MONO,
                  fontSize: '26px',
                  fontWeight: 500,
                  color: C.bright,
                  my: 0.75,
                }}
              >
                {card.value}
              </Typography>

              <Typography
                sx={{
                  fontFamily: FONT_SANS,
                  fontSize: '11px',
                  color: C.text,
                }}
              >
                {card.subtext}
              </Typography>
            </DoubleBezelCard>
          ))}
        </Box>

        {/* Live System Nodes Grid */}
        <DoubleBezelCard bezelPadding="6px" innerPadding="24px">
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2.5 }}>
            <Box>
              <Typography sx={{ fontFamily: FONT_SANS, fontSize: '16px', fontWeight: 500, color: C.bright }}>
                System Nodes & Pipeline Topology
              </Typography>
              <Typography sx={{ fontFamily: FONT_MONO, fontSize: '11px', color: C.dim }}>
                {stats.nodes.length === 0
                  ? 'NODE TELEMETRY NOT REPORTED'
                  : `${stats.nodes.length} REPORTED • ${nonOperationalNodes.length} NON-OPERATIONAL`}
              </Typography>
            </Box>
            <TactileBadge tone="mono" mono>
              {stats.nodes.length === 0
                ? 'UNAVAILABLE'
                : nonOperationalNodes.length === 0 ? 'ALL REPORTED OPERATIONAL' : 'ATTENTION REQUIRED'}
            </TactileBadge>
          </Box>

          <Box
            sx={{
              display: 'grid',
              gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' },
              gap: 2,
            }}
          >
            {stats.nodes.length === 0 ? (
              <Typography sx={{ gridColumn: '1 / -1', py: 3, textAlign: 'center', color: C.dim, fontFamily: FONT_MONO, fontSize: '12px' }}>
                No node-health telemetry has been reported by the backend.
              </Typography>
            ) : stats.nodes.map((node) => (
              <Box
                key={node.id}
                sx={{
                  p: 2,
                  borderRadius: '14px',
                  bgcolor: 'var(--d3-bg-inset-soft)',
                  border: `1px solid ${C.border}`,
                  transition: 'all 0.2s ease',
                  '&:hover': {
                    borderColor: C.accentLight,
                    bgcolor: 'var(--d3-bg-card-soft)',
                    transform: 'translateY(-2px)',
                  },
                }}
              >
                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}>
                  <Typography sx={{ fontFamily: FONT_SANS, fontSize: '13px', fontWeight: 500, color: C.bright }}>
                    {node.name}
                  </Typography>
                  <Box
                    sx={{
                      width: 8,
                      height: 8,
                      borderRadius: '50%',
                      bgcolor: node.status === 'operational' ? 'var(--d3-status-success)' : node.status === 'degraded' ? 'var(--d3-status-warning)' : 'var(--d3-status-danger)',
                      boxShadow: `0 0 8px ${node.status === 'operational' ? 'var(--d3-status-success)' : node.status === 'degraded' ? 'var(--d3-status-warning)' : 'var(--d3-status-danger)'}`,
                    }}
                  />
                </Box>

                <Typography sx={{ fontFamily: FONT_MONO, fontSize: '11px', color: C.cyanLight, mb: 1.5 }}>
                  {node.versionOrModel}
                </Typography>

                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', pt: 1, borderTop: `1px solid ${C.border}` }}>
                  <Typography sx={{ fontFamily: FONT_MONO, fontSize: '10px', color: C.dim }}>
                    Latency: <strong style={{ color: C.bright }}>{node.latencyMs}ms</strong>
                  </Typography>
                  <Typography sx={{ fontFamily: FONT_MONO, fontSize: '10px', color: node.status === 'operational' ? C.green400 : node.status === 'degraded' ? C.orange400 : C.red400 }}>
                    {node.uptimePercent}% · {node.status.toUpperCase()}
                  </Typography>
                </Box>
              </Box>
            ))}
          </Box>
        </DoubleBezelCard>

        {/* Server Operational Telemetry Logs */}
        <DoubleBezelCard bezelPadding="6px" innerPadding="24px">
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
            <Typography sx={{ fontFamily: FONT_SANS, fontSize: '15px', fontWeight: 500, color: C.bright }}>
              Operational Telemetry & Server Logs
            </Typography>
            <TactileBadge tone="mono" mono>
              SERVER SNAPSHOT
            </TactileBadge>
          </Box>

          <Box sx={{ overflowX: 'auto' }}>
            <Box component="table" sx={tableSx}>
              <Box component="thead">
                <Box component="tr">
                  <Box component="th">ID</Box>
                  <Box component="th">STATUS</Box>
                  <Box component="th">MESSAGE</Box>
                  <Box component="th">ENDPOINT</Box>
                  <Box component="th">TIMESTAMP</Box>
                </Box>
              </Box>
              <Box component="tbody">
                {stats.recentErrors.length === 0 ? (
                  <Box component="tr">
                    <Box component="td" colSpan={5} sx={{ textAlign: 'center', color: C.green400, py: 3 }}>
                      No backend errors have been recorded.
                    </Box>
                  </Box>
                ) : (
                  stats.recentErrors.map((err) => (
                    <Box component="tr" key={err.id}>
                      <Box component="td">#{err.id}</Box>
                      <Box component="td">
                        <Box component="span" sx={statusBadgeSx('red')}>
                          {err.errorType}
                        </Box>
                      </Box>
                      <Box component="td">{err.message}</Box>
                      <Box component="td" sx={{ fontFamily: FONT_MONO, fontSize: '11px' }}>
                        {err.endpoint || '-'}
                      </Box>
                      <Box component="td" sx={{ color: C.dim }}>
                        {new Date(err.createdAt).toLocaleString()}
                      </Box>
                    </Box>
                  ))
                )}
              </Box>
            </Box>
          </Box>
        </DoubleBezelCard>
      </Box>
    </>
  )
}