import { useQuery } from '@tanstack/react-query'
import { useParams, useNavigate } from 'react-router-dom'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Cell, RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, PieChart, Pie, Legend } from 'recharts'
import api from '@/lib/api'
import { MetricCard } from '@/components/MetricCard'
import { Badge } from '@/components/Badge'
import { FilterableTable } from '@/components/FilterableTable'
import { LoadingSpinner } from '@/components/LoadingSpinner'
import { formatCurrency, formatPercent, formatNumber, cn } from '@/lib/utils'
import { ArrowLeft } from 'lucide-react'
import { MonthPicker } from '@/components/MonthPicker'
import { useState } from 'react'

const SCORE_DIMENSIONS = [
  { key: 'score_revenue', label: '营收规模', max: 20 },
  { key: 'score_cost', label: '成本控制', max: 20 },
  { key: 'score_margin', label: '毛利率', max: 15 },
  { key: 'score_risk', label: '风险等级', max: 10 },
  { key: 'score_repeat', label: '复购率', max: 10 },
  { key: 'score_member', label: '会员占比', max: 10 },
  { key: 'score_task', label: '任务完成', max: 10 },
  { key: 'score_bill', label: '客单价', max: 5 },
]

type DetailTab = 'overview' | 'meal' | 'category' | 'cost' | 'member' | 'anomaly' | 'tasks'

const TABS: { key: DetailTab; label: string }[] = [
  { key: 'overview', label: '概览' },
  { key: 'meal', label: '餐段分析' },
  { key: 'category', label: '品类结构' },
  { key: 'cost', label: '成本分析' },
  { key: 'member', label: '会员分析' },
  { key: 'anomaly', label: '异常账单' },
  { key: 'tasks', label: '任务列表' },
]

