import type { ReactNode } from 'react'
import { CollapsibleCard } from '../basic/collapsible-card'
import { Button } from '../basic/button'
import { QuestionnaireLine, ArrowDownSLine } from '../basic/icons-inline'

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

export interface AskUserPartProps {
  title?: string
  question: string
  skipText?: string
  runText?: string
  askTimeText?: string
  onSkip?: () => void
  onRun?: () => void
  onAskTimeChange?: (value: string) => void
  contentMaxHeight?: number
  collapsible?: boolean
  className?: string
  headerIcon?: ReactNode
}

const defaultHeaderIcon = <QuestionnaireLine className={ICON_CLASS} />

export function AskUserPart({
  title = 'Initializing agent…',
  question,
  skipText = 'Skip ⌘⌫',
  runText = 'Run ⌘⏎',
  askTimeText = 'Ask any time',
  onSkip,
  onRun,
  contentMaxHeight,
  collapsible = true,
  className,
  headerIcon,
}: AskUserPartProps) {
  return (
    <CollapsibleCard
      headerIcon={headerIcon ?? defaultHeaderIcon}
      headerTitle={<span className="text-left">{title}</span>}
      contentPadding="var(--spacing-1\.5) var(--spacing-2)"
      defaultExpanded
      contentMaxHeight={contentMaxHeight}
      collapsible={collapsible}
      footer={
        <>
          <Button variant="ghost" size="sm" className="gap-1 py-0.5 px-0 text-text-secondary hover:text-text">
            <span className="text-xs">{askTimeText}</span>
            <ArrowDownSLine className="w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0" />
          </Button>
          <div className="flex-1" />
          <Button variant="ghost" size="sm" onClick={onSkip} className="bg-fill text-text-tertiary hover:bg-fill-secondary hover:text-text-secondary">
            {skipText}
          </Button>
          <Button variant="secondary" size="sm" onClick={onRun}>
            {runText}
          </Button>
        </>
      }
      className={className}
    >
      <div className="text-sm text-left">
        <span className="text-text">{question}</span>
      </div>
    </CollapsibleCard>
  )
}

AskUserPart.displayName = 'AskUserPart'
export const AgentQuestionCard = AskUserPart
export type AgentQuestionCardProps = AskUserPartProps