Ops-dashboard/app/git/_components/git-repos-list.tsx

'use client'

import { useCallback, useEffect, useState } from 'react'
import Link from 'next/link'
import { type RepoStatus, parseGitStatus } from '@/lib/parse-git'
import { useFlowRun } from '@/hooks/useFlowRun'
import ConfirmDialog from '@/components/ConfirmDialog'
import StreamingTerminal from '@/components/StreamingTerminal'
import { apiFetch } from '@/lib/csrf'

interface RepoEntry {
  path: string
  name: string
  status: RepoStatus | null
  error: string | null
}

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

  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 parseGitStatus(output)
}

function statusBadge(status: RepoStatus) {
  if (status.dirty) {
    return (
      <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400">
        <span className="size-1.5 rounded-full bg-orange-500 dark:bg-orange-400" />
        dirty
      </span>
    )
  }
  if (status.behind && status.behind > 0) {
    return (
      <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
        <span className="size-1.5 rounded-full bg-blue-500 dark:bg-blue-400" />
        {status.behind} behind
      </span>
    )
  }
  return (
    <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
      <span className="size-1.5 rounded-full bg-green-500 dark:bg-green-400" />
      clean
    </span>
  )
}

type ActionDef = {
  commandKey: string
  args: string[]
  preview: string
  title: string
}

type Props = {
  initialRepos: RepoEntry[]
}

export default function GitReposList({ initialRepos }: Props) {
  const [repos, setRepos] = useState<RepoEntry[]>(initialRepos)
  const [refreshing, setRefreshing] = useState(false)
  const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
  const [pendingAction, setPendingAction] = useState<ActionDef | null>(null)
  const flowRun = useFlowRun()

  const refresh = useCallback(async () => {
    setRefreshing(true)
    try {
      const updated = await Promise.all(
        initialRepos.map(async (r) => {
          try {
            const status = await fetchRepoStatus(r.path)
            return { ...r, status, error: null }
          } catch (err) {
            return { ...r, status: null, error: err instanceof Error ? err.message : 'failed' }
          }
        }),
      )
      setRepos(updated)
      setLastUpdated(new Date())
    } finally {
      setRefreshing(false)
    }
  }, [initialRepos])

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

  const handleConfirm = useCallback(() => {
    if (!pendingAction) return
    flowRun.start(pendingAction.commandKey, pendingAction.args)
    setPendingAction(null)
  }, [pendingAction, flowRun.start])

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">
            {repos.length} repo{repos.length !== 1 ? 's' : ''}
          </span>
          {refreshing && (
            <span className="text-xs text-muted-foreground animate-pulse">refreshing…</span>
          )}
        </div>
        <span className="text-xs text-muted-foreground">
          updated {lastUpdated.toLocaleTimeString()}
        </span>
      </div>

      <div className="overflow-x-auto rounded-lg border border-border">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border bg-muted/50">
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Repo</th>
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Branch</th>
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Ahead</th>
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Path</th>
              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Actions</th>
            </tr>
          </thead>
          <tbody>
            {repos.map((r) => (
              <tr
                key={r.path}
                className="border-b border-border last:border-0 hover:bg-muted/30 transition-colors"
              >
                <td className="px-4 py-3 font-medium">
                  <Link
                    href={`/git/${encodeURIComponent(r.name)}`}
                    className="hover:underline text-foreground"
                  >
                    {r.name}
                  </Link>
                </td>
                <td className="px-4 py-3 font-mono text-xs text-muted-foreground">
                  {r.status?.branch ?? '—'}
                </td>
                <td className="px-4 py-3">
                  {r.error ? (
                    <span className="text-xs text-destructive">{r.error}</span>
                  ) : r.status ? (
                    statusBadge(r.status)
                  ) : (
                    <span className="text-xs text-muted-foreground">—</span>
                  )}
                </td>
                <td className="px-4 py-3 text-xs text-muted-foreground">
                  {r.status?.ahead !== undefined && r.status.ahead > 0 ? (
                    <span className="text-amber-600 dark:text-amber-400">↑{r.status.ahead}</span>
                  ) : (
                    '—'
                  )}
                </td>
                <td className="px-4 py-3 font-mono text-xs text-muted-foreground">{r.path}</td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-2">
                    <button
                      onClick={() =>
                        setPendingAction({
                          commandKey: 'git_fetch',
                          args: [r.path],
                          preview: `git fetch --quiet\n(in ${r.path})`,
                          title: `Fetch ${r.name}`,
                        })
                      }
                      disabled={flowRun.status === 'running'}
                      className="rounded-md border border-border px-2 py-1 text-xs hover:bg-muted/50 disabled:opacity-50 transition-colors"
                    >
                      Fetch
                    </button>
                    <button
                      onClick={() =>
                        setPendingAction({
                          commandKey: 'git_pull',
                          args: [r.path],
                          preview: `git pull --ff-only\n(in ${r.path})`,
                          title: `Pull ${r.name}`,
                        })
                      }
                      disabled={flowRun.status === 'running' || r.status?.dirty === true}
                      title={r.status?.dirty ? 'Working tree is dirty — commit or stash changes first' : undefined}
                      className="rounded-md border border-border px-2 py-1 text-xs hover:bg-muted/50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                    >
                      Pull
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {flowRun.status !== 'idle' && (
        <div className="space-y-2">
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium text-foreground">Output</span>
            {flowRun.status !== 'running' && (
              <button
                onClick={flowRun.reset}
                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
              >
                Close
              </button>
            )}
          </div>
          <StreamingTerminal lines={flowRun.lines} status={flowRun.status} error={flowRun.error} />
        </div>
      )}

      <ConfirmDialog
        open={pendingAction !== null}
        title={pendingAction?.title ?? ''}
        commandPreview={pendingAction?.preview ?? ''}
        onConfirm={handleConfirm}
        onCancel={() => setPendingAction(null)}
      />
    </div>
  )
}