import { useState, useCallback } from 'react'
import { PageLayout } from '@/components/common/PageLayout'
import { ChatPanel } from '@/components/common/ChatPanel'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { TrendingUp, ChevronDown, RefreshCw, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import { api } from '@/lib/api'

/** 话题类型 */
interface Topic {
  title: string
  desc: string
  samples: string[]
}

/** 经营决策助手:初始兜底话题,换一批时 AI 动态生成 */
const FALLBACK_TOPICS: Topic[] = [
  { title: '扩张收缩', desc: '开店、关店、业务线', samples: ['现在适合扩张开第二家店吗?', '要不要关闭亏损的业务线?', '新业务线该自营还是加盟?', '应该先扩张还是先巩固?'] },
  { title: '项目承接', desc: '大单、长期合同', samples: ['是否应该接付款周期90天的大单?', '长期框架合同要不要签?', '预付款比例低的项目能接吗?', '客户要求独家合作利弊?'] },
  { title: '定价策略', desc: '涨价、降价、促销', samples: ['该不该降价15%抢竞品客户?', '产品涨价怎么跟客户沟通?', '促销活动会不会损害品牌?', '成本上涨如何调整定价?'] },
  { title: '招人裁员', desc: '招聘、解雇、绩效', samples: ['现在该招人还是裁人?', '裁掉绩效差的员工怎么操作?', '关键岗位招人还是培养?', '外包和正式员工怎么选?'] },
  { title: '融资合伙', desc: '融资、合伙、股权', samples: ['现在适合融资吗?', '合伙人要退股怎么谈条件?', '出让多少股权合适?', '银行贷款还是股权融资?'] },
  { title: '转型外包', desc: '转型、外包、调整', samples: ['业务转型方向怎么选?', '哪些业务可以外包?', '转型期间现金流怎么管理?', '外包质量怎么控?'] },
]

export function Decisions() {
  const [topics, setTopics] = useState<Topic[]>(FALLBACK_TOPICS)
  const [selectedTopic, setSelectedTopic] = useState(0)
  const [topicsCollapsed, setTopicsCollapsed] = useState(false)
  const [loadingTopics, setLoadingTopics] = useState(false)

  /** 换一批:调用 AI 动态生成话题(避免重复) */
  const refreshTopics = useCallback(async () => {
    setLoadingTopics(true)
    try {
      const res = await api.getTopics('decision', topics.map((t) => t.title))
      if (res.topics?.length > 0) {
        setTopics(res.topics)
        setSelectedTopic(0)
      }
    } catch {
      // AI 不可用时保持当前话题
    } finally {
      setLoadingTopics(false)
    }
  }, [topics])

  const currentTopic = topics[selectedTopic]

  return (
    <PageLayout
      title="经营决策助手"
      description="项目承接、扩张收缩、招人、降价、业务线调整、融资合伙。情景推演,把利弊讲透。"
    >
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <button
              onClick={() => setTopicsCollapsed(!topicsCollapsed)}
              className="flex items-center gap-1.5 text-base font-semibold transition-opacity hover:opacity-70"
            >
              <ChevronDown className={cn('h-4 w-4 transition-transform', topicsCollapsed && '-rotate-90')} />
              决策话题
            </button>
            <button
              onClick={refreshTopics}
              disabled={loadingTopics}
              className="flex items-center gap-1 text-xs text-muted-foreground transition-opacity hover:opacity-70 disabled:opacity-50"
            >
              {loadingTopics ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />}
              换一批
            </button>
          </div>
        </CardHeader>
        {!topicsCollapsed && (
        <CardContent>
          {loadingTopics && (
            <div className="flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground">
              <Loader2 className="h-4 w-4 animate-spin" />
              AI 正在生成新话题…
            </div>
          )}
            <div className={cn('grid gap-3 sm:grid-cols-2 lg:grid-cols-3', loadingTopics && 'pointer-events-none opacity-50')}>
              {topics.map((t, i) => (
                <button
                  key={t.title + i}
                  onClick={() => setSelectedTopic(i)}
                  className={cn(
                    'flex items-start gap-3 rounded-md border p-3 text-left transition-colors',
                    selectedTopic === i
                      ? 'border-primary bg-primary/5 ring-1 ring-primary'
                      : 'border-input hover:bg-accent',
                  )}
                >
                  <TrendingUp className="mt-0.5 h-5 w-5 shrink-0 text-primary" aria-hidden />
                  <div>
                    <p className="text-sm font-medium">{t.title}</p>
                    <p className="mt-0.5 text-xs text-muted-foreground">{t.desc}</p>
                  </div>
                </button>
              ))}
            </div>
        </CardContent>
        )}
      </Card>

      {currentTopic && (
        <ChatPanel
          scene="decision"
          samples={currentTopic.samples}
          topic={currentTopic.title}
          defaultMode="normal"
          placeholder={`描述你的${currentTopic.title}问题…`}
          showRiskCard={false}
          enableUpload={false}
          footer="AI 提供情景推演和利弊分析,最终决策由老板做出。"
        />
      )}
    </PageLayout>
  )
}