'use client'

import { useEffect, useState } from 'react'
import { getAgentTasks, AgentTask, AgentAction, AgentExecution } from '@/lib/api/agent'
import { getAgentActions, getAgentExecutions } from '@/lib/api/agent'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Spinner } from '@/components/ui/Spinner'
import { Skeleton } from '@/components/ui/Skeleton'
import { EmptyState } from '@/components/ui/EmptyState'
import { ErrorState } from '@/components/ui/ErrorState'
import { TASK_STATUS_LABELS, TASK_STATUS_COLORS, formatRelativeTime } from '@/lib/types'
import { Activity, Zap, Filter } from 'lucide-react'
import { cn } from '@/lib/utils'

const statusOptions = ['all', 'created', 'running', 'awaiting_approval', 'approved', 'completed', 'failed', 'cancelled'] as const

export default function AgentPage() {
  const [tasks, setTasks] = useState<AgentTask[]>([])
  const [selectedTask, setSelectedTask] = useState<AgentTask | null>(null)
  const [actions, setActions] = useState<AgentAction[]>([])
  const [executions, setExecutions] = useState<AgentExecution[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [statusFilter, setStatusFilter] = useState<'all' | string>('all')

  useEffect(() => {
    let mounted = true
    async function load() {
      try {
        const res = await getAgentTasks({ status: statusFilter === 'all' ? undefined : statusFilter, limit: 50 })
        if (!res.success) throw new Error(res.message)
        if (mounted) {
          setTasks(res.data.tasks)
          if (res.data.tasks.length > 0 && !selectedTask) {
            setSelectedTask(res.data.tasks[0])
          } else if (!res.data.tasks.some(t => t.id === selectedTask?.id) && res.data.tasks.length > 0) {
            setSelectedTask(res.data.tasks[0])
          } else if (res.data.tasks.length === 0) {
            setSelectedTask(null)
          }
        }
      } catch (err) {
        if (mounted) setError(err instanceof Error ? err.message : 'Failed to load tasks')
      } finally {
        if (mounted) setLoading(false)
      }
    }
    load()
    const interval = setInterval(load, 10000)
    return () => { clearInterval(interval) }
  }, [statusFilter])

  useEffect(() => {
    if (!selectedTask) { setActions([]); setExecutions([]); return }
    const taskId = selectedTask.id
    let mounted = true
    async function load() {
      try {
        const [actionsRes, execRes] = await Promise.all([
          getAgentActions(taskId),
          getAgentExecutions(taskId),
        ])
        if (mounted) {
          if (actionsRes.success) setActions(actionsRes.data.actions || [])
          if (execRes.success) setExecutions(execRes.data.executions || [])
        }
      } catch (err) {
        console.error(err)
      }
    }
    load()
    const interval = setInterval(load, 5000)
    return () => { clearInterval(interval) }
  }, [selectedTask])

  if (loading) {
    return (
      <div className="space-y-6">
        <div><h1 className="text-2xl font-bold">Agent Operations</h1></div>
        <div className="grid gap-6 lg:grid-cols-3">
          <Card><CardContent className="p-6"><Skeleton className="h-10 w-1/2"/></CardContent></Card>
          <div className="lg:col-span-2"><Card><CardContent className="p-6"><Skeleton className="h-10 w-1/2"/></CardContent></Card></div>
        </div>
      </div>
    )
  }

  if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />

  const filteredTasks = tasks

  return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Agent Operations</h1>
          <p className="text-gray-500 dark:text-gray-400">Monitor IMBARAGA's autonomous task execution</p>
        </div>
        <div className="flex gap-2">
          <select
            value={statusFilter}
            onChange={e => setStatusFilter(e.target.value)}
            className="h-10 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800"
          >
            <option value="all">All Statuses</option>
            {statusOptions.slice(1).map(s => <option key={s} value={s}>{s.replace('_', ' ')}</option>)}
          </select>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        <Card className="lg:col-span-1">
          <CardHeader>
            <CardTitle className="flex items-center gap-2"><Activity className="h-5 w-5" /> Tasks ({filteredTasks.length})</CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            {filteredTasks.length === 0 ? (
              <EmptyState icon={Activity} title="No tasks" description="Tasks appear when orders are created" />
            ) : (
              <div className="divide-y divide-gray-200 dark:divide-gray-700 max-h-[600px] overflow-y-auto">
                {filteredTasks.map(task => (
                  <button
                    key={task.id}
                    onClick={() => setSelectedTask(task)}
                    className={cn(
                      'w-full px-4 py-3 text-left transition-colors',
                      selectedTask?.id === task.id ? 'bg-indigo-50 dark:bg-indigo-900/20' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
                    )}
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-gray-900 dark:text-white truncate">{task.objective}</p>
                        <p className="text-xs text-gray-500 dark:text-gray-400">#{task.id.slice(0,8)} • {formatRelativeTime(task.started_at)}</p>
                      </div>
                      <Badge className={cn(TASK_STATUS_COLORS[task.status as keyof typeof TASK_STATUS_COLORS] || '', 'ml-2')}>
                        {TASK_STATUS_LABELS[task.status as keyof typeof TASK_STATUS_LABELS] || task.status}
                      </Badge>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        <div className="lg:col-span-2 space-y-6">
          {selectedTask ? (
            <>
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2"><Zap className="h-5 w-5" /> Task Details</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid gap-4 sm:grid-cols-2">
                    <div><p className="text-sm text-gray-500">Task ID</p><p className="font-mono text-sm">{selectedTask.id}</p></div>
                    <div><p className="text-sm text-gray-500">Type</p><p className="font-medium">{selectedTask.task_type}</p></div>
                    <div><p className="text-sm text-gray-500">Status</p><Badge className={cn(TASK_STATUS_COLORS[selectedTask.status as keyof typeof TASK_STATUS_COLORS] || '')}>{TASK_STATUS_LABELS[selectedTask.status as keyof typeof TASK_STATUS_LABELS] || selectedTask.status}</Badge></div>
                    <div><p className="text-sm text-gray-500">Priority</p><p className="font-medium capitalize">{selectedTask.priority}</p></div>
                    <div><p className="text-sm text-gray-500">Current Step</p><p className="font-medium">{selectedTask.current_step || '—'}</p></div>
                    <div><p className="text-sm text-gray-500">Started</p><p className="font-medium">{formatRelativeTime(selectedTask.started_at)}</p></div>
                    <div><p className="text-sm text-gray-500">Completed</p><p className="font-medium">{selectedTask.completed_at ? formatRelativeTime(selectedTask.completed_at) : '—'}</p></div>
                    {selectedTask.error_message && (
                      <div className="sm:col-span-2 p-3 rounded bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
                        Error: {selectedTask.error_message}
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </>
          ) : (
            <Card>
              <CardContent className="py-12">
                <EmptyState icon={Activity} title="Select a task" description="Click a task from the list to view its details, actions, and executions" />
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  )
}