import { useQuery } from '@tanstack/react-query'
import { useNavigate } from 'react-router-dom'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, Legend, ScatterChart, Scatter, ZAxis, ReferenceLine, ComposedChart, Area, AreaChart, RadialBarChart, RadialBar } 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 { CollapsibleSection } from '@/components/CollapsibleSection'
import { MonthPicker } from '@/components/MonthPicker'
import { formatNumber, formatCurrency, formatPercent } from '@/lib/utils'
import { useState } from 'react'
import { TrendingUp, TrendingDown, Minus, AlertTriangle } from 'lucide-react'

const RISK_COLORS = { '红色': '#ef4444', '黄色': '#eab308', '绿色': '#22c55e' }

export function DashboardPage() {
  const navigate = useNavigate()
  const [month, setMonth] = useState('2026-04')

  const { data: overview, isLoading: odLoading } = useQuery({
    queryKey: ['overview', month],
    queryFn: () => api.get('/overview', { params: { month } }),
  })

  const { data: daily, isLoading: dailyLoading } = useQuery({
    queryKey: ['overview/daily', month],
    queryFn: () => api.get('/overview/daily', { params: { month } }),
  })

  const { data: riskData, isLoading: riskLoading } = useQuery({
    queryKey: ['stores/risk', month],
    queryFn: () => api.get('/stores/risk', { params: { month } }),
  })

  const { data: priorityData, isLoading: priorityLoading } = useQuery({
    queryKey: ['stores/priority', month],
    queryFn: () => api.get('/stores/priority', { params: { month } }),
  })

  const { data: loopHealth, isLoading: loopLoading } = useQuery({
    queryKey: ['loop-health'],
    queryFn: () => api.get('/tasks/loop-health'),
  })

  const { data: quadrantData } = useQuery({
    queryKey: ['stores/quadrant', month],
    queryFn: () => api.get('/stores/quadrant', { params: { month } }),
  })

  const { data: platformData } = useQuery({
    queryKey: ['platform/economics', month],
    queryFn: () => api.get('/platform/economics', { params: { month } }),
  })

  const { data: alertsData } = useQuery({
    queryKey: ['sa-alerts', month],
    queryFn: () => api.get('/situational-awareness/alerts', { params: { month } }),
  })

  const { data: expenseData } = useQuery({
    queryKey: ['store-expense/overview', month],
    queryFn: () => api.get('/store-expense/overview', { params: { month } }),
  })

  const { data: yoyData } = useQuery({
    queryKey: ['overview/yoy', month],
    queryFn: () => api.get('/overview/yoy', { params: { month } }),
  })

  const { data: momData } = useQuery({
    queryKey: ['overview/mom', month],
    queryFn: () => api.get('/overview/mom', { params: { month } }),
  })

  const { data: trendData } = useQuery({
    queryKey: ['overview/trend', month],
    queryFn: () => api.get('/overview/trend', { params: { month, months: 12 } }),
  })

  const { data: profitTrendData } = useQuery({
    queryKey: ['overview/profit-trend', month],
    queryFn: () => api.get('/overview/profit-trend', { params: { month, months: 6 } }),
  })

  const pageLoading = odLoading || dailyLoading || riskLoading || priorityLoading || loopLoading

  const od = (overview as any)?.data
  const ex = (expenseData as any)?.data
  const riskRows = (riskData as any)?.data || []
  const priorityRows = (priorityData as any)?.data || []
  const dailyRows = (daily as any)?.data || []
  const lh = (loopHealth as any)?.data
  const quadrantRows = (quadrantData as any)?.data || []
  const platformRows = (platformData as any)?.data || []
  const alerts = ((alertsData as any)?.data?.alerts || []) as any[]
  const alertSummary = (alertsData as any)?.data
  const yoy = (yoyData as any)?.data
  const mom = (momData as any)?.data
  const trendRows = ((trendData as any)?.data || []).map((r: any) => ({
    ...r,
    month: r.month?.substring(0, 10) || r.month,
  }))
  const profitTrendRows = ((profitTrendData as any)?.data || []).map((r: any) => ({
    ...r,
    report_month: r.report_month?.substring(0, 10) || r.report_month,
  }))

  const yoyData_ = yoy?.yoy
  const momData_ = mom?.mom
  const TrendIcon = ({ val }: { val: number | null }) => {
    if (val === null || val === undefined) return <Minus size={14} className="text-muted-foreground" />
    if (val > 0) return <TrendingUp size={14} className="text-green-600" />
    if (val < 0) return <TrendingDown size={14} className="text-red-600" />
    return <Minus size={14} className="text-muted-foreground" />
  }
  const fmtChange = (v: number | null) => v === null ? '-' : `${v > 0 ? '+' : ''}${v.toFixed(2)}%`

  const QUADRANT_COLORS: Record<string, string> = {
    '明星门店': '#22c55e', '稳健经营': '#3b82f6', '规模承压': '#eab308', '重点改善': '#ef4444', '高效潜力': '#a855f7',
  }

  const quadrantScatterData = quadrantRows.map((r: any) => ({
    name: r.store_name,
    x: Number(r.avg_daily_received || 0),
    y: Number(r.theoretical_margin_pct || 0),
    quadrant: r.management_quadrant,
    fill: QUADRANT_COLORS[r.management_quadrant] || '#999',
  }))

  const platformCostData = platformRows.slice(0, 15).map((r: any) => ({
    name: r.store_name?.substring(0, 6) || '',
    meituan: Number(r.meituan_cost_rate_pct || 0),
    eleme: Number(r.eleme_cost_rate_pct || 0),
    douyin: Number(r.douyin_cost_rate_pct || 0),
  }))

  const p0Stores = priorityRows.filter((s: any) => s.action_priority?.startsWith('P0'))
  const p1Stores = priorityRows.filter((s: any) => s.action_priority?.startsWith('P1'))
  const p0Received = p0Stores.reduce((s: number, r: any) => s + Number(r.received || 0), 0)
  const p1Received = p1Stores.reduce((s: number, r: any) => s + Number(r.received || 0), 0)
  const otherReceived = od?.received ? Number(od.received) - p0Received - p1Received : 0
  const waterfallData = [
    { name: 'P0门店', value: p0Received, fill: '#ef4444' },
    { name: 'P1门店', value: p1Received, fill: '#eab308' },
    { name: '其他门店', value: otherReceived, fill: '#22c55e' },
    { name: '合计', value: Number(od?.received || 0), fill: '#3b82f6' },
  ]

  const riskSummary = riskRows.reduce((acc: any, r: any) => {
    acc[r.risk_level] = (acc[r.risk_level] || 0) + 1
    return acc
  }, {})

  const totalStores = riskRows.length
  const riskPieData = Object.entries(riskSummary).map(([name, value]) => ({
    name,
    value: value as number,
    pct: totalStores > 0 ? Math.round((value as number / totalStores) * 100) : 0,
  }))

  const prioritySummary = priorityRows.reduce((acc: any, r: any) => {
    const key = r.action_priority
    acc[key] = (acc[key] || 0) + 1
    return acc
  }, {})

  const p0p1Stores = priorityRows.filter((s: any) => s.action_priority?.startsWith('P0') || s.action_priority?.startsWith('P1'))

  // 闭环健康度综合得分
  const loopScore = lh ? (
    (parseFloat(lh.task_generation_rate) +
    parseFloat(lh.store_execution_rate) +
    parseFloat(lh.weekly_check_rate) +
    parseFloat(lh.monthly_review_rate) +
    parseFloat(lh.practice_promotion_rate)) / 5
  ) : 0

  // 计算环比趋势：最后7天 vs 前7天
  const last7 = dailyRows.slice(-7)
  const prev7 = dailyRows.slice(-14, -7)
  const sumKey = (arr: any[], key: string) => arr.reduce((s, r) => s + Number(r[key] || 0), 0)
  const trend = (curr: number, prev: number) => prev > 0 ? Math.round((curr - prev) / prev * 1000) / 10 : 0

  const trendReceived = trend(sumKey(last7, 'received'), sumKey(prev7, 'received'))
  const trendBills = trend(sumKey(last7, 'bill_count'), sumKey(prev7, 'bill_count'))
  const trendAvgBill = trend(
    last7.length > 0 ? sumKey(last7, 'received') / sumKey(last7, 'bill_count') : 0,
    prev7.length > 0 ? sumKey(prev7, 'received') / sumKey(prev7, 'bill_count') : 0,
  )

  if (pageLoading) {
    return <LoadingSpinner text="加载驾驶舱数据..." />
  }

  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">全部门店经营总览 · {month}</p>
        </div>
        <div className="flex items-center gap-3">
          <MonthPicker month={month} onChange={setMonth} />
          <span className="rounded-md bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">{totalStores} 家门店</span>
        </div>
      </div>

      {/* 风险分布条 */}
      <div className="rounded-lg border bg-card p-3 shadow-sm">
        <div className="mb-2 flex items-center justify-between">
          <span className="text-xs font-medium text-muted-foreground">门店风险分布</span>
          <div className="flex gap-3 text-xs">
            <span className="flex items-center gap-1"><span className="h-2.5 w-2.5 rounded-full bg-red-500" /><span className="font-bold text-red-600">{riskSummary['红色'] || 0}</span> 红色 ({Math.round((riskSummary['红色'] || 0) / totalStores * 100)}%)</span>
            <span className="flex items-center gap-1"><span className="h-2.5 w-2.5 rounded-full bg-yellow-500" /><span className="font-bold text-yellow-600">{riskSummary['黄色'] || 0}</span> 黄色 ({Math.round((riskSummary['黄色'] || 0) / totalStores * 100)}%)</span>
            <span className="flex items-center gap-1"><span className="h-2.5 w-2.5 rounded-full bg-green-500" /><span className="font-bold text-green-600">{riskSummary['绿色'] || 0}</span> 绿色 ({Math.round((riskSummary['绿色'] || 0) / totalStores * 100)}%)</span>
          </div>
        </div>
        <div className="flex h-3 w-full overflow-hidden rounded-full">
          <div className="bg-red-500 transition-all" style={{ width: `${(riskSummary['红色'] || 0) / totalStores * 100}%` }} />
          <div className="bg-yellow-500 transition-all" style={{ width: `${(riskSummary['黄色'] || 0) / totalStores * 100}%` }} />
          <div className="bg-green-500 transition-all" style={{ width: `${(riskSummary['绿色'] || 0) / totalStores * 100}%` }} />
        </div>
      </div>

      {/* 态势感知预警 - 前置 */}
      {alerts.length > 0 && (
        <CollapsibleSection
          title="态势感知预警"
          subtitle="营收异动 · 成本异动 · 人力异动 · 平台依赖 · 任务逾期"
          defaultOpen={alertSummary?.red > 0}
          headerRight={
            <div className="flex gap-2">
              {alertSummary?.red > 0 && <span className="rounded-md bg-red-600 px-2 py-0.5 text-xs font-bold text-white">{alertSummary.red} 红色</span>}
              {alertSummary?.orange > 0 && <span className="rounded-md bg-orange-500 px-2 py-0.5 text-xs font-bold text-white">{alertSummary.orange} 橙色</span>}
              <span className="text-xs text-muted-foreground">共 {alertSummary?.total || 0} 条</span>
            </div>
          }
        >
          <div className="grid gap-2 md:grid-cols-2">
            {alerts.slice(0, 6).map((a, i) => (
              <div key={i} className={`flex items-start gap-2 rounded-md border p-2.5 ${a.level === 'red' ? 'border-red-300 bg-red-50/60 border-l-4 border-l-red-500' : a.level === 'orange' ? 'border-orange-300 bg-orange-50/60 border-l-4 border-l-orange-500' : 'border-yellow-300 bg-yellow-50/60 border-l-4 border-l-yellow-500'}`}>
                <AlertTriangle size={16} className={`mt-0.5 shrink-0 ${a.level === 'red' ? 'text-red-600' : a.level === 'orange' ? 'text-orange-600' : 'text-yellow-600'}`} />
                <div className="min-w-0 flex-1">
                  <p className="truncate text-xs font-medium">{a.title}</p>
                  <p className="mt-0.5 truncate text-xs text-muted-foreground">{a.detail}</p>
                </div>
              </div>
            ))}
          </div>
        </CollapsibleSection>
      )}

      {/* 经营指标 */}
      <CollapsibleSection title="经营指标" subtitle="营业收入、优惠、实收等核心经营数据">
        <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
          <MetricCard title="营业收入" value={od?.consumption} format="currency" description="全部门店消费金额合计" />
          <MetricCard title="优惠" value={od?.discount} format="currency" description="各类优惠扣减合计" />
          <MetricCard title="实收" value={od?.received} format="currency" trend={trendReceived} description="扣除优惠后的净收入" />
          <MetricCard title="账单数" value={od?.bill_count} format="number" trend={trendBills} description="全部门店累计的账单总数" />
          <MetricCard title="客单价" value={od?.avg_bill_value} format="currency" trend={trendAvgBill} description="实收 ÷ 账单数" />
          <MetricCard title="P0+P1门店" value={p0p1Stores.length} format="number" description="需重点整改的门店数" />
        </div>
      </CollapsibleSection>

      {/* 运营指标 */}
      <CollapsibleSection title="运营指标" subtitle="优惠率、毛利率、会员占比等运营比率">
        <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
          <MetricCard title="优惠率" value={od?.discount_rate_pct} format="percent" description="优惠总额占消费总额的比例，越高让利越大" />
          <MetricCard title="理论毛利率" value={od?.theoretical_margin_pct} format="percent" description="理论利润占实收的比例（按标准成本计算），反映定价与成本的关系" />
          <MetricCard title="会员占比" value={od?.member_share_pct} format="percent" description="会员消费金额占总实收的比例，反映会员运营效果" />
        </div>
      </CollapsibleSection>

      {/* 同比/环比对比 */}
      {(yoyData_ || momData_) && (
        <CollapsibleSection title="同比 / 环比对比" subtitle={`${month} 与去年同期、上月对比`}>
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            {[
              { label: '实收同比', yoy: yoyData_?.received_change_pct, mom: momData_?.received_change_pct },
              { label: '账单数同比', yoy: yoyData_?.bill_count_change_pct, mom: momData_?.bill_count_change_pct },
              { label: '客单价同比', yoy: yoyData_?.avg_bill_value_change_pct, mom: momData_?.avg_bill_value_change_pct },
              { label: '优惠率变化', yoy: yoyData_?.discount_rate_change, mom: momData_?.discount_rate_change },
            ].map((item) => (
              <div key={item.label} className="rounded-md border p-3">
                <p className="text-xs text-muted-foreground">{item.label}</p>
                <div className="mt-1 flex items-center gap-2">
                  <span className="text-xs text-muted-foreground">同比</span>
                  <TrendIcon val={item.yoy ?? null} />
                  <span className={`text-sm font-bold ${item.yoy === null ? 'text-muted-foreground' : item.yoy > 0 ? 'text-green-600' : item.yoy < 0 ? 'text-red-600' : 'text-muted-foreground'}`}>
                    {fmtChange(item.yoy ?? null)}
                  </span>
                </div>
                <div className="mt-1 flex items-center gap-2">
                  <span className="text-xs text-muted-foreground">环比</span>
                  <TrendIcon val={item.mom ?? null} />
                  <span className={`text-sm font-bold ${item.mom === null ? 'text-muted-foreground' : item.mom > 0 ? 'text-green-600' : item.mom < 0 ? 'text-red-600' : 'text-muted-foreground'}`}>
                    {fmtChange(item.mom ?? null)}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </CollapsibleSection>
      )}

      {/* 利润与成本 */}
      {ex && (
        <CollapsibleSection title="利润与成本" subtitle="食材成本、经营费用、门店贡献利润估算等财务指标">
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            <MetricCard title="理论贡献利润" value={ex.theoretical_net_profit} format="currency" status="good" description={`贡献率 ${formatPercent(ex.theoretical_net_margin_pct)} · 公式：实收 - 理论食材成本 - 经营费用（仅费用已匹配门店）。建议值：贡献率 ≥ 15% 为健康`} />
            <MetricCard title="实际贡献利润" value={ex.actual_net_profit} format="currency" status={Number(ex.actual_net_margin_pct) < 5 ? 'bad' : Number(ex.actual_net_margin_pct) < 10 ? 'warn' : 'good'} description={`贡献率 ${formatPercent(ex.actual_net_margin_pct)} · 公式：实收 - 实际食材成本 - 经营费用（仅费用已匹配门店）。盈利 ${ex.profitable_stores}家 / 亏损 ${ex.loss_stores}家。建议值：贡献率 ≥ 10% 为优秀，5-10% 为合格，< 5% 需整改`} />
            <MetricCard title="食材成本" value={ex.total_food_cost} format="currency" status={Number(ex.actual_food_cost_rate_pct) - Number(ex.theoretical_food_cost_rate_pct) > 10 ? 'bad' : Number(ex.actual_food_cost_rate_pct) - Number(ex.theoretical_food_cost_rate_pct) > 5 ? 'warn' : 'good'} description={`成本率 ${formatPercent(ex.actual_food_cost_rate_pct)} · 理论成本率 ${formatPercent(ex.theoretical_food_cost_rate_pct)} · 差异 ${formatPercent(Number(ex.actual_food_cost_rate_pct) - Number(ex.theoretical_food_cost_rate_pct))}。公式：成本率 = 食材成本 ÷ 实收 × 100%。建议值：实际成本率 ≤ 32%，与理论差异 ≤ 3% 为正常`} />
            <MetricCard title="经营费用" value={ex.total_expense} format="currency" status={Number(ex.overall_expense_rate_pct) > 50 ? 'bad' : Number(ex.overall_expense_rate_pct) > 40 ? 'warn' : 'good'} description={`费用率 ${formatPercent(ex.overall_expense_rate_pct)} · 公式：费用率 = 经营费用 ÷ 实收 × 100%。人工 ${formatCurrency(ex.total_wage)} · 房租 ${formatCurrency(ex.total_rent)}。建议值：费用率 ≤ 40% 为健康，40-50% 需关注，> 50% 需整改`} />
          </div>
          <div className="mt-3 grid grid-cols-2 gap-3 md:grid-cols-4">
            <MetricCard title="人工费用" value={ex.total_wage} format="currency" status={Number(ex.overall_wage_rate_pct) > 30 ? 'bad' : Number(ex.overall_wage_rate_pct) > 25 ? 'warn' : 'good'} description={`占实收 ${formatPercent(ex.overall_wage_rate_pct)} · 公式：人工费率 = 人工费用 ÷ 实收 × 100%。建议值：≤ 22% 为优秀，22-28% 为合理，> 30% 需优化人效`} />
            <MetricCard title="房租费用" value={ex.total_rent} format="currency" status={Number(ex.overall_rent_rate_pct) > 20 ? 'bad' : Number(ex.overall_rent_rate_pct) > 15 ? 'warn' : 'good'} description={`占实收 ${formatPercent(ex.overall_rent_rate_pct)} · 公式：房租费率 = 房租费用 ÷ 实收 × 100%。建议值：≤ 12% 为优秀，12-15% 为合理，> 18% 需考虑选址或涨租谈判`} />
            <MetricCard title="水电费用" value={ex.total_utility} format="currency" status={Number(ex.overall_utility_rate_pct) > 8 ? 'warn' : 'good'} description={`占实收 ${formatPercent(ex.overall_utility_rate_pct)} · 公式：水电费率 = 水电费用 ÷ 实收 × 100%。建议值：≤ 5% 为优秀，5-7% 为合理，> 8% 需排查节能`} />
            <MetricCard title="外卖佣金" value={ex.total_commission} format="currency" status={Number(ex.total_commission) > 4000000 ? 'warn' : 'good'} description={`外卖平台佣金合计 · 公式：佣金费率 = 佣金 ÷ 实收 × 100%。建议值：≤ 5% 为健康，当前占实收 ${formatPercent(Number(ex.total_commission) / Number(ex.total_received) * 100)}`} />
          </div>
        </CollapsibleSection>
      )}

      {/* 闭环健康度 */}
      {lh && (
        <CollapsibleSection
          title="闭环健康度"
          subtitle="任务生成→店长执行→区域检查→月度验收→经验推广"
          headerRight={
            <div className="flex items-center gap-2">
              <span className="text-xs text-muted-foreground">综合得分</span>
              <span className={`text-lg font-bold ${loopScore >= 80 ? 'text-green-600' : loopScore >= 60 ? 'text-yellow-600' : 'text-red-600'}`}>
                {loopScore.toFixed(1)}%
              </span>
            </div>
          }
        >
          <div className="grid gap-4 lg:grid-cols-5">
            {/* 仪表盘 */}
            <div className="flex flex-col items-center justify-center lg:col-span-1">
              <ResponsiveContainer width="100%" height={160}>
                <RadialBarChart innerRadius="65%" outerRadius="100%" data={[{ name: '综合得分', value: loopScore, fill: loopScore >= 80 ? '#22c55e' : loopScore >= 60 ? '#eab308' : '#ef4444' }]} startAngle={90} endAngle={-270}>
                  <RadialBar background dataKey="value" cornerRadius={8} />
                </RadialBarChart>
              </ResponsiveContainer>
              <div className="-mt-24 text-center">
                <p className={`text-2xl font-bold ${loopScore >= 80 ? 'text-green-600' : loopScore >= 60 ? 'text-yellow-600' : 'text-red-600'}`}>{loopScore.toFixed(1)}%</p>
                <p className="text-xs text-muted-foreground">综合健康度</p>
              </div>
            </div>
            {/* 5个指标条 */}
            <div className="grid grid-cols-2 gap-3 md:grid-cols-5 lg:col-span-4">
              {[
                { label: '任务生成率', value: lh.task_generation_rate, desc: '系统自动生成的整改任务占应生成任务的比例' },
                { label: '店长执行率', value: lh.store_execution_rate, desc: '店长已提交反馈的任务占分配任务的比例' },
                { label: '区域周检率', value: lh.weekly_check_rate, desc: '区域经理完成周度检查的比例' },
                { label: '月度验收率', value: lh.monthly_review_rate, desc: '月度完成验收的任务比例' },
                { label: '经验推广率', value: lh.practice_promotion_rate, desc: '达标经验被推广到其他门店的比例' },
              ].map((item) => {
                const num = parseFloat(item.value)
                const isLow = num < 60
                const isMid = num >= 60 && num < 80
                return (
                  <div key={item.label} className={`rounded-md border p-3 ${isLow ? 'border-red-200 bg-red-50/50' : isMid ? 'border-yellow-200 bg-yellow-50/50' : 'border-green-200 bg-green-50/50'}`} title={item.desc}>
                    <div className="flex items-center gap-1">
                      <p className="text-xs text-muted-foreground">{item.label}</p>
                      <span className="flex h-3.5 w-3.5 cursor-help items-center justify-center rounded-full bg-muted text-[9px] text-muted-foreground" title={item.desc}>?</span>
                    </div>
                    <p className={`mt-1 text-xl font-bold ${isLow ? 'text-red-600' : isMid ? 'text-yellow-600' : 'text-green-600'}`}>{num.toFixed(1)}%</p>
                    <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-muted">
                      <div
                        className={`h-full rounded-full ${isLow ? 'bg-red-500' : isMid ? 'bg-yellow-500' : 'bg-green-500'}`}
                        style={{ width: `${Math.min(num, 100)}%` }}
                      />
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </CollapsibleSection>
      )}

      {/* 图表区 */}
      <div className="grid gap-4 lg:grid-cols-2">
        <CollapsibleSection title="日度实收趋势" subtitle="近30天实收变化">
          <ResponsiveContainer width="100%" height={250}>
            <LineChart data={dailyRows}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="business_date" tickFormatter={(v) => v?.substring(5, 10)} tick={{ fontSize: 10 }} />
              <YAxis tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
              <Tooltip
                labelFormatter={(v) => v?.substring(0, 10)}
                formatter={(v: any) => formatCurrency(v)}
              />
              <Line type="monotone" dataKey="received" stroke="#3b82f6" name="实收" dot={false} strokeWidth={2} />
            </LineChart>
          </ResponsiveContainer>
        </CollapsibleSection>

        <CollapsibleSection title="门店风险分级分布" subtitle="按红/黄/绿分级统计">
          <ResponsiveContainer width="100%" height={250}>
            <PieChart>
              <Pie
                data={riskPieData}
                cx="50%" cy="50%" outerRadius={70}
                dataKey="value"
                labelLine={false} label={({ name, value, pct }: any) => <tspan fontSize={11}>{`${name} ${value}家 (${pct}%)`}</tspan>}
              >
                {riskPieData.map((entry) => (
                  <Cell key={entry.name} fill={RISK_COLORS[entry.name as keyof typeof RISK_COLORS] || '#gray'} />
                ))}
              </Pie>
              <Tooltip formatter={(v: any) => [`${v}家`, '门店数']} />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </CollapsibleSection>
      </div>

      {/* 第二行图表 */}
      <div className="grid gap-4 lg:grid-cols-3">
        {/* 象限散点图 */}
        <CollapsibleSection title="门店经营象限" subtitle="日均实收 × 毛利率">
          <ResponsiveContainer width="100%" height={250}>
            <ScatterChart>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis type="number" dataKey="x" name="日均实收" tickFormatter={(v) => `${(v / 10000).toFixed(0)}万`} tick={{ fontSize: 10 }} />
              <YAxis type="number" dataKey="y" name="毛利率" unit="%" tick={{ fontSize: 10 }} />
              <ZAxis range={[40, 40]} />
              <Tooltip cursor={{ strokeDasharray: '3 3' }} formatter={(v: any, n: string) => n === '毛利率' ? `${Number(v).toFixed(1)}%` : n === '日均实收' ? `¥${Number(v).toFixed(0)}` : v} />
              {Object.entries(QUADRANT_COLORS).map(([name, color]) => (
                <Scatter key={name} name={name} data={quadrantScatterData.filter((d: any) => d.quadrant === name)} fill={color} />
              ))}
              <Legend wrapperStyle={{ fontSize: 10 }} />
            </ScatterChart>
          </ResponsiveContainer>
        </CollapsibleSection>

        {/* P0/P1实收覆盖瀑布图 */}
        <CollapsibleSection title="P0/P1实收覆盖" subtitle="按优先级拆分实收">
          <ResponsiveContainer width="100%" height={250}>
            <BarChart data={waterfallData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" tick={{ fontSize: 10 }} />
              <YAxis tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
              <Tooltip formatter={(v: any) => [formatCurrency(v), '金额']} />
              <Bar dataKey="value" name="金额" radius={[4, 4, 0, 0]}>
                {waterfallData.map((entry, idx) => <Cell key={idx} fill={entry.fill} />)}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </CollapsibleSection>

        {/* 平台成本率柱状图 */}
        <CollapsibleSection title="平台成本率TOP15" subtitle="三平台成本率对比">
          <ResponsiveContainer width="100%" height={250}>
            <BarChart data={platformCostData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" tick={{ fontSize: 9 }} angle={-30} textAnchor="middle" height={50} />
              <YAxis unit="%" tick={{ fontSize: 10 }} />
              <Tooltip formatter={(v: any) => [`${v}%`, '成本率']} />
              <Legend wrapperStyle={{ fontSize: 10 }} />
              <Bar dataKey="meituan" name="美团" fill="#f97316" />
              <Bar dataKey="eleme" name="饿了么" fill="#3b82f6" />
              <Bar dataKey="douyin" name="抖音" fill="#ec4899" />
            </BarChart>
          </ResponsiveContainer>
        </CollapsibleSection>
      </div>

      {/* 月度趋势 & 利润趋势 */}
      <div className="grid gap-4 lg:grid-cols-2">
        <CollapsibleSection title="月度经营趋势" subtitle="近12个月实收与账单数变化">
          <ResponsiveContainer width="100%" height={250}>
            <ComposedChart data={trendRows}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" tickFormatter={(v) => v?.substring(5, 7) || ''} tick={{ fontSize: 10 }} />
              <YAxis yAxisId="left" tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
              <YAxis yAxisId="right" orientation="right" tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
              <Tooltip
                labelFormatter={(v) => v}
                formatter={(v: any, n: string) => n === '实收' ? formatCurrency(v) : formatNumber(v)}
              />
              <Legend wrapperStyle={{ fontSize: 10 }} />
              <Bar yAxisId="left" dataKey="bill_count" name="账单数" fill="#93c5fd" barSize={20} />
              <Line yAxisId="right" type="monotone" dataKey="received" name="实收" stroke="#3b82f6" strokeWidth={2} dot={{ r: 3 }} />
            </ComposedChart>
          </ResponsiveContainer>
        </CollapsibleSection>

        <CollapsibleSection title="利润趋势" subtitle="近6个月利润瀑布变化">
          <ResponsiveContainer width="100%" height={250}>
            <ComposedChart data={profitTrendRows}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="report_month" tickFormatter={(v) => v?.substring(5, 7) || ''} tick={{ fontSize: 10 }} />
              <YAxis tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
              <Tooltip
                labelFormatter={(v) => v}
                formatter={(v: any) => formatCurrency(v)}
              />
              <Legend wrapperStyle={{ fontSize: 10 }} />
              <Bar dataKey="food_cost" name="食材成本" stackId="a" fill="#f97316" />
              <Bar dataKey="wage" name="人工" stackId="a" fill="#eab308" />
              <Bar dataKey="rent" name="房租" stackId="a" fill="#a855f7" />
              <Bar dataKey="utility" name="水电" stackId="a" fill="#06b6d4" />
              <Line type="monotone" dataKey="received" name="实收" stroke="#3b82f6" strokeWidth={2} dot={{ r: 3 }} />
              <Line type="monotone" dataKey="store_contribution" name="贡献利润" stroke="#22c55e" strokeWidth={2} dot={{ r: 3 }} />
            </ComposedChart>
          </ResponsiveContainer>
        </CollapsibleSection>
      </div>

      {/* P0/P1 门店列表 */}
      <CollapsibleSection
        title={`P0/P1 重点整改门店 (${p0p1Stores.length})`}
        subtitle="需紧急修复和重点整改的门店清单"
        headerRight={
          <div className="flex gap-2">
            {Object.entries(prioritySummary).filter(([k]) => k?.startsWith('P0') || k?.startsWith('P1')).map(([k, v]) => (
              <span key={k} className="text-xs text-muted-foreground">{k}: {v as number}家</span>
            ))}
          </div>
        }
      >
        <FilterableTable
          data={p0p1Stores}
          sortOptions={[
            { key: 'problem_count', label: '问题数' },
            { key: 'received', label: '实收' },
            { key: 'store_name', label: '门店' },
          ]}
          defaultSort="problem_count"
          defaultOrder="desc"
          filterKey="action_priority"
          filterLabel="全部优先级"
          onRowClick={(r) => navigate(`/stores/${r.store_code}`)}
          columns={[
            { key: 'store_name', label: '门店' },
            { key: 'action_priority', label: '优先级', render: (r) => <Badge type="priority" text={r.action_priority} /> },
            { key: 'problem_count', label: '问题数', align: 'center' },
            { key: 'problem_combination', label: '问题组合' },
            { key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
          ]}
        />
      </CollapsibleSection>
    </div>
  )
}
