import { useEffect, useState } from 'react'

interface ContainerInfo {
  name: string
  image: string
  tag: string
  upToDate: boolean | null
  registry: string
  endpoint: string
}

const KNOWN = ['docker.io', 'ghcr.io', 'lscr.io']

export function DockerUpdatesWidget() {
  const [containers, setContainers] = useState<ContainerInfo[]>([])
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)

  const load = (bust = false) => {
    if (bust) setRefreshing(true)
    else setLoading(true)
    setError(null)
    fetch(`/api/updates/docker${bust ? '?refresh=1' : ''}`)
      .then(r => r.json())
      .then(d => { if (d.error) setError(d.error); else setContainers(d.containers) })
      .catch(() => setError('Failed to connect'))
      .finally(() => { setLoading(false); setRefreshing(false) })
  }

  useEffect(() => { load() }, [])

  const outdated    = containers.filter(c => c.upToDate === false)
  const upToDate    = containers.filter(c => c.upToDate === true)
  const unverified  = containers.filter(c => c.upToDate === null && KNOWN.includes(c.registry))
  const external    = containers.filter(c => !KNOWN.includes(c.registry))

  // Show: outdated first, then up to date. Unverified and ext only as a footer count.
  const visible = [...outdated, ...upToDate]

  return (
    <div className="card">
      <div className="widget-header">
        <div className="widget-title"><span className="dot" />Docker</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {!loading && !error && (
            <span className="widget-badge" style={outdated.length > 0 ? { background: 'rgba(248,113,113,0.15)', color: 'var(--red)' } : {}}>
              {outdated.length > 0 ? `${outdated.length} outdated` : 'all current'}
            </span>
          )}
          <button
            onClick={() => load(true)}
            disabled={refreshing || loading}
            title="Re-check all images"
            style={{
              background: 'none', border: '1px solid var(--border)', borderRadius: 6,
              color: 'var(--muted)', cursor: 'pointer', padding: '2px 6px', fontSize: 11,
              lineHeight: 1, transition: 'color 0.15s',
              opacity: refreshing || loading ? 0.4 : 1,
            }}
          >
            {refreshing ? '…' : '↺'}
          </button>
        </div>
      </div>

      {loading && <div className="widget-loading">Checking images…</div>}
      {error   && <div className="widget-error">⚠ {error}</div>}

      {!loading && !error && (
        <div className="progress-group" style={{ maxHeight: '260px', overflowY: 'auto', scrollbarWidth: 'thin', paddingRight: '4px' }}>
          {visible.map(c => (
            <div key={c.name} className="list-item">
              <div className="list-item-left" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 2 }}>
                <span>{c.name}</span>
                <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--muted)' }}>
                  {c.image}:{c.tag.startsWith('sha256:') ? c.tag.slice(0, 15) + '…' : c.tag} · {c.endpoint}
                </span>
              </div>
              {c.upToDate === true
                ? <span className="pill pill-green">✓</span>
                : <span className="pill pill-red">↑ update</span>
              }
            </div>
          ))}

          {(unverified.length > 0 || external.length > 0) && (
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--muted)', marginTop: 8, lineHeight: 1.6 }}>
              {unverified.length > 0 && <div>{unverified.length} image{unverified.length > 1 ? 's' : ''} could not be verified</div>}
              {external.length  > 0 && <div>{external.length} image{external.length > 1 ? 's' : ''} on unsupported registry</div>}
            </div>
          )}
        </div>
      )}
    </div>
  )
}