import type { ChatLaunchState, ProjectIntentSuggestion } from "@qjclaw/shared-types"
import type { ReactNode } from "react"

interface ConversationStatusNoticeProps {
  show: boolean
  chatLaunchState: ChatLaunchState
  status: string
}

export function ConversationStatusNotice({ show, chatLaunchState, status }: ConversationStatusNoticeProps) {
  if (!show) {
    return null
  }

  return (
    <div className={"notice" + (chatLaunchState === "error" ? " error" : " toast-notice")} role={chatLaunchState === "error" ? "alert" : "status"} aria-live="polite">
      {status}
    </div>
  )
}

interface HomeIntentSuggestionNoticeProps {
  suggestion: ProjectIntentSuggestion | null
  decisionPending: boolean
  labels: {
    title: string
    prefix: string
    suffix: string
    continue: string
    switchAction: string
  }
  renderIcon: (projectId: string) => ReactNode
  onContinue: () => void | Promise<unknown>
  onSwitch: () => void | Promise<unknown>
}

export function HomeIntentSuggestionNotice({
  suggestion,
  decisionPending,
  labels,
  renderIcon,
  onContinue,
  onSwitch
}: HomeIntentSuggestionNoticeProps) {
  if (!suggestion) {
    return null
  }

  return (
    <div className="home-intent-suggestion" role="status" aria-live="polite">
      <div className="home-intent-suggestion-leading" aria-hidden="true">
        <span className={"home-intent-suggestion-icon home-intent-suggestion-icon-" + suggestion.projectId}>
          {renderIcon(suggestion.projectId)}
        </span>
      </div>
      <div className="home-intent-suggestion-copy">
        <strong>{labels.title}</strong>
        <p>
          {labels.prefix}
          {suggestion.projectDisplayName}
          {labels.suffix}
        </p>
      </div>
      <div className="home-intent-suggestion-actions">
        <button type="button" className="secondary" disabled={decisionPending} onClick={() => void onContinue()}>
          {labels.continue}
        </button>
        <button type="button" disabled={decisionPending} onClick={() => void onSwitch()}>
          {labels.switchAction}
        </button>
      </div>
    </div>
  )
}
