import type { AgentLogItemWithChildren } from '@/types/workflow'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
  RiArrowRightSLine,
  RiListView,
} from '@remixicon/react'
import {
  useMemo,
  useState,
} from 'react'
import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
import BlockIcon from '@/app/components/workflow/block-icon'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import { BlockEnum } from '@/app/components/workflow/types'

type AgentLogItemProps = {
  item: AgentLogItemWithChildren
  onShowAgentOrToolLog: (detail: AgentLogItemWithChildren) => void
}
const AgentLogItem = ({
  item,
  onShowAgentOrToolLog,
}: AgentLogItemProps) => {
  const {
    label,
    status,
    children,
    data,
    metadata,
  } = item
  const [expanded, setExpanded] = useState(false)
  const { getIconUrl } = useGetIcon()
  const toolIcon = useMemo(() => {
    const icon = metadata?.icon

    if (icon) {
      if (icon.includes('http'))
        return icon

      return getIconUrl(icon)
    }

    return ''
  }, [getIconUrl, metadata?.icon])

  const mergeStatus = useMemo(() => {
    if (status === 'start')
      return 'running'

    return status
  }, [status])

  return (
    <div className="rounded-[10px] border-[0.5px] border-components-panel-border bg-background-default">
      <div
        className={cn(
          'flex cursor-pointer items-center py-2 pr-3 pl-1.5',
          expanded && 'pb-1',
        )}
        onClick={() => setExpanded(!expanded)}
      >
        {
          expanded
            ? <RiArrowRightSLine className="size-4 shrink-0 rotate-90 text-text-quaternary" />
            : <RiArrowRightSLine className="size-4 shrink-0 text-text-quaternary" />
        }
        <BlockIcon
          className="mr-1.5 shrink-0"
          type={toolIcon ? BlockEnum.Tool : BlockEnum.Agent}
          toolIcon={toolIcon}
        />
        <div
          className="grow truncate system-sm-semibold-uppercase text-text-secondary"
          title={label}
        >
          {label}
        </div>
        {
          !!metadata?.elapsed_time && (
            <div className="mr-2 shrink-0 system-xs-regular text-text-tertiary">
              {metadata?.elapsed_time?.toFixed(3)}
              s
            </div>
          )
        }
        <NodeStatusIcon status={mergeStatus} />
      </div>
      {
        expanded && (
          <div className="p-1 pt-0">
            {
              !!children?.length && (
                <Button
                  className="mb-1 flex w-full items-center justify-between"
                  variant="tertiary"
                  onClick={() => onShowAgentOrToolLog(item)}
                >
                  <div className="flex items-center">
                    <RiListView className="mr-1 size-4 shrink-0 text-components-button-tertiary-text" />
                    {`${children.length} Action Logs`}
                  </div>
                  <div className="flex">
                    <RiArrowRightSLine className="size-4 shrink-0 text-components-button-tertiary-text" />
                  </div>
                </Button>
              )
            }
            {
              data && (
                <CodeEditor
                  readOnly
                  title={<div>{'data'.toLocaleUpperCase()}</div>}
                  language={CodeLanguage.json}
                  value={data}
                  isJSONStringifyBeauty
                />
              )
            }
          </div>
        )
      }
    </div>
  )
}

export default AgentLogItem