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 ExpertStarterPrompt {
  title: string
  description: string
  prompt: string
}

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[]
  starterPrompts?: ExpertStarterPrompt[]
}

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 === "xiaohongshu") {
    const starterPrompts = activeExpertGuide.starterPrompts ?? activeExpertGuide.prompts.map((prompt) => ({
      title: prompt,
      description: activeExpertGuide.summary,
      prompt
    }))

    return (
      <div className="empty-state expert-empty-state expert-empty-state-xiaohongshu">
        <div className="xiaohongshu-empty-copy">
          <strong className="xiaohongshu-empty-title">{activeExpertGuide.greeting}</strong>
          <p>{activeExpertGuide.summary}</p>
        </div>
        <div className="starter-prompt-list" aria-label="小红书任务入口">
          {starterPrompts.map((item) => (
            <button
              key={item.prompt}
              type="button"
              className="starter-prompt"
              title={item.prompt}
              aria-label={item.prompt}
              onClick={() => onStarterPrompt(item.prompt)}
            >
              <span className="starter-prompt-title">{item.title}</span>
              <span className="starter-prompt-desc">{item.description}</span>
            </button>
          ))}
        </div>
      </div>
    )
  }

  if (activeExpertKey === "douyin") {
    return (
      <div className="empty-state expert-empty-state expert-empty-state-douyin">
        <div className="douyin-guide-grid">
          <section className="douyin-video-preview-card" aria-label="短视频预览">
            <div className="douyin-video-frame">
              <div className="douyin-video-topbar">
                <span>Brief 预览</span>
                <span>9:16</span>
              </div>
              <div className="douyin-video-play" aria-hidden="true" />
              <div className="douyin-video-caption">
                <span>开场钩子</span>
                <strong>3 秒抓住注意力</strong>
              </div>
              <div className="douyin-video-progress">
                <span />
              </div>
            </div>
            <div className="douyin-shot-strip" aria-hidden="true">
              <span />
              <span />
              <span />
              <span />
            </div>
          </section>

          <section className="douyin-guide-card">
            <span className="douyin-guide-label">开始前补全信息</span>
            {activeExpertGuide.intro ? <p className="douyin-guide-intro">{activeExpertGuide.intro}</p> : null}
            {activeExpertGuide.requirementChecklist?.length ? (
              <div className="douyin-guide-chip-list">
                {activeExpertGuide.requirementChecklist.map((item) => (
                  <span key={item} className="douyin-guide-chip">{item}</span>
                ))}
              </div>
            ) : null}
            {activeExpertGuide.routeOptions?.length ? (
              <div className="douyin-route-list">
                {activeExpertGuide.routeOptions.map((item) => (
                  <div key={item.title} className={"douyin-guide-route-card " + item.accent}>
                    <span className="douyin-guide-route-badge">{item.accent === "host" ? "数字人口播" : "纯画面展示"}</span>
                    <p className="douyin-guide-route-detail">{item.detail}</p>
                  </div>
                ))}
              </div>
            ) : null}
            {activeExpertGuide.workflowSteps?.length ? (
              <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>
            ) : null}
            {activeExpertGuide.continueHint ? <p className="douyin-guide-continue">{activeExpertGuide.continueHint}</p> : null}
          </section>
        </div>

        <div className="douyin-guide-footer">
          <div className="starter-prompt-list">
            {activeExpertGuide.prompts.map((item) => (
              <button
                key={item}
                type="button"
                className="starter-prompt douyin-starter-prompt"
                onClick={() => onStarterPrompt(item)}
              >
                <span className="starter-prompt-desc">{item}</span>
              </button>
            ))}
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="empty-state expert-empty-state">
      <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>
}
