import type { ReactNode, RefObject } from "react"
import { Panel } from "../../components/ui/Panel"
import { ChatWorkspace } from "../chat/ChatWorkspace"

export type ExpertKey = "xiaohongshu" | "douyin" | "browser" | "general"

export type ExpertVisualKey =
  | "xiaohongshu"
  | "douyin"
  | "browser"
  | "general"
  | "planner"
  | "zhihu"
  | "wechat"
  | "x"
  | "tiktok"
  | "poster"
  | "geo"
  | "leads"
  | "sales"

export interface ExpertGuideContent {
  greeting: string
  summary: string
  intro?: string
  requirementChecklist?: string[]
  routeOptions?: Array<{
    title: string
    detail: string
    accent: "host" | "visual"
  }>
  workflowSteps?: string[]
  continueHint?: string
  placeholder?: string
  prompts: string[]
}

interface ExpertsViewProps {
  activeExpertName: string
  activeExpertKey: ExpertKey
  activeExpertVisualKey: ExpertVisualKey
  panelActions: ReactNode
  workspaceRef: RefObject<HTMLDivElement | null>
  statusNotice: ReactNode
  bodyContent: ReactNode
  composerContent: ReactNode
  renderExpertIcon: (expertKey: ExpertVisualKey) => ReactNode
  renderExpertLogo: (expertKey: ExpertKey) => ReactNode
}

interface ExpertEmptyStateProps {
  activeExpertName: string
  activeExpertKey: ExpertKey
  activeExpertGuide: ExpertGuideContent
  starterQuestionsHint: string
  onStarterPrompt: (prompt: string) => void
}

export function ExpertsView({
  activeExpertName,
  activeExpertKey,
  activeExpertVisualKey,
  panelActions,
  workspaceRef,
  statusNotice,
  bodyContent,
  composerContent,
  renderExpertIcon,
  renderExpertLogo
}: ExpertsViewProps) {
  const expertWorkspaceLogo = renderExpertLogo(activeExpertKey)

  return (
    <ChatWorkspace
      panelLead={(
        <div className="conversation-panel-kicker expert-hero-kicker">
          {expertWorkspaceLogo ?? (
            <span className={"expert-hero-icon expert-hero-icon-" + activeExpertVisualKey} aria-hidden="true">
              {renderExpertIcon(activeExpertVisualKey)}
            </span>
          )}
          <span className="expert-hero-copy">
            <strong>{activeExpertName}</strong>
          </span>
        </div>
      )}
      panelActions={panelActions}
      workspaceRef={workspaceRef}
      statusNotice={statusNotice}
      intentNotice={null}
      bodyContent={bodyContent}
      composerContent={composerContent}
    />
  )
}

export function ExpertEmptyState({
  activeExpertName,
  activeExpertKey,
  activeExpertGuide,
  starterQuestionsHint,
  onStarterPrompt
}: ExpertEmptyStateProps) {
  if (activeExpertKey === "douyin") {
    return (
      <div className="empty-state expert-empty-state expert-empty-state-douyin">
        <div className="expert-guide-heading">
          <span className="empty-state-kicker">{activeExpertName}</span>
          <strong>{activeExpertGuide.greeting}</strong>
          {activeExpertGuide.intro ? <p>{activeExpertGuide.intro}</p> : null}
        </div>
        {activeExpertGuide.requirementChecklist?.length ? (
          <section className="douyin-guide-card">
            <span className="douyin-guide-label">建议先告诉我这些</span>
            <div className="douyin-guide-chip-list">
              {activeExpertGuide.requirementChecklist.map((item) => (
                <span key={item} className="douyin-guide-chip">{item}</span>
              ))}
            </div>
          </section>
        ) : null}
        {activeExpertGuide.routeOptions?.length ? (
          <div className="douyin-guide-grid">
            {activeExpertGuide.routeOptions.map((item) => (
              <section key={item.title} className={"douyin-guide-card douyin-guide-route-card " + item.accent}>
                <span className="douyin-guide-route-badge">{item.accent === "host" ? "有人出镜" : "纯画面"}</span>
                <strong className="douyin-guide-route-title">{item.title}</strong>
                <p className="douyin-guide-route-detail">{item.detail}</p>
              </section>
            ))}
          </div>
        ) : null}
        {activeExpertGuide.workflowSteps?.length ? (
          <section className="douyin-guide-card douyin-guide-card-wide">
            <span className="douyin-guide-label">生成流程</span>
            <div className="douyin-guide-step-list">
              {activeExpertGuide.workflowSteps.map((item, index) => (
                <div key={item} className="douyin-guide-step">
                  <span className="douyin-guide-step-index">{index + 1}</span>
                  <span className="douyin-guide-step-copy">{item}</span>
                </div>
              ))}
            </div>
            {activeExpertGuide.continueHint ? <p className="douyin-guide-continue">{activeExpertGuide.continueHint}</p> : null}
          </section>
        ) : null}
        <div className="douyin-guide-footer">
          <p>{starterQuestionsHint}</p>
          <div className="starter-prompt-list">
            {activeExpertGuide.prompts.map((item) => (
              <button key={item} type="button" className="starter-prompt" onClick={() => onStarterPrompt(item)}>{item}</button>
            ))}
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className={"empty-state expert-empty-state" + (activeExpertKey === "xiaohongshu" ? " expert-empty-state-xiaohongshu" : "")}>
      <span className="empty-state-kicker">{activeExpertName}</span>
      <strong>{activeExpertGuide.greeting}</strong>
      <p>{starterQuestionsHint}</p>
      <div className="starter-prompt-list">
        {activeExpertGuide.prompts.map((item) => (
          <button key={item} type="button" className="starter-prompt" onClick={() => onStarterPrompt(item)}>{item}</button>
        ))}
      </div>
    </div>
  )
}

export function NoExpertsState({ children }: { children: ReactNode }) {
  return <Panel className="empty-state" bodyClassName="empty-state-body">{children}</Panel>
}