export function StoreDetailPage() {
  const { code } = useParams()
  const navigate = useNavigate()
  const [tab, setTab] = useState<DetailTab>('overview')
  const [month, setMonth] = useState('2026-04')

  const { data: storeData } = useQuery({
    queryKey: ['store', code, month],
    queryFn: () => api.get(`/stores/${code}`, { params: { month } }),
  })

  const { data: healthData } = useQuery({
    queryKey: ['store-health', code, month],
    queryFn: () => api.get('/situational-awareness/health-score', { params: { month } }),
  })

  const { data: dailyData } = useQuery({
    queryKey: ['store', code, 'daily', month],
    queryFn: () => api.get(`/stores/${code}/daily`, { params: { month } }),
  })

  const { data: tasksData } = useQuery({
    queryKey: ['store', code, 'tasks'],
    queryFn: () => api.get('/tasks', { params: { store_code: code, month, page_size: 50 } }),
    enabled: tab === 'tasks',
  })

  const { data: mealData } = useQuery({
    queryKey: ['store', code, 'meal-period', month],
    queryFn: () => api.get(`/stores/${code}/meal-period`, { params: { month } }),
    enabled: tab === 'meal',
  })

  const { data: catData } = useQuery({
    queryKey: ['store', code, 'category-mix', month],
    queryFn: () => api.get(`/stores/${code}/category-mix`, { params: { month } }),
    enabled: tab === 'category',
  })

  const { data: costData } = useQuery({
    queryKey: ['store', code, 'cost', month],
    queryFn: () => api.get(`/stores/${code}/cost`, { params: { month } }),
    enabled: tab === 'cost',
  })

  const { data: memberData } = useQuery({
    queryKey: ['store', code, 'member', month],
    queryFn: () => api.get(`/stores/${code}/member`, { params: { month } }),
    enabled: tab === 'member',
  })

  const { data: anomalyData } = useQuery({
    queryKey: ['store', code, 'anomalies', month],
    queryFn: () => api.get(`/stores/${code}/anomalies`, { params: { month, page_size: 200 } }),
    enabled: tab === 'anomaly',
  })

  const sd = (storeData as any)?.data
  const daily = ((dailyData as any)?.data) || []
  const healthRows = ((healthData as any)?.data) || []
  const health = healthRows.find((r: any) => r.store_code === code)
  const tasks = ((tasksData as any)?.data) || []
  const mealRows = ((mealData as any)?.data) || []
  const cat = (catData as any)?.data
  const cost = (costData as any)?.data
  const member = (memberData as any)?.data
  const anomalyRows = ((anomalyData as any)?.data) || []
  const anomalyTotal = (anomalyData as any)?.meta?.total || anomalyRows.length

  if (!sd) return <LoadingSpinner text="加载门店详情..." />
  const sc = sd.scorecard
  const action = sd.action
  const risk = sd.risk

  const riskDesc: Record<string, { color: string; desc: string }> = {
    '绿色': { color: 'text-green-600 bg-green-50 border-green-200', desc: '各项指标健康，经营状态良好，维持现有运营策略即可。' },
    '黄色': { color: 'text-yellow-600 bg-yellow-50 border-yellow-200', desc: '存在单项指标偏差，需关注并针对性改善，避免风险升级。' },
    '红色': { color: 'text-red-600 bg-red-50 border-red-200', desc: '多项指标异常，经营风险较高，需立即介入并制定整改计划。' },
  }

  const quadrantDesc: Record<string, string> = {
    '明星门店': '高营收高毛利，是公司的核心利润来源。应总结其成功经验并推广至其他门店。',
    '现金牛门店': '高营收但毛利偏低，通过成本优化有较大利润提升空间。',
    '潜力门店': '营收偏低但毛利较好，具备增长潜力，需提升客流和营收规模。',
    '问题门店': '营收和毛利均偏低，需全面诊断并考虑调整经营策略或选址。',
  }

  const riskInfo = risk?.risk_level ? riskDesc[risk.risk_level] : null
  const quadrant = action?.management_quadrant || ''
  const quadrantInfo = quadrantDesc[quadrant]

  // 公司均值
  const companyAvg = { daily_rev: 20144, bill: 36.8, discount: 20.5, margin: 71.5, member: 15.9, repeat: 37.0, delivery: 36.1, combo: 20.6, items: 4.05 }

  // 偏差项明细
  const deviations: { label: string; store: number; company: number; unit: string; good: 'high' | 'low' }[] = [
    { label: '日均营收', store: Number(risk?.avg_daily_received) || 0, company: companyAvg.daily_rev, unit: '元', good: 'high' },
    { label: '客单价', store: Number(risk?.avg_bill_value) || 0, company: companyAvg.bill, unit: '元', good: 'high' },
    { label: '优惠率', store: Number(risk?.discount_rate_pct) || 0, company: companyAvg.discount, unit: '%', good: 'low' },
    { label: '毛利率', store: Number(risk?.theoretical_margin_pct) || 0, company: companyAvg.margin, unit: '%', good: 'high' },
    { label: '会员占比', store: Number(risk?.member_bill_share_pct) || 0, company: companyAvg.member, unit: '%', good: 'high' },
    { label: '复购率', store: Number(action?.repeat_rate_pct) || 0, company: companyAvg.repeat, unit: '%', good: 'high' },
    { label: '外卖占比', store: Number(action?.delivery_bill_share_pct) || 0, company: companyAvg.delivery, unit: '%', good: 'low' },
    { label: '成本差异率', store: Number(action?.variance_to_theoretical_pct) || 0, company: 20, unit: '%', good: 'low' },
  ]
  const problemDeviations = deviations.filter(d => {
    const diff = d.store - d.company
    return d.good === 'high' ? diff < 0 : diff > 0
  })

  return (
    <div className="space-y-4">
      <button onClick={() => navigate(-1)} className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
        <ArrowLeft size={16} /> 返回
      </button>

      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <h1 className="text-xl font-bold">{sc.store_name}</h1>
          {health && (
            <>
              <span className={cn('text-lg font-bold', Number(health.health_score) >= 75 ? 'text-green-600' : Number(health.health_score) >= 55 ? 'text-yellow-600' : 'text-red-600')}>
                {health.health_score}
              </span>
              <span className={cn('inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium',
                health.health_status === '健康' ? 'bg-green-100 text-green-700 border-green-300' :
                health.health_status === '亚健康' ? 'bg-yellow-100 text-yellow-700 border-yellow-300' :
                'bg-red-100 text-red-700 border-red-300')
              }>{health.health_status}</span>
            </>
          )}
          {risk?.risk_level && <Badge type="risk" text={risk.risk_level} />}
          {quadrant && <span className="rounded-md bg-muted px-2 py-0.5 text-xs">{quadrant}</span>}
        </div>
        <MonthPicker month={month} onChange={setMonth} />
      </div>

      {/* 核心指标 */}
      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
        <MetricCard title="实收" value={sc.received} format="currency" />
        <MetricCard title="账单数" value={sc.bill_count} format="number" />
        <MetricCard title="客单价" value={sc.avg_bill_value} format="currency" />
        <MetricCard title="优惠率" value={sc.discount_rate_pct} format="percent" />
        <MetricCard title="理论毛利率" value={sc.theoretical_margin_pct} format="percent" />
        <MetricCard title="会员占比" value={sc.member_bill_share_pct} format="percent" />
      </div>

      {/* 风险与经营状态说明 */}
      <div className="grid gap-3 md:grid-cols-2">
        {riskInfo && (
          <div className={`rounded-lg border p-3 ${riskInfo.color}`}>
            <div className="flex items-center gap-2">
              <span className="font-bold">风险等级：{risk.risk_level}</span>
              {action?.problem_combination && <span className="text-xs opacity-80">— {action.problem_combination}</span>}
            </div>
            <p className="mt-1 text-sm opacity-90">{riskInfo.desc}</p>
            {problemDeviations.length > 0 && (
              <div className="mt-2 space-y-1 border-t border-current/20 pt-2">
                <p className="text-xs font-medium opacity-80">偏差指标明细（vs 公司均值）：</p>
                {problemDeviations.map(d => {
                  const diff = d.store - d.company
                  const diffStr = diff > 0 ? `+${diff.toFixed(1)}${d.unit}` : `${diff.toFixed(1)}${d.unit}`
                  return (
                    <div key={d.label} className="flex items-center justify-between text-xs">
                      <span className="opacity-80">{d.label}</span>
                      <span className="font-medium">{d.store.toFixed(1)}{d.unit} <span className="opacity-60">vs {d.company}{d.unit}</span> <span className="font-bold">{diffStr}</span></span>
                    </div>
                  )
                })}
              </div>
            )}
          </div>
        )}
        {quadrantInfo && (
          <div className="rounded-lg border p-3 bg-blue-50 border-blue-200 text-blue-700">
            <div className="flex items-center gap-2">
              <span className="font-bold">经营象限：{quadrant}</span>
              {action?.scale_tier && <span className="text-xs opacity-80">— {action.scale_tier}</span>}
            </div>
            <p className="mt-1 text-sm opacity-90">{quadrantInfo}</p>
            <div className="mt-2 space-y-1 border-t border-blue-200/50 pt-2">
              <p className="text-xs font-medium opacity-80">象限定位依据：</p>
              <div className="flex items-center justify-between text-xs">
                <span className="opacity-80">日均营收</span>
                <span className="font-medium">{Number(risk?.avg_daily_received || 0).toFixed(0)}元 <span className="opacity-60">vs 中位数 18642元</span></span>
              </div>
              <div className="flex items-center justify-between text-xs">
                <span className="opacity-80">毛利率</span>
                <span className="font-medium">{Number(risk?.theoretical_margin_pct || 0).toFixed(1)}% <span className="opacity-60">vs 中位数 70.0%</span></span>
              </div>
              {action?.benchmark_score && (
                <div className="flex items-center justify-between text-xs">
                  <span className="opacity-80">综合基准分</span>
                  <span className="font-medium">{Number(action.benchmark_score).toFixed(1)}分</span>
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* 行动建议 */}
      {action?.action_priority && (
        <div className="rounded-lg border p-3 bg-muted/50">
          <div className="flex flex-wrap items-center gap-3">
            <span className="font-bold text-sm">行动优先级：{action.action_priority}</span>
            {action.problem_combination && <span className="text-sm text-muted-foreground">问题：{action.problem_combination}</span>}
            {action.business_type && <span className="text-xs rounded bg-muted px-2 py-0.5">{action.business_type}</span>}
            {action?.variance_level && (
              <span className={`text-xs rounded px-2 py-0.5 ${action.variance_level.includes('红色') ? 'bg-red-100 text-red-700' : action.variance_level.includes('黄色') ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'}`}>
                成本差异：{action.variance_to_theoretical_pct}% ({action.variance_level})
              </span>
            )}
          </div>
        </div>
      )}

      {/* Tab bar */}
      <div className="flex gap-1 border-b">
        {TABS.map(t => (
          <button key={t.key} onClick={() => setTab(t.key)} className={`rounded-t-md border-b-2 px-3 py-2 text-sm font-medium transition-colors ${tab === t.key ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'}`}>
            {t.label}
          </button>
        ))}
      </div>

      {/* 概览 Tab */}
      {tab === 'overview' && (
        <div className="space-y-4">
          {health && (
            <div className="rounded-lg border bg-card p-4">
              <h2 className="mb-3 text-sm font-bold">健康度评分维度</h2>
              <div className="grid gap-4 md:grid-cols-2">
                <ResponsiveContainer width="100%" height={250}>
                  <RadarChart data={SCORE_DIMENSIONS.map(d => ({ dimension: d.label, score: Math.round(Number(health[d.key] || 0) / d.max * 100), fullMark: 100 }))}>
                    <PolarGrid />
                    <PolarAngleAxis dataKey="dimension" tick={{ fontSize: 10 }} />
                    <PolarRadiusAxis angle={90} domain={[0, 100]} tick={{ fontSize: 8 }} />
                    <Radar dataKey="score" name="得分" stroke={Number(health.health_score) >= 75 ? '#22c55e' : Number(health.health_score) >= 55 ? '#eab308' : '#ef4444'} fill={Number(health.health_score) >= 75 ? '#22c55e' : Number(health.health_score) >= 55 ? '#eab308' : '#ef4444'} fillOpacity={0.3} />
                    <Tooltip formatter={(v: any) => [v, '得分']} />
                  </RadarChart>
                </ResponsiveContainer>
                <div className="space-y-2">
                  {SCORE_DIMENSIONS.map(d => {
                    const score = Number(health[d.key] || 0)
                    const pct = (score / d.max) * 100
                    const color = pct >= 75 ? '#22c55e' : pct >= 50 ? '#eab308' : '#ef4444'
                    return (
                      <div key={d.key}>
                        <div className="flex items-center justify-between text-xs">
                          <span className="font-medium">{d.label}</span>
                          <span className="text-muted-foreground">{score.toFixed(1)} / {d.max}</span>
                        </div>
                        <div className="mt-0.5 h-2 overflow-hidden rounded-full bg-muted">
                          <div className="h-full rounded-full" style={{ width: `${pct}%`, backgroundColor: color }} />
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>
            </div>
          )}

          <div className="rounded-lg border bg-card p-4">
            <h2 className="mb-3 text-sm font-bold">日度实收趋势</h2>
            <ResponsiveContainer width="100%" height={250}>
              <LineChart data={daily}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="business_date" tickFormatter={(v) => v?.substring(5, 10)} tick={{ fontSize: 11 }} />
                <YAxis tick={{ fontSize: 11 }} />
                <Tooltip labelFormatter={(v) => v?.substring(0, 10)} formatter={(v: any) => formatCurrency(v)} />
                <Line type="monotone" dataKey="received" stroke="#3b82f6" name="实收" dot={false} strokeWidth={2} />
                <Line type="monotone" dataKey="avg_bill_value" stroke="#eab308" name="客单价" />
              </LineChart>
            </ResponsiveContainer>
          </div>

          {sd.platform && (
            <div className="rounded-lg border bg-card p-4">
              <h2 className="mb-3 text-sm font-bold">平台经济性</h2>
              <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
                <MetricCard title="美团实收" value={sd.platform.meituan_received} format="currency" />
                <MetricCard title="饿了么实收" value={sd.platform.eleme_received} format="currency" />
                <MetricCard title="抖音实收" value={sd.platform.douyin_received} format="currency" />
                <MetricCard title="平台加权成本率" value={sd.platform.weighted_cost_rate_pct} format="percent" />
              </div>
            </div>
          )}
        </div>
      )}

      {/* 餐段分析 Tab */}
      {tab === 'meal' && (
        <div className="rounded-lg border bg-card p-4">
          <h2 className="mb-3 text-sm font-bold">餐段分析</h2>
          {mealRows.length === 0 ? <p className="text-sm text-muted-foreground">暂无数据</p> : (
            <>
              <ResponsiveContainer width="100%" height={200}>
                <BarChart data={mealRows}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="meal_period" tick={{ fontSize: 11 }} />
                  <YAxis tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
                  <Tooltip formatter={(v: any, n: string) => n === '实收' ? formatCurrency(v) : n === '平均单价' ? formatCurrency(v) : v} />
                  <Legend wrapperStyle={{ fontSize: 11 }} />
                  <Bar dataKey="received" name="实收" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="avg_bill" name="平均单价" fill="#eab308" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
              <div className="mt-3">
                <FilterableTable
                  data={mealRows}
                  sortOptions={[
                    { key: 'received', label: '实收' },
                    { key: 'bill_count', label: '账单数' },
                    { key: 'avg_bill', label: '平均单价' },
                  ]}
                  defaultSort="received"
                  defaultOrder="desc"
                  columns={[
                    { key: 'meal_period', label: '餐段' },
                    { key: 'bill_count', label: '账单数', align: 'right', render: (r) => formatNumber(r.bill_count) },
                    { key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
                    { key: 'avg_bill', label: '平均单价', align: 'right', render: (r) => formatCurrency(r.avg_bill) },
                    { key: 'network_avg_bill', label: '全网均价', align: 'right', render: (r) => formatCurrency(r.network_avg_bill) },
                    { key: 'vs_network_pct', label: 'vs全网', align: 'right', render: (r) => <span className={Number(r.vs_network_pct) < 0 ? 'text-red-600' : 'text-green-600'}>{Number(r.vs_network_pct).toFixed(1)}%</span> },
                  ]}
                />
              </div>
            </>
          )}
        </div>
      )}

      {/* 品类结构 Tab */}
      {tab === 'category' && (
        <div className="rounded-lg border bg-card p-4">
          <h2 className="mb-3 text-sm font-bold">品类结构</h2>
          {!cat?.store ? <p className="text-sm text-muted-foreground">暂无数据</p> : (
            (() => {
              const s = cat.store
              const c = cat.company
              const catData = [
                { name: '兰州拉面', store: Number(s.lanzhou_noodle || 0), company: Number(c.total_noodle || 0) },
                { name: '西式简餐', store: Number(s.western_staple || 0), company: Number(c.total_western || 0) },
                { name: '外卖套餐', store: Number(s.delivery_package || 0), company: Number(c.total_delivery || 0) },
                { name: '冷菜', store: Number(s.cold_dishes || 0), company: Number(c.total_cold || 0) },
                { name: '丝路美食', store: Number(s.silk_road_food || 0), company: Number(c.total_silk || 0) },
              ]
              const totalStore = catData.reduce((sum, d) => sum + d.store, 0)
              const totalCompany = catData.reduce((sum, d) => sum + d.company, 0)
              const pieData = catData.map(d => ({ name: d.name, value: totalStore > 0 ? Math.round(d.store / totalStore * 1000) / 10 : 0, fill: ['#3b82f6', '#eab308', '#22c55e', '#a855f7', '#f97316'][catData.indexOf(d)] }))
              return (
                <>
                  <div className="grid gap-4 lg:grid-cols-2">
                    <div>
                      <p className="mb-2 text-xs font-medium text-muted-foreground">门店品类占比</p>
                      <ResponsiveContainer width="100%" height={220}>
                        <PieChart>
                          <Pie data={pieData} cx="50%" cy="50%" outerRadius={60} dataKey="value" nameKey="name" labelLine={false} label={({ name, value }: any) => <tspan fontSize={11}>{`${name} ${value}%`}</tspan>}>
                            {pieData.map((d, i) => <Cell key={i} fill={d.fill} />)}
                          </Pie>
                          <Tooltip formatter={(v: any) => [`${v}%`, '占比']} />
                          <Legend wrapperStyle={{ fontSize: 10 }} />
                        </PieChart>
                      </ResponsiveContainer>
                    </div>
                    <div>
                      <p className="mb-2 text-xs font-medium text-muted-foreground">vs 公司整体占比</p>
                      <ResponsiveContainer width="100%" height={220}>
                        <BarChart data={catData.map(d => ({ name: d.name, '门店占比': totalStore > 0 ? Math.round(d.store / totalStore * 1000) / 10 : 0, '公司占比': totalCompany > 0 ? Math.round(d.company / totalCompany * 1000) / 10 : 0 }))}>
                          <CartesianGrid strokeDasharray="3 3" />
                          <XAxis dataKey="name" tick={{ fontSize: 10 }} />
                          <YAxis unit="%" tick={{ fontSize: 10 }} />
                          <Tooltip formatter={(v: any) => [`${v}%`, '占比']} />
                          <Legend wrapperStyle={{ fontSize: 10 }} />
                          <Bar dataKey="门店占比" fill="#3b82f6" />
                          <Bar dataKey="公司占比" fill="#e2e8f0" />
                        </BarChart>
                      </ResponsiveContainer>
                    </div>
                  </div>
                  <div className="mt-3 grid grid-cols-2 gap-3 md:grid-cols-4">
                    <MetricCard title="主力品类" value={s.top_category || '-'} format="text" />
                    <MetricCard title="主力品类占比" value={s.top_category_share_pct} format="percent" />
                    <MetricCard title="面食占比" value={s.noodle_share_pct} format="percent" />
                    <MetricCard title="外卖占比" value={s.delivery_package_share_pct} format="percent" />
                  </div>
                </>
              )
            })()
          )}
        </div>
      )}

      {/* 成本分析 Tab */}
      {tab === 'cost' && (
        <div className="space-y-4">
          {cost?.cost ? (
            <>
              <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
                <MetricCard title="理论成本率" value={cost.cost.theoretical_cost_rate_pct} format="percent" />
                <MetricCard title="实际成本率" value={cost.cost.actual_food_cost_rate_pct} format="percent" />
                <MetricCard title="差异率" value={cost.cost.variance_to_theoretical_pct} format="percent" />
                <MetricCard title="差异等级" value={cost.cost.variance_level} format="text" />
              </div>
              <div className="rounded-lg border bg-card p-4">
                <h2 className="mb-3 text-sm font-bold">原料分类成本对标</h2>
                {cost.categories?.length > 0 ? (
                  <FilterableTable
                    data={cost.categories}
                    filterKey="category_name"
                    filterLabel="全部分类"
                    sortOptions={[
                      { key: 'consumption_amount', label: '消耗金额' },
                      { key: 'actual_cost_rate_pct', label: '实际占比' },
                      { key: 'benchmark_rate_pct', label: '公司基准' },
                      { key: 'variance_pct', label: '差异' },
                    ]}
                    defaultSort="consumption_amount"
                    columns={[
                      { key: 'category_name', label: '原料分类' },
                      { key: 'consumption_amount', label: '消耗金额', align: 'right', render: (r) => formatCurrency(r.consumption_amount) },
                      { key: 'actual_cost_rate_pct', label: '实际占比', align: 'right', render: (r) => formatPercent(r.actual_cost_rate_pct) },
                      { key: 'benchmark_rate_pct', label: '公司基准', align: 'right', render: (r) => formatPercent(r.benchmark_rate_pct) },
                      { key: 'variance_pct', label: '差异', align: 'right', render: (r) => <span className={Number(r.variance_pct) > 2 ? 'text-red-600' : 'text-green-600'}>{Number(r.variance_pct).toFixed(1)}%</span> },
                    ]}
                  />
                ) : <p className="text-sm text-muted-foreground">暂无分类数据</p>}
              </div>
            </>
          ) : <p className="text-sm text-muted-foreground">暂无成本数据</p>}
        </div>
      )}

      {/* 会员分析 Tab */}
      {tab === 'member' && (
        <div className="space-y-4">
          {member?.opportunity ? (
            <>
              <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
                <MetricCard title="会员占比" value={member.opportunity.member_share_pct} format="percent" />
                <MetricCard title="公司均值" value={member.opportunity.company_member_share_pct} format="percent" />
                <MetricCard title="复购率" value={member.repeat?.repeat_rate_pct} format="percent" />
                <MetricCard title="复购收入占比" value={member.repeat?.repeat_revenue_share_pct} format="percent" />
              </div>
              {member.monthly && (
                <div className="rounded-lg border bg-card p-4">
                  <h2 className="mb-3 text-sm font-bold">会员月度活跃</h2>
                  <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
                    <MetricCard title="活跃会员数" value={member.monthly.member_count} format="number" />
                    <MetricCard title="总订单数" value={member.monthly.total_orders} format="number" />
                    <MetricCard title="人均订单" value={member.monthly.avg_orders ? Number(member.monthly.avg_orders).toFixed(1) : '-'} format="text" />
                    <MetricCard title="人均消费" value={member.monthly.avg_received} format="currency" />
                  </div>
                </div>
              )}
              {member.opportunity.conversion_bill_scenario && (
                <div className="rounded-lg border bg-card p-4">
                  <h2 className="mb-2 text-sm font-bold">提升机会</h2>
                  <p className="text-sm text-muted-foreground">{member.opportunity.conversion_bill_scenario}</p>
                  <p className="mt-1 text-sm text-muted-foreground">{member.opportunity.revenue_uplift_scenario}</p>
                </div>
              )}
            </>
          ) : <p className="text-sm text-muted-foreground">暂无会员数据</p>}
        </div>
      )}

      {/* 异常账单 Tab */}
      {tab === 'anomaly' && (
        <div className="rounded-lg border bg-card p-4">
          <h2 className="mb-3 text-sm font-bold">异常账单明细 ({anomalyTotal})</h2>
          {anomalyRows.length === 0 ? <p className="text-sm text-muted-foreground">暂无异常账单</p> : (
            <FilterableTable
              data={anomalyRows}
              sortOptions={[
                { key: 'consumption', label: '消费额' },
                { key: 'discount_total', label: '优惠' },
                { key: 'received_total', label: '实收' },
              ]}
              defaultSort="consumption"
              defaultOrder="desc"
              columns={[
                { key: 'bill_no', label: '账单号' },
                { key: 'meal_period', label: '餐段' },
                { key: 'consumption', label: '消费额', align: 'right', render: (r) => formatCurrency(r.consumption) },
                { key: 'discount_total', label: '优惠', align: 'right', render: (r) => formatCurrency(r.discount_total) },
                { key: 'received_total', label: '实收', align: 'right', render: (r) => formatCurrency(r.received_total) },
                { key: 'anomaly_reason', label: '异常原因' },
                { key: 'closed_at', label: '结账时间', render: (r) => r.closed_at?.substring(0, 16) },
              ]}
            />
          )}
        </div>
      )}

      {/* 任务列表 Tab */}
      {tab === 'tasks' && (
        <div className="rounded-lg border bg-card p-4">
          <h2 className="mb-3 text-sm font-bold">门店任务 ({tasks.length})</h2>
          <FilterableTable
            data={tasks}
            sortOptions={[
              { key: 'priority', label: '优先级' },
              { key: 'deadline', label: '截止日' },
              { key: 'problem_indicator', label: '问题指标' },
            ]}
            defaultSort="priority"
            defaultOrder="asc"
            filterKey="status"
            filterLabel="全部状态"
            onRowClick={(r) => navigate(`/tasks/${r.task_id}`)}
            columns={[
              { key: 'problem_indicator', label: '问题指标' },
              { key: 'priority', label: '优先级', render: (r) => <Badge type="priority" text={r.priority} /> },
              { key: 'action_required', label: '行动要求', render: (r) => <span className="text-xs">{r.action_required}</span> },
              { key: 'status', label: '状态', render: (r) => <Badge type="status" text={r.status} /> },
              { key: 'deadline', label: '截止日', render: (r) => r.deadline?.substring(0, 10) },
            ]}
          />
        </div>
      )}
    </div>
  )
}
