import { useState, useMemo, useEffect, useCallback } from 'react'
import { Star, ChevronDown, ChevronRight, Search, ClipboardList, Send, Save, RotateCcw } from 'lucide-react'
import Modal from './ui/Modal'
import { toast } from 'sonner'
import { surveyApi } from '../lib/api-services'
import { surveyPages, totalFeatures } from '../data/surveyData'

interface FeatureScore {
  score: number
  useful: '' | 'yes' | 'no' | 'maybe'
  remark: string
}

const STORAGE_KEY = 'survey-draft'

export default function SurveyModal({ open, onClose }: { open: boolean; onClose: () => void }) {
  const [expandedPage, setExpandedPage] = useState<number | null>(1)
  const [scores, setScores] = useState<Record<string, FeatureScore>>({})
  const [searchQuery, setSearchQuery] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [savedAt, setSavedAt] = useState<string | null>(null)

  /** 从 localStorage 恢复暂存数据 */
  const loadDraft = useCallback(() => {
    try {
      const raw = localStorage.getItem(STORAGE_KEY)
      if (raw) {
        const data = JSON.parse(raw)
        if (data.scores && typeof data.scores === 'object') {
          setScores(data.scores)
          setSavedAt(data.savedAt || null)
        }
      }
    } catch {
      // 忽略解析错误
    }
  }, [])

  /** 暂存到 localStorage */
  const saveDraft = useCallback(() => {
    const hasData = Object.values(scores).some(s => s.score > 0 || s.useful || s.remark)
    if (!hasData) {
      toast.info('暂无可保存的填写内容')
      return
    }
    const now = new Date().toISOString()
    localStorage.setItem(STORAGE_KEY, JSON.stringify({ scores, savedAt: now }))
    setSavedAt(now)
    toast.success('已暂存填写内容，下次打开可恢复')
  }, [scores])

  /** 清空暂存 */
  const clearDraft = useCallback(() => {
    localStorage.removeItem(STORAGE_KEY)
    setScores({})
    setSavedAt(null)
    toast.info('已清空所有填写内容')
  }, [])

  /** 打开时恢复暂存 */
  useEffect(() => {
    if (open) loadDraft()
  }, [open, loadDraft])

  const setScore = (id: string, score: number) => {
    setScores(prev => ({
      ...prev,
      [id]: { ...prev[id], score: prev[id]?.score === score ? 0 : score },
    }))
  }

  const setUseful = (id: string, useful: 'yes' | 'no' | 'maybe') => {
    setScores(prev => ({
      ...prev,
      [id]: { ...prev[id], useful: prev[id]?.useful === useful ? '' : useful },
    }))
  }

  const setRemark = (id: string, remark: string) => {
    setScores(prev => ({
      ...prev,
      [id]: { ...prev[id], remark },
    }))
  }

  const ratedCount = useMemo(() => Object.values(scores).filter(s => s.score > 0).length, [scores])

  const filteredPages = useMemo(() => {
    if (!searchQuery.trim()) return surveyPages
    const q = searchQuery.toLowerCase()
    return surveyPages.map(p => ({
      ...p,
      features: p.features.filter(f => f.name.toLowerCase().includes(q) || f.desc.toLowerCase().includes(q)),
    })).filter(p => p.features.length > 0)
  }, [searchQuery])

  const handleSubmit = async () => {
    const items = Object.entries(scores)
      .filter(([, v]) => v.score > 0 || v.useful || v.remark)
      .map(([id, v]) => ({ featureId: id, score: v.score, useful: v.useful, remark: v.remark }))
    if (items.length === 0) {
      toast.info('请至少对一项功能进行评分')
      return
    }
    setSubmitting(true)
    try {
      await surveyApi.submit(items)
      toast.success(`已提交 ${items.length} 项评分，感谢您的反馈！`)
      localStorage.removeItem(STORAGE_KEY)
      setSavedAt(null)
      onClose()
    } catch {
      localStorage.setItem('survey-results', JSON.stringify({ items, submittedAt: new Date().toISOString() }))
      toast.success(`已保存 ${items.length} 项评分到本地`)
      localStorage.removeItem(STORAGE_KEY)
      setSavedAt(null)
      onClose()
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <Modal open={open} onClose={onClose} title="功能调查问卷" size="lg" className="p-0">
      <div className="border-b border-gray-200 px-4 py-3 space-y-2">
        <div className="flex items-center gap-2 text-sm text-gray-600">
          <ClipboardList className="w-4 h-4 shrink-0" />
          <span>对 {totalFeatures} 项功能打分（1=无用 ~ 5=非常有用），帮助我们改进产品</span>
          <span className="ml-auto text-xs text-primary font-medium">已评 {ratedCount}/{totalFeatures}</span>
        </div>
        <div className="relative">
          <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input
            type="text"
            placeholder="搜索功能名称..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-8 pr-3 py-1.5 text-sm border border-gray-200 rounded-md focus:outline-none focus:border-primary"
          />
        </div>
      </div>

      {/* 页面列表 */}
      <div className="max-h-[60vh] overflow-y-auto">
        {filteredPages.map(page => {
          const isExpanded = expandedPage === page.id || !!searchQuery.trim()
          const pageRated = page.features.filter(f => scores[f.id]?.score).length
          return (
            <div key={page.id} className="border-b border-gray-100">
              <button
                onClick={() => setExpandedPage(isExpanded && !searchQuery ? null : page.id)}
                className="w-full flex items-center gap-2 px-4 py-2.5 hover:bg-gray-50 text-left"
              >
                {isExpanded ? <ChevronDown className="w-4 h-4 text-gray-400 shrink-0" /> : <ChevronRight className="w-4 h-4 text-gray-400 shrink-0" />}
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-medium text-gray-700">{page.id}. {page.name}</div>
                  <div className="flex items-center gap-1.5 mt-0.5">
                    <span className="text-xs text-gray-400 truncate">📍 {page.menu}</span>
                    {page.tab && <span className="text-xs text-primary/70 truncate">| Tab: {page.tab}</span>}
                  </div>
                </div>
                <span className="ml-auto text-xs text-gray-400 shrink-0">{page.features.length} 项{pageRated > 0 && ` · 已评 ${pageRated}`}</span>
              </button>
              {isExpanded && (
                <div className="px-4 pb-3 space-y-2">
                  {page.features.map(f => {
                    const s = scores[f.id]
                    return (
                      <div key={f.id} className="flex items-start gap-3 py-1.5 rounded-md hover:bg-gray-50 px-2">
                        <div className="flex-1 min-w-0">
                          <div className="text-sm text-gray-700">{f.name}</div>
                          <div className="text-xs text-gray-400">{f.desc}</div>
                          <div className="flex items-center gap-1 mt-1">
                            {[1, 2, 3, 4, 5].map(n => (
                              <button
                                key={n}
                                onClick={() => setScore(f.id, n)}
                                className="p-0.5"
                                aria-label={`${n}星`}
                              >
                                <Star
                                  className={`w-4 h-4 ${(s?.score || 0) >= n ? 'text-amber-400 fill-amber-400' : 'text-gray-300'}`}
                                />
                              </button>
                            ))}
                            <div className="flex gap-1 ml-3">
                              {([['yes', '有用', 'text-emerald-600 border-emerald-200 bg-emerald-50'], ['no', '无用', 'text-rose-600 border-rose-200 bg-rose-50'], ['maybe', '待定', 'text-amber-600 border-amber-200 bg-amber-50']] as const).map(([val, label, cls]) => (
                                <button
                                  key={val}
                                  onClick={() => setUseful(f.id, val)}
                                  className={`px-2 py-0.5 text-xs rounded border transition-all ${s?.useful === val ? cls : 'text-gray-400 border-gray-200 hover:bg-gray-100'}`}
                                >
                                  {label}
                                </button>
                              ))}
                            </div>
                          </div>
                          {(s?.score > 0 || s?.useful) && (
                            <input
                              type="text"
                              placeholder="优化建议（可选）"
                              value={s?.remark || ''}
                              onChange={(e) => setRemark(f.id, e.target.value)}
                              className="mt-1.5 w-full text-xs px-2 py-1 border border-gray-200 rounded focus:outline-none focus:border-primary"
                            />
                          )}
                        </div>
                      </div>
                    )
                  })}
                </div>
              )}
            </div>
          )
        })}
      </div>

      {/* 底部提交 */}
      <div className="border-t border-gray-200 px-4 py-3 flex items-center justify-between">
        <div className="flex flex-col gap-0.5">
          <span className="text-xs text-gray-500">已评分 {ratedCount} / {totalFeatures} 项</span>
          {savedAt && <span className="text-xs text-gray-400">上次暂存：{new Date(savedAt).toLocaleString('zh-CN')}</span>}
        </div>
        <div className="flex gap-2">
          <button
            onClick={clearDraft}
            disabled={ratedCount === 0 && !savedAt}
            className="px-3 py-1.5 text-sm text-gray-500 border border-gray-200 rounded-md hover:bg-gray-50 disabled:opacity-50 flex items-center gap-1"
          >
            <RotateCcw className="w-3.5 h-3.5" />
            清空
          </button>
          <button
            onClick={saveDraft}
            disabled={ratedCount === 0}
            className="px-3 py-1.5 text-sm text-gray-600 border border-gray-200 rounded-md hover:bg-gray-50 disabled:opacity-50 flex items-center gap-1"
          >
            <Save className="w-3.5 h-3.5" />
            暂存
          </button>
          <button
            onClick={handleSubmit}
            disabled={submitting || ratedCount === 0}
            className="px-4 py-1.5 text-sm text-white bg-primary rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1.5"
          >
            <Send className="w-3.5 h-3.5" />
            {submitting ? '提交中...' : '提交问卷'}
          </button>
        </div>
      </div>
    </Modal>
  )
}
