resolutionflow/frontend/src/pages/MaintenanceFlowDetailPage.tsx

import { useEffect, useState } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Wrench, Calendar, Play, Settings, Clock, CheckCircle, AlertCircle } from 'lucide-react'
import { treesApi } from '@/api/trees'
import { sessionsApi } from '@/api/sessions'
import { maintenanceSchedulesApi } from '@/api/maintenanceSchedules'
import { BatchLaunchModal } from '@/components/maintenance/BatchLaunchModal'
import { toast } from '@/lib/toast'
import { cn } from '@/lib/utils'
import type { Tree, MaintenanceSchedule, Session } from '@/types'

export default function MaintenanceFlowDetailPage() {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const [tree, setTree] = useState<Tree | null>(null)
  const [schedule, setSchedule] = useState<MaintenanceSchedule | null>(null)
  const [recentSessions, setRecentSessions] = useState<Session[]>([])
  const [showBatchModal, setShowBatchModal] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    if (!id) return
    const load = async () => {
      try {
        const treeData = await treesApi.get(id)
        setTree(treeData)

        // Load recent sessions for this tree
        try {
          const sessionData = await sessionsApi.list({ tree_id: id, size: 30 })
          setRecentSessions(Array.isArray(sessionData) ? sessionData : [])
        } catch {
          // Sessions load is optional
        }

        // Try to load schedule (404 is fine)
        try {
          const sched = await maintenanceSchedulesApi.getForTree(id)
          setSchedule(sched)
        } catch {
          // No schedule yet is fine
        }
      } catch {
        toast.error('Failed to load maintenance flow')
        navigate('/trees?type=maintenance')
      } finally {
        setIsLoading(false)
      }
    }
    load()
  }, [id, navigate])

  const handleLaunched = (_batchId: string, count: number) => {
    setShowBatchModal(false)
    toast.success(`${count} sessions created — view them in Sessions`)
    navigate('/sessions')
  }

  if (isLoading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
      </div>
    )
  }

  if (!tree) return null

  // Group sessions by batch_id for run history
  const batchMap = new Map<string, Session[]>()
  for (const s of recentSessions) {
    const key = s.batch_id ?? s.id
    const existing = batchMap.get(key) ?? []
    batchMap.set(key, [...existing, s])
  }
  const batches = Array.from(batchMap.entries()).slice(0, 10)

  return (
    <div className="mx-auto max-w-4xl space-y-6 p-6">
      {/* Header */}
      <div className="flex items-start justify-between">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-500/10 text-amber-400">
            <Wrench className="h-5 w-5" />
          </div>
          <div>
            <h1 className="text-xl font-semibold text-foreground">{tree.name}</h1>
            {tree.description && (
              <p className="text-[0.8125rem] text-muted-foreground">{tree.description}</p>
            )}
          </div>
        </div>
        <div className="flex gap-2">
          <button
            onClick={() => navigate(`/flows/${id}/edit`)}
            className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
          >
            <Settings className="h-3.5 w-3.5" />
            Edit Flow
          </button>
          <button
            onClick={() => setShowBatchModal(true)}
            className="flex items-center gap-1.5 rounded-lg bg-gradient-brand px-4 py-2 text-[0.875rem] font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
          >
            <Play className="h-3.5 w-3.5" />
            Batch Launch
          </button>
        </div>
      </div>

      {/* Schedule Panel */}
      <div className="rounded-xl border border-border bg-card p-5">
        <div className="flex items-center gap-2 mb-3">
          <Calendar className="h-4 w-4 text-muted-foreground" />
          <h2 className="font-semibold text-foreground">Schedule</h2>
        </div>
        {schedule ? (
          <div className="space-y-2 text-[0.875rem]">
            <div className="flex flex-wrap items-center gap-2">
              <span className={cn(
                "inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide",
                schedule.is_active
                  ? "bg-emerald-500/10 text-emerald-400"
                  : "bg-muted text-muted-foreground"
              )}>
                {schedule.is_active
                  ? <CheckCircle className="h-3 w-3" />
                  : <AlertCircle className="h-3 w-3" />}
                {schedule.is_active ? 'Active' : 'Paused'}
              </span>
              <code className="rounded bg-accent px-1.5 py-0.5 text-[0.8125rem] text-foreground">
                {schedule.cron_expression}
              </code>
              <span className="text-muted-foreground">({schedule.timezone})</span>
            </div>
            {schedule.next_run_at && (
              <p className="text-muted-foreground">
                Next run: {new Date(schedule.next_run_at).toLocaleString()}
              </p>
            )}
          </div>
        ) : (
          <p className="text-[0.875rem] text-muted-foreground">
            No schedule configured. Sessions can still be launched manually via Batch Launch.
          </p>
        )}
      </div>

      {/* Run History */}
      <div className="rounded-xl border border-border bg-card p-5">
        <div className="flex items-center gap-2 mb-4">
          <Clock className="h-4 w-4 text-muted-foreground" />
          <h2 className="font-semibold text-foreground">Run History</h2>
        </div>
        {batches.length === 0 ? (
          <p className="text-[0.875rem] text-muted-foreground">No runs yet. Launch a batch to get started.</p>
        ) : (
          <div className="space-y-2">
            {batches.map(([batchKey, sessions]) => {
              const completed = sessions.filter(s => s.completed_at).length
              const total = sessions.length
              const date = sessions[0]?.started_at
              return (
                <div key={batchKey} className="flex items-center justify-between rounded-lg border border-border px-4 py-3">
                  <div>
                    <p className="text-[0.875rem] font-medium text-foreground">
                      {total} target{total !== 1 ? 's' : ''}
                    </p>
                    {date && (
                      <p className="text-[0.8125rem] text-muted-foreground">
                        {new Date(date).toLocaleDateString()}
                      </p>
                    )}
                  </div>
                  <span className={cn(
                    "font-label text-[0.75rem] uppercase tracking-wide",
                    completed === total ? "text-emerald-400" : "text-amber-400"
                  )}>
                    {completed}/{total} complete
                  </span>
                </div>
              )
            })}
          </div>
        )}
      </div>

      {showBatchModal && (
        <BatchLaunchModal
          treeId={id!}
          treeName={tree.name}
          onClose={() => setShowBatchModal(false)}
          onLaunched={handleLaunched}
        />
      )}
    </div>
  )
}