import { useState } from 'react'
import { Brain, HeartHandshake, Zap, Phone, ChevronDown } from 'lucide-react'
import { PageLayout } from '@/components/common/PageLayout'
import { ChatPanel } from '@/components/common/ChatPanel'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { cn } from '@/lib/utils'
import type { EmotionMode } from '@/types'

const MODES: { value: EmotionMode; label: string; desc: string; icon: typeof Brain; samples: string[] }[] = [
  {
    value: 'calm',
    label: '冷静分析',
    desc: '事实、风险、方案优先,克制客观',
    icon: Brain,
    samples: [
      '合伙人背叛了,我很愤怒,该怎么处理?',
      '明天的谈判我拖延了一周没准备',
      '员工集体离职,我该怎么应对?',
      '竞品抄袭我们,理性分析该怎么反击',
    ],
  },
  {
    value: 'companion',
    label: '陪伴疏导',
    desc: '先承接情绪,再给出下一步,温和不评判',
    icon: HeartHandshake,
    samples: [
      '最近压力很大,睡不着觉',
      '感觉撑不下去了',
      '家人不理解我创业的辛苦',
      '今天被客户骂了,很难受',
    ],
  },
  {
    value: 'push',
    label: '强力推动',
    desc: '把拖延拆成今天可完成的小动作,直接有力',
    icon: Zap,
    samples: [
      '一直拖延不想做年底复盘',
      '知道该运动但就是不动',
      '积压了一堆邮件不想处理',
      '该打的催款电话一直拖着不打',
    ],
  },
]

/** 情绪价值引擎:三模式切换 + 危机干预入口 */
export function EmotionCenter() {
  const [emotionMode, setEmotionMode] = useState<EmotionMode>('calm')
  const [modesCollapsed, setModesCollapsed] = useState(false)

  return (
    <PageLayout
      title="情绪价值引擎"
      description="先处理情绪,再处理事情。选择适合你当前状态的模式。"
    >
      {/* 危机干预提示 */}
      <Card className="border-rose-200 bg-rose-50">
        <CardContent className="flex items-center gap-3 py-4">
          <Phone className="h-5 w-5 shrink-0 text-rose-600" aria-hidden />
          <div className="flex-1">
            <p className="text-sm font-medium text-rose-900">危机干预</p>
            <p className="text-xs text-rose-700">
              如果你正在经历强烈痛苦或有自伤念头,请立即拨打心理援助热线 400-161-9995 或前往最近医院急诊。
            </p>
          </div>
        </CardContent>
      </Card>

      {/* 情绪模式选择器 */}
      <Card>
        <CardHeader className="pb-3">
          <button
            onClick={() => setModesCollapsed(!modesCollapsed)}
            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', modesCollapsed && '-rotate-90')} />
            回复模式
          </button>
        </CardHeader>
        {!modesCollapsed && (
        <CardContent>
          <div className="grid gap-3 sm:grid-cols-3">
            {MODES.map((m) => (
              <button
                key={m.value}
                onClick={() => setEmotionMode(m.value)}
                className={cn(
                  'flex flex-col items-start gap-1 rounded-md border p-4 text-left transition-colors',
                  emotionMode === m.value
                    ? 'border-primary bg-primary/5 ring-1 ring-primary'
                    : 'border-input hover:bg-accent',
                )}
              >
                <m.icon className="mb-1 h-5 w-5 text-primary" aria-hidden />
                <span className="text-sm font-medium">{m.label}</span>
                <span className="text-xs text-muted-foreground">{m.desc}</span>
              </button>
            ))}
          </div>
        </CardContent>
        )}
      </Card>

      <ChatPanel
        scene="emotion"
        samples={MODES.find((m) => m.value === emotionMode)?.samples || []}
        topic={MODES.find((m) => m.value === emotionMode)?.label}
        defaultMode="ephemeral"
        emotionMode={emotionMode}
        placeholder="说说你现在的感受…"
        showRiskCard={false}
        enableUpload={false}
        footer="情绪对话默认使用阅后即焚模式,退出后不留痕迹。传统文化内容仅供反思与陪伴。"
      />
    </PageLayout>
  )
}