'use client'

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

type CaddyData = { soonestExpiryMs: number | null; count: number }
export type CaddyInitial = { data: CaddyData; error: null } | { data: null; error: string }

async function refreshCaddy(): Promise<CaddyData> {
  const output = await fetchAgentOutput('caddy_list_certs')
  const certs = parseCertList(output)
  const expiryTimes = certs
    .filter((c) => c.notAfter)
    .map((c) => new Date(c.notAfter).getTime())
  const soonestExpiryMs = expiryTimes.length > 0 ? Math.min(...expiryTimes) : null
  return { soonestExpiryMs, count: certs.length }
}

function daysUntil(ms: number): number {
  return Math.floor((ms - Date.now()) / (1000 * 60 * 60 * 24))
}

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

  const refresh = useCallback(async () => {
    try {
      const d = await refreshCaddy()
      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="/caddy" className="block rounded-lg border bg-card p-5 transition-colors hover:bg-accent">
      <h2 className="text-sm font-medium text-muted-foreground">Caddy / TLS</h2>
      {error ? (
        <p className="mt-2 text-sm text-destructive truncate">{error}</p>
      ) : data ? (
        <div className="mt-2">
          {data.soonestExpiryMs !== null ? (
            <p className="text-2xl font-semibold">
              {daysUntil(data.soonestExpiryMs)}
              <span className="text-sm font-normal text-muted-foreground"> days to expiry</span>
            </p>
          ) : (
            <p className="text-sm text-muted-foreground">no certs</p>
          )}
          <p className="mt-1 text-xs text-muted-foreground">
            {data.count} cert{data.count !== 1 ? 's' : ''}
          </p>
        </div>
      ) : (
        <p className="mt-2 text-sm text-muted-foreground">—</p>
      )}
    </Link>
  )
}