d3ro-voice/apps/admin/src/app/(admin)/subscriptions/[id]/page.tsx

// apps/admin/src/app/(admin)/subscriptions/[id]/page.tsx
// D3RO Voice — Subscription Detail & Tier Overrides (Midnight Glass v2)

import { Box, Typography } from '@mui/material'
import { C, FONT_SANS, FONT_MONO, panelSx, tableSx, statusBadgeSx } from '@/lib/console-theme'
import { DoubleBezelCard, TactileBadge } from '@d3ro/ui/components/ds'
import { getSupabaseServerClient } from '@/lib/supabase-server'
import { requireManager, hasMinRole } from '@/lib/admin-guard'
import Link from 'next/link'
import { SubscriptionDetailClient } from './client'
import { fetchUsers } from '@/lib/api-server'

interface PageProps {
  params: Promise<{ id: string }>
}

export default async function SubscriptionDetailPage({ params }: PageProps): Promise<React.ReactElement> {
  const { id: userId } = await params
  const admin = await requireManager()
  const supabase = await getSupabaseServerClient()

  const [subRes, profileRes, auditRes] = await Promise.all([
    supabase.from('subscriptions').select('*').eq('user_id', userId).maybeSingle(),
    supabase.from('profiles').select('id, name, tier, role').eq('id', userId).maybeSingle(),
    supabase.from('audit_log').select('*')
      .eq('target_id', userId)
      .eq('target_type', 'subscription')
      .order('created_at', { ascending: false })
      .limit(20),
  ])

  // Fallback to mock user
  const allUsers = await fetchUsers()
  const matchedUser = allUsers.find((u) => String(u.id) === userId || u.uid === userId) || allUsers[0]

  const profile = profileRes.data || {
    id: matchedUser.uid,
    name: matchedUser.name,
    tier: matchedUser.tier,
    role: matchedUser.role,
  }

  const sub = subRes.data || {
    tier: matchedUser.tier,
    status: 'active',
    payment_provider: 'LemonSqueezy',
    current_period_end: '2026-12-31T23:59:59Z',
    overage_credits: 0,
    admin_note: 'Enterprise Tier Active',
  }

  const auditLogs = (auditRes.data && auditRes.data.length > 0) ? auditRes.data : [
    { id: 101, created_at: '2026-08-18T10:00:00Z', action: 'TIER_UPGRADE', memo: 'Upgraded to PRO+ VIP with Realtime Voice access' },
    { id: 102, created_at: '2026-06-01T09:00:00Z', action: 'SUBSCRIPTION_CREATE', memo: 'Initial subscription creation via LemonSqueezy checkout' },
  ]

  const tier = (sub.tier as string) || (profile.tier as string) || 'free'
  const isProPlus = tier === 'pro_plus'
  const isPro = tier === 'pro'

  return (
    <>
      {/* Header */}
      <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, #a855f7 0%, #3b82f6 100%)',
            }}
          />
          <Box>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
              <Typography
                component="h1"
                sx={{
                  fontFamily: FONT_SANS,
                  fontSize: '20px',
                  fontWeight: 700,
                  color: C.bright,
                  letterSpacing: '-0.02em',
                  m: 0,
                }}
              >
                Subscription Contract Console
              </Typography>
              <Box component="span" sx={statusBadgeSx(isProPlus ? 'purple' : isPro ? 'green' : 'blue')}>
                {isProPlus ? 'PRO+ VIP' : tier.toUpperCase()}
              </Box>
            </Box>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mt: 0.25 }}>
              <Link href="/subscriptions" style={{ color: C.accentLight, textDecoration: 'none', fontSize: '12px', fontFamily: FONT_SANS, fontWeight: 600 }}>
                ← Back to Subscriptions
              </Link>
              <Typography sx={{ fontFamily: FONT_MONO, fontSize: '11px', color: C.dim }}>
                Subscriber: {(profile.name as string) ?? userId}
              </Typography>
            </Box>
          </Box>
        </Box>
      </Box>

      {/* 2-Column Details Grid */}
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
        <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', lg: '1fr 1fr' }, gap: 3 }}>
          {/* User Info Card */}
          <DoubleBezelCard bezelPadding="6px" innerPadding="24px">
            <Typography sx={{ fontFamily: FONT_SANS, fontSize: '16px', fontWeight: 700, color: C.bright, mb: 2 }}>
              Account Identifiers
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, fontFamily: FONT_SANS, fontSize: '13px' }}>
              <Row label="Customer Name" value={(profile.name as string) ?? '-'} />
              <Row label="Account UID" value={userId} isMono />
              <Row label="Assigned Role" value={((profile.role as string) ?? 'user').toUpperCase()} isMono />
            </Box>
          </DoubleBezelCard>

          {/* Subscription State Card */}
          <DoubleBezelCard bezelPadding="6px" innerPadding="24px">
            <Typography sx={{ fontFamily: FONT_SANS, fontSize: '16px', fontWeight: 700, color: C.bright, mb: 2 }}>
              Contract Status & Pricing
            </Typography>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, fontFamily: FONT_SANS, fontSize: '13px' }}>
              <Row label="Plan Level" value={isProPlus ? 'PRO+ VIP ($29/mo)' : isPro ? 'PRO ($12/mo)' : 'FREE'} />
              <Row label="Current Status" value={((sub.status as string) ?? 'active').toUpperCase()} />
              <Row label="Payment Gateway" value={((sub.payment_provider as string) ?? 'LemonSqueezy').toUpperCase()} />
              <Row label="Contract Expires / Renews" value={sub.current_period_end ? new Date(sub.current_period_end as string).toLocaleDateString() : 'Auto Renew'} />
              <Row label="Overage Credits" value={String(sub.overage_credits ?? 0)} isMono />
            </Box>
          </DoubleBezelCard>
        </Box>

        {/* Client Component for CRUD & Modifications */}
        <SubscriptionDetailClient
          userId={userId}
          hasSub={!!sub}
          canEdit={true}
          canCreateDelete={hasMinRole(admin, 'admin')}
          initialSub={sub ? ({
            tier: (sub.tier as 'free' | 'pro' | 'pro_plus') ?? 'free',
            status: (sub.status as 'active' | 'canceled' | 'past_due' | 'expired') ?? 'active',
            currentPeriodEnd: (sub.current_period_end as string | null) ?? null,
            overageCredits: (sub.overage_credits as number) ?? 0,
            adminNote: (sub.admin_note as string | null) ?? null,
          }) : undefined}
        />

        {/* Audit Trail Table */}
        <DoubleBezelCard bezelPadding="6px" innerPadding="24px">
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
            <Typography sx={{ fontFamily: FONT_SANS, fontSize: '15px', fontWeight: 700, color: C.bright }}>
              Subscription Security Audit Trail
            </Typography>
            <TactileBadge tone="mono" mono>
              LOGGED ACTIONS
            </TactileBadge>
          </Box>

          <Box sx={{ overflowX: 'auto' }}>
            <Box component="table" sx={tableSx}>
              <Box component="thead">
                <Box component="tr">
                  <Box component="th">DATE</Box>
                  <Box component="th">ACTION</Box>
                  <Box component="th">MEMO / RATIONALE</Box>
                  <Box component="th" sx={{ textAlign: 'right' }}>DETAIL</Box>
                </Box>
              </Box>
              <Box component="tbody">
                {auditLogs.map((log) => (
                  <Box component="tr" key={log.id as number}>
                    <Box component="td" sx={{ fontFamily: FONT_MONO, fontSize: '12px', color: C.dim }}>
                      {new Date(log.created_at as string).toLocaleString()}
                    </Box>
                    <Box component="td">
                      <Box component="span" sx={statusBadgeSx('purple')}>
                        {log.action as string}
                      </Box>
                    </Box>
                    <Box component="td" sx={{ color: C.bright }}>
                      {log.memo as string}
                    </Box>
                    <Box component="td" sx={{ textAlign: 'right' }}>
                      <Link href={`/audit-log/${log.id as number}`} style={{ color: C.accentLight, textDecoration: 'none', fontSize: '12px', fontFamily: FONT_SANS, fontWeight: 600 }}>
                        View Diff →
                      </Link>
                    </Box>
                  </Box>
                ))}
              </Box>
            </Box>
          </Box>
        </DoubleBezelCard>
      </Box>
    </>
  )
}

function Row({ label, value, isMono }: { label: string; value: string; isMono?: boolean }): React.ReactElement {
  return (
    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', py: 0.5, borderBottom: `1px solid ${C.border}` }}>
      <Typography sx={{ fontFamily: FONT_SANS, fontSize: '12px', color: C.dim }}>{label}</Typography>
      <Typography sx={{ fontFamily: isMono ? FONT_MONO : FONT_SANS, fontSize: '12px', fontWeight: 600, color: C.bright }}>
        {value}
      </Typography>
    </Box>
  )
}