'use client'

import { useState, useEffect } from 'react'
import { X, CheckCircle2, XCircle, Loader2, Clock, ChevronDown, Wrench, Trash2 } from 'lucide-react'
import { formatDistanceToNow } from 'date-fns'
import { fr } from 'date-fns/locale/fr'
import { enUS } from 'date-fns/locale/en-US'
import { toast } from 'sonner'
import { useLanguage } from '@/lib/i18n'

interface AgentRunLogProps {
  agentId: string
  agentName: string
  onClose: () => void
}

interface Action {
  id: string
  status: string
  result?: string | null
  log?: string | null
  input?: string | null
  toolLog?: string | null
  tokensUsed?: number | null
  createdAt: string | Date
}

interface ToolLogStep {
  step: number
  text?: string
  toolCalls?: Array<{ toolName: string; args: any }>
  toolResults?: Array<{ toolName: string; preview?: string }>
}

const statusKeys: Record<string, string> = {
  success: 'agents.status.success',
  failure: 'agents.status.failure',
  running: 'agents.status.running',
  pending: 'agents.status.pending',
}

export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
  const { t, language } = useLanguage()
  const [actions, setActions] = useState<Action[]>([])
  const [loading, setLoading] = useState(true)
  const [isDeleting, setIsDeleting] = useState(false)
  const dateLocale = language === 'fr' ? fr : enUS

  const loadActions = async () => {
    setLoading(true)
    try {
      const { getAgentActions } = await import('@/app/actions/agent-actions')
      const data = await getAgentActions(agentId)
      setActions(data)
    } catch {
      // Silent fail
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => { loadActions() }, [agentId])

  const handleClearHistory = async () => {
    if (!confirm(t('agents.runLog.clearConfirm'))) return
    setIsDeleting(true)
    try {
      const { deleteAgentHistory } = await import('@/app/actions/agent-actions')
      await deleteAgentHistory(agentId)
      setActions([])
      toast.success(t('agents.runLog.cleared'))
    } catch {
      toast.error(t('agents.toasts.deleteError'))
    } finally {
      setIsDeleting(false)
    }
  }

  return (
    <div className="fixed inset-0 bg-black/20 flex justify-end z-50" onClick={onClose}>
      <div 
        className="bg-card shadow-2xl w-full max-w-md h-full overflow-y-auto animate-in slide-in-from-right duration-300 flex flex-col border-l border-border/40"
        onClick={e => e.stopPropagation()}
      >
        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
          <div>
            <h3 className="font-semibold text-card-foreground">{t('agents.runLog.title')}</h3>
            <p className="text-xs text-muted-foreground">{agentName}</p>
          </div>
          <div className="flex items-center gap-2">
            {actions.length > 0 && (
              <button
                onClick={handleClearHistory}
                disabled={isDeleting}
                className="p-1.5 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors disabled:opacity-50"
                title={t('agents.runLog.clearHistory')}
              >
                {isDeleting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Trash2 className="w-4 h-4" />}
              </button>
            )}
            <button onClick={onClose} className="p-1 rounded-md hover:bg-accent">
              <X className="w-5 h-5 text-muted-foreground" />
            </button>
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-4 space-y-2">
          {loading && (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
            </div>
          )}

          {!loading && actions.length === 0 && (
            <p className="text-center text-sm text-muted-foreground py-8">
              {t('agents.runLog.noHistory')}
            </p>
          )}

          {actions.map(action => {
            let toolSteps: ToolLogStep[] = []
            try {
              toolSteps = action.toolLog ? JSON.parse(action.toolLog) : []
            } catch {}

            return (
              <div
                key={action.id}
                className={`
                  p-3 rounded-lg border
                  ${action.status === 'success' ? 'bg-muted/40 border-border' : ''}
                  ${action.status === 'failure' ? 'bg-destructive/5 border-destructive/25' : ''}
                  ${action.status === 'running' ? 'bg-primary/5 border-primary/25' : ''}
                  ${action.status === 'pending' ? 'bg-muted border-border' : ''}
                `}
              >
                <div className="flex items-start gap-3">
                  <div className="mt-0.5">
                    {action.status === 'success' && <CheckCircle2 className="w-4 h-4 text-primary" />}
                    {action.status === 'failure' && <XCircle className="w-4 h-4 text-destructive" />}
                    {action.status === 'running' && <Loader2 className="w-4 h-4 text-primary animate-spin" />}
                    {action.status === 'pending' && <Clock className="w-4 h-4 text-muted-foreground" />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-foreground">
                        {t(statusKeys[action.status] || action.status)}
                      </span>
                      <span className="text-xs text-muted-foreground" suppressHydrationWarning>
                        {formatDistanceToNow(new Date(action.createdAt), { addSuffix: true, locale: dateLocale })}
                      </span>
                    </div>
                    {action.log && (
                      <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{action.log}</p>
                    )}
                  </div>
                </div>

                {toolSteps.length > 0 && (
                  <details className="mt-2">
                    <summary className="flex items-center gap-1.5 text-xs text-primary cursor-pointer hover:text-primary/80 font-medium">
                      <Wrench className="w-3 h-3" />
                      {t('agents.runLog.toolTrace', { count: toolSteps.length })}
                      <ChevronDown className="w-3 h-3" />
                    </summary>
                    <div className="mt-2 space-y-2 pl-2">
                      {toolSteps.map((step, i) => (
                        <div key={i} className="text-xs border-l-2 border-primary/30 pl-2 py-1">
                          <span className="font-medium text-muted-foreground">{t('agents.runLog.step', { num: step.step })}</span>
                          {step.toolCalls && step.toolCalls.length > 0 && (
                            <div className="mt-1 space-y-1">
                              {step.toolCalls.map((tc, j) => (
                                <div key={j} className="bg-muted rounded px-2 py-1">
                                  <span className="font-mono text-primary">{tc.toolName}</span>
                                  <span className="text-muted-foreground ml-1">
                                    {JSON.stringify(tc.args ?? {}).substring(0, 80)}
                                  </span>
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </details>
                )}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}