'use client'

import { useEffect, useRef, useState, useTransition } from 'react'
import { Sparkles, Loader2, CheckCircle2, AlertTriangle } from 'lucide-react'
import { formatDistanceToNow } from 'date-fns'
import { Button } from '@/components/ui/button'
import {
  fetchAIReviewSession,
  fetchAIReviewSnapshot,
  startAIReviewSessionAction,
  type AIReviewSnapshot,
} from './actions'
import type { AIReviewSessionRow } from '@/lib/ai-review-session'

interface Props {
  initial: AIReviewSnapshot
}

export function StartAIPass({ initial }: Props) {
  const [snapshot, setSnapshot] = useState<AIReviewSnapshot>(initial)
  const [pending, startTransition] = useTransition()
  const [error, setError] = useState<string | null>(null)
  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)

  const latest = snapshot.latest
  const isRunning = Boolean(
    latest && (latest.status === 'PENDING' || latest.status === 'RUNNING'),
  )
  const latestId = latest?.id

  // Poll while a session is in-flight, plus a refresh after it finishes so
  // the queueDepth catches up with whatever the home server wrote.
  useEffect(() => {
    if (!isRunning || !latestId) {
      if (pollRef.current) {
        clearInterval(pollRef.current)
        pollRef.current = null
      }
      return
    }
    pollRef.current = setInterval(async () => {
      const [row, snap] = await Promise.all([
        fetchAIReviewSession(latestId),
        fetchAIReviewSnapshot(),
      ])
      setSnapshot(prev => ({ queueDepth: snap.queueDepth, latest: row ?? prev.latest }))
    }, 5000)
    return () => {
      if (pollRef.current) clearInterval(pollRef.current)
      pollRef.current = null
    }
  }, [isRunning, latestId])

  const onStart = () => {
    setError(null)
    startTransition(async () => {
      const res = await startAIReviewSessionAction()
      if (!res.ok) {
        setError(res.error ?? 'Failed to start session')
        return
      }
      const snap = await fetchAIReviewSnapshot()
      setSnapshot(snap)
    })
  }

  const disabled = pending || snapshot.queueDepth === 0 || Boolean(isRunning)

  return (
    <div className="rounded-xl border bg-card p-4 space-y-3">
      <div className="flex items-start gap-3">
        <Sparkles className="size-5 text-primary mt-0.5" />
        <div className="flex-1 min-w-0">
          <div className="text-sm font-medium">AI pass on home server</div>
          <div className="text-xs text-muted-foreground">
            {snapshot.queueDepth === 0
              ? 'Queue is empty. Capture or flag items to enable.'
              : `${snapshot.queueDepth} item${snapshot.queueDepth === 1 ? '' : 's'} ready for review.`}
          </div>
        </div>
        <Button size="sm" onClick={onStart} disabled={disabled}>
          {pending || isRunning ? (
            <>
              <Loader2 className="size-4 animate-spin" />
              {isRunning ? labelFor(latest!.status) : 'Starting…'}
            </>
          ) : (
            <>
              <Sparkles className="size-4" />
              Start AI pass
            </>
          )}
        </Button>
      </div>

      {error && (
        <div className="text-xs text-destructive bg-destructive/10 rounded px-2 py-1.5 flex items-start gap-2">
          <AlertTriangle className="size-3.5 mt-0.5 shrink-0" />
          <span>{error}</span>
        </div>
      )}

      {latest && <LastRun row={latest} />}
    </div>
  )
}

function LastRun({ row }: { row: AIReviewSessionRow }) {
  const startedAt = new Date(row.startedAt)
  const finishedAt = row.finishedAt ? new Date(row.finishedAt) : null

  return (
    <div className="border-t pt-3 text-xs space-y-1.5">
      <div className="flex items-center gap-2 text-muted-foreground">
        <StatusIcon status={row.status} />
        <span>
          {labelFor(row.status)}{' '}
          {finishedAt
            ? `· finished ${formatDistanceToNow(finishedAt, { addSuffix: true })}`
            : `· started ${formatDistanceToNow(startedAt, { addSuffix: true })}`}{' '}
          · {row.queueDepth} queued at start
        </span>
      </div>
      {row.errorMessage && (
        <div className="text-destructive break-words">{row.errorMessage}</div>
      )}
      {row.logTail && (
        <details className="text-muted-foreground">
          <summary className="cursor-pointer select-none">Log tail</summary>
          <pre className="mt-1 max-h-48 overflow-auto whitespace-pre-wrap rounded bg-muted/40 p-2 text-[11px] leading-snug">
            {row.logTail}
          </pre>
        </details>
      )}
    </div>
  )
}

function StatusIcon({ status }: { status: AIReviewSessionRow['status'] }) {
  if (status === 'RUNNING' || status === 'PENDING')
    return <Loader2 className="size-3.5 animate-spin text-primary" />
  if (status === 'SUCCEEDED') return <CheckCircle2 className="size-3.5 text-emerald-600" />
  return <AlertTriangle className="size-3.5 text-destructive" />
}

function labelFor(status: AIReviewSessionRow['status']): string {
  switch (status) {
    case 'PENDING': return 'Launching…'
    case 'RUNNING': return 'Running on home server'
    case 'SUCCEEDED': return 'Succeeded'
    case 'FAILED': return 'Failed'
  }
}