'use client'

import { useCallback, useEffect, useState } from 'react'
import Link from 'next/link'
import { parseDockerPs } from '@/lib/parse-docker'
import { fetchAgentOutput } from '@/lib/agent-fetch'

type DockerData = { running: number; total: number }
export type DockerInitial = { data: DockerData; error: null } | { data: null; error: string }

async function refreshDocker(): Promise<DockerData> {
  const output = await fetchAgentOutput('docker_ps')
  const containers = parseDockerPs(output)
  return {
    running: containers.filter((c) => c.status.toLowerCase().startsWith('up')).length,
    total: containers.length,
  }
}

export default function DockerWidget({ initial }: { initial: DockerInitial }) {
  const [data, setData] = useState<DockerData | null>(initial.data)
  const [error, setError] = useState<string | null>(initial.error)

  const refresh = useCallback(async () => {
    try {
      const d = await refreshDocker()
      setData(d)
      setError(null)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'refresh failed')
    }
  }, [])

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

  return (
    <Link href="/docker" className="block rounded-lg border bg-card p-5 transition-colors hover:bg-accent">
      <h2 className="text-sm font-medium text-muted-foreground">Docker</h2>
      {error ? (
        <p className="mt-2 text-sm text-destructive truncate">{error}</p>
      ) : data ? (
        <p className="mt-2 text-2xl font-semibold">
          {data.running}
          <span className="text-sm font-normal text-muted-foreground"> / {data.total} running</span>
        </p>
      ) : (
        <p className="mt-2 text-sm text-muted-foreground">—</p>
      )}
    </Link>
  )
}