import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import api from '@/lib/api'
import { FilterableTable } from '@/components/FilterableTable'
import { LoadingSpinner } from '@/components/LoadingSpinner'
import { CollapsibleSection } from '@/components/CollapsibleSection'
import { MetricCard } from '@/components/MetricCard'
import { Tabs } from '@/components/Tabs'
import { formatNumber, formatPercent } from '@/lib/utils'
import { useState } from 'react'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts'

const STAGE_COLORS: Record<string, string> = { '爬坡': '#3b82f6', '成熟': '#22c55e', '衰退': '#eab308', '淘汰': '#ef4444' }

export function ProductLifecyclePage() {
  const [tab, setTab] = useState('lifecycle')
  const [stage, setStage] = useState('')
  const queryClient = useQueryClient()

  const { data: productData, isLoading: productLoading } = useQuery({
    queryKey: ['product/products', stage],
    queryFn: () => api.get('/product/products', { params: stage ? { stage } : {} }),
  })

  const { data: reviewOverview, isLoading: reviewLoading } = useQuery({
    queryKey: ['product/reviews/overview'],
    queryFn: () => api.get('/product/reviews/overview'),
  })

  const { data: reviewData, isLoading: reviewListLoading } = useQuery({
    queryKey: ['product/reviews'],
    queryFn: () => api.get('/product/reviews', { params: { page: 1, page_size: 100 } }),
  })

  const trackMutation = useMutation({
    mutationFn: (id: number) => api.post(`/product/products/${id}/track`),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['product/products'] }),
  })

  if (tab === 'lifecycle' && productLoading) return <LoadingSpinner text="加载产品生命周期数据..." />
  if (tab === 'reviews' && reviewLoading) return <LoadingSpinner text="加载评价数据..." />

  const products = (productData as any)?.data || []
  const reviews = (reviewData as any)?.data || []
  const overview = (reviewOverview as any)?.data || {}

  const stageDistribution = products.reduce((acc: Record<string, number>, r: any) => {
    acc[r.lifecycle_stage] = (acc[r.lifecycle_stage] || 0) + 1
    return acc
  }, {})
  const stagePieData = Object.entries(stageDistribution).map(([name, value]) => ({ name, value }))

  const categoryData = [
    { name: '口味', value: Number(overview.taste_count || 0) },
    { name: '服务', value: Number(overview.service_count || 0) },
    { name: '环境', value: Number(overview.env_count || 0) },
    { name: '异物', value: Number(overview.foreign_matter_count || 0) },
    { name: '分量', value: Number(overview.portion_count || 0) },
  ].filter(d => d.value > 0)

  const totalReviews = Number(overview.total_reviews || 0)
  const positiveRate = totalReviews > 0 ? (Number(overview.positive || 0) / totalReviews * 100) : 0
  const avgRating = Number(overview.avg_rating || 0)

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold">产品生命周期与评价归因</h1>
          <p className="mt-0.5 text-xs text-muted-foreground">SKU生命周期追踪 · 评价NLP归因 · 存活判定</p>
        </div>
      </div>

      <Tabs tabs={[
        { key: 'lifecycle', label: '产品生命周期' },
        { key: 'reviews', label: '评价分析' },
      ]} active={tab} onChange={setTab} />

      {tab === 'lifecycle' && (
        <>
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            <MetricCard title="产品总数" value={products.length} format="number" description="在追踪的SKU数量" />
            <MetricCard title="爬坡期" value={stageDistribution['爬坡'] || 0} format="number" description="上市7天内" status="warn" />
            <MetricCard title="成熟期" value={stageDistribution['成熟'] || 0} format="number" description="上市7-90天" status="good" />
            <MetricCard title="衰退期" value={stageDistribution['衰退'] || 0} format="number" description="上市90天+" status="bad" />
          </div>

          <div className="grid gap-4 lg:grid-cols-2">
            <CollapsibleSection title="生命周期阶段分布" subtitle="各阶段SKU数量">
              <ResponsiveContainer width="100%" height={250}>
                <PieChart>
                  <Pie data={stagePieData} cx="50%" cy="50%" outerRadius={70} dataKey="value"
                    labelLine={false} label={({ name, value }: any) => <tspan fontSize={11}>{`${name}: ${value}`}</tspan>}>
                    {stagePieData.map((entry, i) => <Cell key={i} fill={STAGE_COLORS[entry.name] || '#999'} />)}
                  </Pie>
                  <Tooltip formatter={(v: any) => [formatNumber(v), 'SKU数']} />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </CollapsibleSection>

            <CollapsibleSection title="各阶段产品列表" subtitle="按上市日期排序">
              <FilterableTable
                data={products}
                filterKey="lifecycle_stage"
                filterLabel="全部阶段"
                sortOptions={[
                  { key: 'launch_date', label: '上市日期' },
                  { key: 'sku_code', label: 'SKU编码' },
                  { key: 'lifecycle_stage', label: '阶段' },
                ]}
                defaultSort="launch_date"
                defaultOrder="desc"
                columns={[
                  { key: 'sku_code', label: 'SKU编码' },
                  { key: 'sku_name', label: 'SKU名称' },
                  { key: 'launch_date', label: '上市日期', render: (r) => (r.launch_date || '').toString().substring(0, 10) },
                  { key: 'lifecycle_stage', label: '阶段', align: 'center', render: (r) => {
                    const colors: Record<string, string> = { '爬坡': 'text-blue-600', '成熟': 'text-green-600', '衰退': 'text-yellow-600', '淘汰': 'text-red-600' }
                    return <span className={`font-bold ${colors[r.lifecycle_stage] || ''}`}>{r.lifecycle_stage}</span>
                  }},
                  { key: 'survival_status', label: '存活状态', align: 'center' },
                  { key: 'first_week_report_date', label: '首周战报', render: (r) => r.first_week_report_date ? (r.first_week_report_date as string).substring(0, 10) : '-' },
                  { key: 'day90_report_date', label: '90天判定', render: (r) => r.day90_report_date ? (r.day90_report_date as string).substring(0, 10) : '-' },
                  { key: 'action', label: '操作', align: 'center', render: (r) => (
                    <button onClick={() => trackMutation.mutate(r.id)} className="rounded bg-primary px-2 py-0.5 text-xs text-primary-foreground">追踪</button>
                  )},
                ]}
              />
            </CollapsibleSection>
          </div>
        </>
      )}

      {tab === 'reviews' && (
        <>
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            <MetricCard title="评价总数" value={totalReviews} format="number" description="所有来源评价" />
            <MetricCard title="平均评分" value={avgRating} format="number" description="满分5分" status={avgRating >= 4 ? 'good' : avgRating >= 3 ? 'warn' : 'bad'} />
            <MetricCard title="好评率" value={positiveRate} format="percent" description="正面评价占比" status={positiveRate >= 80 ? 'good' : positiveRate >= 60 ? 'warn' : 'bad'} />
            <MetricCard title="差评数" value={Number(overview.negative || 0)} format="number" description="负面评价数" status="bad" />
          </div>

          <div className="grid gap-4 lg:grid-cols-2">
            <CollapsibleSection title="评价归因分布" subtitle="NLP自动分类">
              <ResponsiveContainer width="100%" height={250}>
                <PieChart>
                  <Pie data={categoryData} cx="50%" cy="50%" outerRadius={70} dataKey="value"
                    labelLine={false} label={({ name, value }: any) => <tspan fontSize={11}>{`${name}: ${value}`}</tspan>}>
                    {categoryData.map((_, i) => <Cell key={i} fill={['#ef4444', '#3b82f6', '#22c55e', '#eab308', '#a855f7'][i]} />)}
                  </Pie>
                  <Tooltip formatter={(v: any) => [formatNumber(v), '条']} />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </CollapsibleSection>

            <CollapsibleSection title="评价趋势" subtitle="按日期统计">
              <ResponsiveContainer width="100%" height={250}>
                <BarChart data={reviews.slice(0, 30).reverse().map((r: any) => ({
                  date: (r.review_date || '').substring(0, 10),
                  rating: Number(r.rating || 0),
                }))}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="date" fontSize={10} />
                  <YAxis domain={[0, 5]} />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="rating" fill="#3b82f6" name="评分" />
                </BarChart>
              </ResponsiveContainer>
            </CollapsibleSection>
          </div>

          <CollapsibleSection title={`评价明细 (${reviews.length})`} subtitle="按日期降序">
            <FilterableTable
              data={reviews}
              filterKey="nlp_category"
              filterLabel="全部分类"
              sortOptions={[
                { key: 'review_date', label: '评价日期' },
                { key: 'rating', label: '评分' },
              ]}
              defaultSort="review_date"
              defaultOrder="desc"
              searchKeys={['content', 'store_name', 'sku_name']}
              searchPlaceholder="搜索评价内容..."
              columns={[
                { key: 'review_date', label: '日期', render: (r) => (r.review_date || '').toString().substring(0, 10) },
                { key: 'review_source', label: '来源' },
                { key: 'store_name', label: '门店' },
                { key: 'sku_name', label: 'SKU' },
                { key: 'rating', label: '评分', align: 'center', render: (r) => {
                  const colors: Record<number, string> = { 1: 'text-red-600', 2: 'text-red-500', 3: 'text-yellow-600', 4: 'text-blue-600', 5: 'text-green-600' }
                  return <span className={`font-bold ${colors[r.rating] || ''}`}>{r.rating}★</span>
                }},
                { key: 'nlp_category', label: '归因', align: 'center' },
                { key: 'nlp_sentiment', label: '情感', align: 'center', render: (r) => {
                  const colors: Record<string, string> = { '正面': 'text-green-600', '负面': 'text-red-600', '中性': 'text-yellow-600' }
                  return <span className={colors[r.nlp_sentiment] || ''}>{r.nlp_sentiment}</span>
                }},
                { key: 'content', label: '评价内容' },
              ]}
            />
          </CollapsibleSection>
        </>
      )}
    </div>
  )
}