import type { ReactNode, RefObject } from "react"
import type { ProjectRole } from "@qjclaw/shared-types"
import { Panel } from "../../components/ui/Panel"
import { ChatWorkspace } from "../chat/ChatWorkspace"
import { ExpertPanelLead } from "./ExpertPanelLead"
import { RoleTeamPanel } from "./RoleTeamPanel"
import { RoleCollaborationFlow } from "./RoleCollaborationFlow"

export type ExpertKey = "xiaohongshu" | "douyin" | "browser" | "general" | "planner" | "wechat" | "geo" | "zhihu"

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[]
  roles?: ProjectRole[]
}

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
  activeRoleId?: string
  isStreaming?: boolean
}

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

  return (
    <ChatWorkspace
      panelLead={(
        <ExpertPanelLead
          activeExpertKey={activeExpertKey}
          activeExpertName={activeExpertName}
          activeExpertVisualKey={activeExpertVisualKey}
          expertWorkspaceLogo={expertWorkspaceLogo}
          renderExpertIcon={renderExpertIcon}
        />
      )}
      panelActions={panelActions}
      workspaceRef={workspaceRef}
      statusNotice={statusNotice}
      intentNotice={null}
      bodyContent={bodyContent}
      composerContent={composerContent}
    />
  )
}

export function ExpertEmptyState({
  activeExpertName,
  activeExpertKey,
  activeExpertGuide,
  starterQuestionsHint,
  onStarterPrompt,
  activeRoleId,
  isStreaming
}: ExpertEmptyStateProps) {
  if (activeExpertKey === "xiaohongshu") {
    const starterPrompts = activeExpertGuide.starterPrompts ?? activeExpertGuide.prompts.map((item) => ({
      title: item,
      description: "",
      prompt: item
    }))

    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>
          {activeExpertGuide.summary ? <p>{activeExpertGuide.summary}</p> : null}
        </div>
        {activeExpertGuide.roles && activeExpertGuide.roles.length > 0 ? (
          <RoleTeamPanel roles={activeExpertGuide.roles} activeRoleId={activeRoleId} isStreaming={isStreaming} />
        ) : null}
        <div className="starter-prompt-list">
          {starterPrompts.map((item) => (
            <button
              key={item.prompt}
              type="button"
              className="starter-prompt"
              aria-label={item.prompt}
              title={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>
    )
  }

  if (activeExpertKey === "planner") {
    return (
      <div className="empty-state expert-empty-state expert-empty-state-planner">
        <div className="planner-empty-copy">
          <strong className="planner-empty-title">{activeExpertGuide.greeting}</strong>
          {activeExpertGuide.summary ? <p>{activeExpertGuide.summary}</p> : null}
        </div>
        {activeExpertGuide.intro ? <p className="planner-guide-intro">{activeExpertGuide.intro}</p> : null}
        {activeExpertGuide.requirementChecklist?.length ? (
          <div className="planner-brief-chip-list">
            {activeExpertGuide.requirementChecklist.map((item) => (
              <span key={item} className="planner-brief-chip">{item}</span>
            ))}
          </div>
        ) : null}
        <div className="starter-prompt-list">
          {activeExpertGuide.prompts.map((item) => (
            <button
              key={item}
              type="button"
              className="starter-prompt planner-starter-prompt"
              onClick={() => onStarterPrompt(item)}
            >
              <span className="starter-prompt-title">{item}</span>
            </button>
          ))}
        </div>
      </div>
    )
  }

  if (activeExpertKey === "wechat") {
    return (
      <div className="empty-state expert-empty-state expert-empty-state-wechat">
        <div className="wechat-empty-copy">
          <strong className="wechat-empty-title">{activeExpertGuide.greeting}</strong>
          {activeExpertGuide.summary ? <p>{activeExpertGuide.summary}</p> : null}
        </div>
        {activeExpertGuide.intro ? <p className="wechat-guide-intro">{activeExpertGuide.intro}</p> : null}
        {activeExpertGuide.requirementChecklist?.length ? (
          <div className="wechat-brief-chip-list">
            {activeExpertGuide.requirementChecklist.map((item) => (
              <span key={item} className="wechat-brief-chip">{item}</span>
            ))}
          </div>
        ) : null}
        {activeExpertGuide.workflowSteps?.length ? (
          <div className="wechat-capability-list">
            {activeExpertGuide.workflowSteps.map((item, index) => (
              <div key={item} className="wechat-capability-item">
                <span className="wechat-capability-index">{index + 1}</span>
                <span className="wechat-capability-copy">{item}</span>
              </div>
            ))}
          </div>
        ) : null}
        <div className="starter-prompt-list">
          {activeExpertGuide.prompts.map((item) => (
            <button
              key={item}
              type="button"
              className="starter-prompt wechat-starter-prompt"
              onClick={() => onStarterPrompt(item)}
            >
              <span className="starter-prompt-title">{item}</span>
            </button>
          ))}
        </div>
      </div>
    )
  }

  if (activeExpertKey === "geo") {
    return (
      <div className="empty-state expert-empty-state expert-empty-state-geo">
        <div className="geo-empty-copy">
          <strong className="geo-empty-title">{activeExpertGuide.greeting}</strong>
          {activeExpertGuide.summary ? <p>{activeExpertGuide.summary}</p> : null}
        </div>
        {activeExpertGuide.intro ? <p className="geo-guide-intro">{activeExpertGuide.intro}</p> : null}
        {activeExpertGuide.requirementChecklist?.length ? (
          <div className="geo-brief-chip-list">
            {activeExpertGuide.requirementChecklist.map((item) => (
              <span key={item} className="geo-brief-chip">{item}</span>
            ))}
          </div>
        ) : null}
        {activeExpertGuide.roles && activeExpertGuide.roles.length > 0 ? (
          <RoleCollaborationFlow
            roles={activeExpertGuide.roles}
            handoffs={[
              { fromRoleId: "diagnostician", toRoleId: "strategist", label: "诊断报告" },
              { fromRoleId: "strategist", toRoleId: "content-creator", label: "策略方案" },
              { fromRoleId: "content-creator", toRoleId: "tech-advisor", label: "优化内容" },
            ]}
            activeRoleId={activeRoleId}
            isStreaming={isStreaming}
          />
        ) : null}
        <div className="starter-prompt-list">
          {activeExpertGuide.prompts.map((item) => (
            <button
              key={item}
              type="button"
              className="starter-prompt geo-starter-prompt"
              onClick={() => onStarterPrompt(item)}
            >
              <span className="starter-prompt-title">{item}</span>
            </button>
          ))}
        </div>
      </div>
    )
  }

  if (activeExpertKey === "zhihu") {
    return (
      <div className="empty-state expert-empty-state expert-empty-state-zhihu">
        <div className="zhihu-empty-copy">
          <strong className="zhihu-empty-title">{activeExpertGuide.greeting}</strong>
          {activeExpertGuide.summary ? <p>{activeExpertGuide.summary}</p> : null}
        </div>
        {activeExpertGuide.intro ? <p className="zhihu-guide-intro">{activeExpertGuide.intro}</p> : null}
        {activeExpertGuide.requirementChecklist?.length ? (
          <div className="zhihu-brief-chip-list">
            {activeExpertGuide.requirementChecklist.map((item) => (
              <span key={item} className="zhihu-brief-chip">{item}</span>
            ))}
          </div>
        ) : null}
        {activeExpertGuide.workflowSteps?.length ? (
          <div className="zhihu-strategy-list">
            <span className="zhihu-strategy-label">策略三要素</span>
            {activeExpertGuide.workflowSteps.map((item, index) => (
              <div key={item} className="zhihu-strategy-item">
                <span className="zhihu-strategy-index">{index + 1}</span>
                <span className="zhihu-strategy-copy">{item}</span>
              </div>
            ))}
          </div>
        ) : null}
        <div className="starter-prompt-list">
          {activeExpertGuide.prompts.map((item) => (
            <button
              key={item}
              type="button"
              className="starter-prompt zhihu-starter-prompt"
              onClick={() => onStarterPrompt(item)}
            >
              <span className="starter-prompt-title">{item}</span>
            </button>
          ))}
        </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>
}
