import { useMemo } from 'react'
import { Ban, Maximize2, Trash2, X } from 'lucide-react'
import type { TaskLog } from '@/api'
import { TASK_STATUS, TASK_STATUS_TEXT } from '@/constants'
import { formatDateTime, formatDuration } from '@/lib/format'
import { ansiToHtml } from '@/lib/log-render'
import { Button } from '@/components/ui/button'
import { StatusDot } from '@/components/business/StatusDot'

export function LogDetailPanel({
  log,
  content,
  loading,
  isStopping,
  onClose,
  onStop,
  onDelete,
  onMaximize,
}: {
  log: TaskLog | null
  content: string
  loading?: boolean
  isStopping?: boolean
  onClose?: () => void
  onStop?: () => void
  onDelete?: (id: string) => void
  onMaximize?: () => void
}) {
  const html = useMemo(() => ansiToHtml(content || ''), [content])

  if (!log) {
    return <div className="p-6 text-sm text-[var(--text-muted)]">选择一条记录查看详情</div>
  }

  return (
    <div className="flex h-full min-h-[360px] flex-col overflow-hidden">
      <div className="flex items-center justify-between gap-2 border-b border-[var(--border)] px-4 py-2">
        <div className="flex min-w-0 items-center gap-2">
          <StatusDot state={log.status} />
          <span className="truncate text-sm font-medium">日志详情</span>
          <span className="text-xs text-[var(--text-muted)]">{TASK_STATUS_TEXT[log.status] || log.status}</span>
          {log.status === TASK_STATUS.RUNNING ? (
            <Button size="sm" variant="danger" disabled={isStopping} onClick={onStop}>
              <Ban size={12} />
              {isStopping ? '停止中' : '停止'}
            </Button>
          ) : null}
        </div>
        <div className="flex items-center gap-1">
          {onMaximize ? (
            <Button size="icon" variant="ghost" title="全屏" onClick={onMaximize}>
              <Maximize2 size={14} />
            </Button>
          ) : null}
          {onDelete && log.id ? (
            <Button size="icon" variant="ghost" title="删除" onClick={() => onDelete(log.id)}>
              <Trash2 size={14} />
            </Button>
          ) : null}
          {onClose ? (
            <Button size="icon" variant="ghost" title="关闭" onClick={onClose}>
              <X size={14} />
            </Button>
          ) : null}
        </div>
      </div>

      <div className="space-y-2 border-b border-[var(--border)] px-4 py-3 text-sm">
        <Row label="任务名称" value={log.task_name || log.task_id} />
        <Row label="状态" value={TASK_STATUS_TEXT[log.status] || log.status} />
        <Row label="耗时" value={formatDuration(log.duration)} />
        <Row label="开始" value={formatDateTime(log.start_time)} />
        <Row label="结束" value={formatDateTime(log.end_time)} />
        <div>
          <div className="mb-1 text-xs text-[var(--text-muted)]">执行命令</div>
          <pre className="max-h-24 overflow-auto rounded-md bg-[var(--bg-primary)] p-2 font-mono text-xs whitespace-pre-wrap">
            {log.command || '-'}
          </pre>
        </div>
        {log.error ? (
          <div>
            <div className="mb-1 text-xs text-[var(--danger)]">错误</div>
            <pre className="overflow-auto rounded-md bg-[color-mix(in_srgb,var(--danger)_10%,transparent)] p-2 font-mono text-xs text-[var(--danger)] whitespace-pre-wrap">
              {log.error}
            </pre>
          </div>
        ) : null}
      </div>

      <div className="flex items-center justify-between border-b border-[var(--border)] px-4 py-1.5 text-xs text-[var(--text-muted)]">
        <span>日志输出</span>
        {loading ? <span>加载中...</span> : null}
      </div>
      <div
        className="flex-1 overflow-auto bg-[var(--bg-primary)] p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-[var(--text-secondary)]"
        dangerouslySetInnerHTML={{
          __html: html || (loading ? '加载中...' : '(无输出)'),
        }}
      />
    </div>
  )
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <span className="text-xs text-[var(--text-muted)]">{label}</span>
      <span className="truncate text-xs text-[var(--text-secondary)]">{value}</span>
    </div>
  )
}
