Ops-dashboard/app/systemd/[unit]/_components/unit-detail.tsx

'use client'

import { useCallback, useEffect, useState } from 'react'
import { parseSystemctlStatus, type UnitStatus, type ActiveState } from '@/lib/parse-systemd'
import { apiFetch } from '@/lib/csrf'

async function fetchOutput(commandKey: string, args: string[]): Promise<string> {
  const res = await apiFetch('/api/agent/exec', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ command_key: commandKey, args }),
  })

  if (!res.ok) {
    const text = await res.text()
    throw new Error(`agent ${res.status}: ${text}`)
  }

  const reader = res.body?.getReader()
  if (!reader) throw new Error('no response body')

  const decoder = new TextDecoder()
  let buffer = ''
  let output = ''

  while (true) {
    const { done, value } = await reader.read()
    if (done) break

    buffer += decoder.decode(value, { stream: true })
    const lines = buffer.split('\n')
    buffer = lines.pop() ?? ''

    for (const line of lines) {
      if (line.startsWith('data:')) {
        try {
          const parsed = JSON.parse(line.slice(5).trim()) as { data?: string }
          if (parsed.data !== undefined) output += parsed.data
        } catch {
          // ignore malformed
        }
      }
    }
  }

  return output
}

const badgeClass: Record<ActiveState, string> = {
  active: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
  inactive: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
  failed: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
  activating: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
  deactivating: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
  unknown: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
}

const dotClass: Record<ActiveState, string> = {
  active: 'bg-green-500 dark:bg-green-400',
  inactive: 'bg-zinc-400 dark:bg-zinc-500',
  failed: 'bg-red-500 dark:bg-red-400',
  activating: 'bg-amber-500 dark:bg-amber-400',
  deactivating: 'bg-amber-500 dark:bg-amber-400',
  unknown: 'bg-zinc-400 dark:bg-zinc-500',
}

function StatusBadge({ status }: { status: UnitStatus }) {
  const label = status.subState
    ? `${status.activeState} (${status.subState})`
    : status.activeState
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${badgeClass[status.activeState]}`}
    >
      <span className={`size-1.5 rounded-full ${dotClass[status.activeState]}`} />
      {label}
    </span>
  )
}

type Props = {
  unitName: string
  initialStatusOutput: string
  initialJournalOutput: string
  initialError: string | null
}

export default function UnitDetail({
  unitName,
  initialStatusOutput,
  initialJournalOutput,
  initialError,
}: Props) {
  const [statusOutput, setStatusOutput] = useState(initialStatusOutput)
  const [journalOutput, setJournalOutput] = useState(initialJournalOutput)
  const [error, setError] = useState<string | null>(initialError)
  const [refreshing, setRefreshing] = useState(false)
  const [lastUpdated, setLastUpdated] = useState<Date>(new Date())

  const parsedStatus = statusOutput ? parseSystemctlStatus(statusOutput, unitName) : null

  const refresh = useCallback(async () => {
    setRefreshing(true)
    try {
      const [statusOut, journalOut] = await Promise.all([
        fetchOutput('systemctl_status', [unitName]),
        fetchOutput('journalctl_recent', [unitName]),
      ])
      setStatusOutput(statusOut)
      setJournalOutput(journalOut)
      setError(null)
      setLastUpdated(new Date())
    } catch (err) {
      setError(err instanceof Error ? err.message : 'refresh failed')
    } finally {
      setRefreshing(false)
    }
  }, [unitName])

  useEffect(() => {
    const id = setInterval(refresh, 10000)
    return () => clearInterval(id)
  }, [refresh])

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          {parsedStatus && <StatusBadge status={parsedStatus} />}
          {parsedStatus?.uptime && (
            <span className="text-sm text-muted-foreground">{parsedStatus.uptime}</span>
          )}
          {refreshing && (
            <span className="text-xs text-muted-foreground animate-pulse">refreshing…</span>
          )}
        </div>
        <span className="text-xs text-muted-foreground">
          updated {lastUpdated.toLocaleTimeString()} · auto-refreshes every 10s
        </span>
      </div>

      {error && (
        <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
          {error}
        </div>
      )}

      <div>
        <h2 className="text-base font-semibold mb-3">Unit Status</h2>
        <pre className="overflow-x-auto rounded-lg border border-border bg-muted/30 p-4 text-xs font-mono leading-relaxed whitespace-pre">
          {statusOutput || '—'}
        </pre>
      </div>

      <div>
        <h2 className="text-base font-semibold mb-3">Recent Journal (last hour)</h2>
        <pre className="overflow-x-auto overflow-y-auto max-h-[600px] rounded-lg border border-border bg-muted/30 p-4 text-xs font-mono leading-relaxed whitespace-pre">
          {journalOutput || 'No journal entries'}
        </pre>
      </div>
    </div>
  )
}