import type { ReactNode } from 'react'
import { cn } from '@/lib/utils'
import { CollapsibleCard } from '../basic/collapsible-card'
import { CatalogLine, CircleLine, CheckboxCircleLine, IndeterminateCircleLine, ArrowRightCircleFillLine } from '../basic/icons-inline'

const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0'

export type TaskStatus = 'completed' | 'uncompleted' | 'skipped' | 'cancelled'

export interface TaskPartTask {
  id?: string
  text: string
  status?: TaskStatus
}

export interface TaskPartProps {
  tasks?: TaskPartTask[]
  title?: string
  currentTaskId?: string
  defaultExpanded?: boolean
  className?: string
  headerIcon?: ReactNode
  uncompletedIcon?: ReactNode
  completedIcon?: ReactNode
  skippedIcon?: ReactNode
  loaderIcon?: ReactNode
}

const defaultHeaderIcon = <CatalogLine className={cn(ICON_CLASS, 'text-text-secondary')} />
const defaultUncompleted = <CircleLine className={cn(ICON_CLASS, 'text-text-tertiary')} />
const defaultCompleted = <CheckboxCircleLine className={cn(ICON_CLASS, 'text-text-quaternary')} />
const defaultSkipped = <IndeterminateCircleLine className={cn(ICON_CLASS, 'text-text-tertiary')} />
const defaultLoader = <ArrowRightCircleFillLine className={cn(ICON_CLASS, 'text-text')} />

function getStatusIcon(
  task: TaskPartTask,
  isCurrent: boolean,
  icons: {
    loaderIcon?: ReactNode
    completedIcon?: ReactNode
    skippedIcon?: ReactNode
    uncompletedIcon?: ReactNode
  }
): ReactNode {
  if (isCurrent) return icons.loaderIcon ?? defaultLoader
  if (task.status === 'completed') return icons.completedIcon ?? defaultCompleted
  if (task.status === 'skipped' || task.status === 'cancelled') return icons.skippedIcon ?? defaultSkipped
  return icons.uncompletedIcon ?? defaultUncompleted
}

export function TaskPart({
  tasks = [],
  title = 'To-dos',
  currentTaskId,
  defaultExpanded = true,
  className,
  headerIcon,
  uncompletedIcon,
  completedIcon,
  skippedIcon,
  loaderIcon,
}: TaskPartProps) {
  return (
    <CollapsibleCard
      headerIcon={headerIcon ?? defaultHeaderIcon}
      headerTitle={<span className="text-left">{title}</span>}
      defaultExpanded={defaultExpanded}
      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
      showExpandAllBar
      maxHeight={124}
      className={className}
    >
      <div className="flex flex-col gap-2">
        {tasks.map((task, index) => {
          const taskId = task.id ?? index
          const isCurrent = currentTaskId != null && currentTaskId === String(taskId)
          const statusIcon = getStatusIcon(task, isCurrent, {
            loaderIcon,
            completedIcon,
            skippedIcon,
            uncompletedIcon,
          })

          return (
            <div key={taskId} className="flex flex-row gap-2 items-start">
              <div className="flex items-center justify-center shrink-0 pt-0.5 [&>svg]:w-[var(--font-size-sm)] [&>svg]:h-[var(--font-size-sm)]">
                {statusIcon}
              </div>
              <span
                className={cn(
                  'text-xs leading-xs flex-1 text-left',
                  isCurrent
                    ? 'text-text'
                    : task.status === 'completed'
                      ? 'text-text-quaternary line-through'
                      : 'text-text-tertiary'
                )}
              >
                {task.text}
              </span>
            </div>
          )
        })}
      </div>
    </CollapsibleCard>
  )
}

TaskPart.displayName = 'TaskPart'
export const AgentTaskList = TaskPart
export type AgentTaskListProps = TaskPartProps