import { useQuery } from '@tanstack/react-query'
import { useNavigate } from 'react-router-dom'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, LineChart, Line, PieChart, Pie, Legend, ComposedChart } from 'recharts'
import api from '@/lib/api'
import { MetricCard } from '@/components/MetricCard'
import { LoadingSpinner } from '@/components/LoadingSpinner'
import { CollapsibleSection } from '@/components/CollapsibleSection'
import { formatCurrency, formatNumber, formatPercent } from '@/lib/utils'
import { Crown, TrendingDown, AlertTriangle, TrendingUp, Building2, Receipt } from 'lucide-react'

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

export function BossPage() {
  const navigate = useNavigate()

  const { data: overview, isLoading: odLoading } = useQuery({
    queryKey: ['overview'],
    queryFn: () => api.get('/overview'),
  })
  const { data: daily, isLoading: dailyLoading } = useQuery({
    queryKey: ['overview/daily'],
    queryFn: () => api.get('/overview/daily'),
  })
  const { data: expenseData, isLoading: exLoading } = useQuery({
    queryKey: ['store-expense/overview'],
    queryFn: () => api.get('/store-expense/overview'),
  })
  const { data: waterfallData, isLoading: wfLoading } = useQuery({
    queryKey: ['overview/profit-waterfall'],
    queryFn: () => api.get('/overview/profit-waterfall'),
  })
  const { data: riskData, isLoading: riskLoading } = useQuery({
    queryKey: ['stores/risk'],
    queryFn: () => api.get('/stores/risk'),
  })
  const { data: priorityData, isLoading: priorityLoading } = useQuery({
    queryKey: ['stores/priority'],
    queryFn: () => api.get('/stores/priority'),
  })
  const { data: costOverview, isLoading: costLoading } = useQuery({
    queryKey: ['cost-analysis/store-overview'],
    queryFn: () => api.get('/cost-analysis/store-overview'),
  })
  const { data: expenseStructure, isLoading: structLoading } = useQuery({
    queryKey: ['store-expense/expense-structure'],
    queryFn: () => api.get('/store-expense/expense-structure'),
  })
  const { data: profitRankingData } = useQuery({
    queryKey: ['overview/store-profit-ranking'],
    queryFn: () => api.get('/overview/store-profit-ranking'),
  })

  const pageLoading = odLoading || dailyLoading || exLoading || wfLoading || riskLoading || priorityLoading

  const od = (overview as any)?.data
  const ex = (expenseData as any)?.data
  const wf = (waterfallData as any)?.data
  const riskRows = (riskData as any)?.data || []
  const priorityRows = (priorityData as any)?.data || []
  const dailyRows = (daily as any)?.data || []
  const costOv = (costOverview as any)?.data || {}
  const structRows = (expenseStructure as any)?.data || []
  const profitRanking = (profitRankingData as any)?.data || []

  // 风险分布
  const riskSummary = riskRows.reduce((acc: any, r: any) => {
    acc[r.risk_level] = (acc[r.risk_level] || 0) + 1
    return acc
  }, {})
  const riskRevSummary = riskRows.reduce((acc: any, r: any) => {
    if (!acc[r.risk_level]) acc[r.risk_level] = 0
    acc[r.risk_level] += Number(r.received || 0)
    return acc
  }, {})
  const totalStores = riskRows.length
  const totalRev = Number(od?.received || 0)

  // P0/P1门店
  const p0Stores = priorityRows.filter((s: any) => s.action_priority?.startsWith('P0'))
  const p1Stores = priorityRows.filter((s: any) => s.action_priority?.startsWith('P1'))
  const p0p1Stores = [...p0Stores, ...p1Stores]

  // 营收TOP5 / BOTTOM5
  const sortedByRev = [...riskRows].sort((a: any, b: any) => Number(b.received || 0) - Number(a.received || 0))
  const top5 = sortedByRev.slice(0, 5)
  const bottom5 = sortedByRev.filter((r: any) => Number(r.received) > 0).slice(-5).reverse()
  const rankingData = [...top5, ...bottom5].map((r: any, i: number) => ({
    name: r.store_name?.substring(0, 6) || '',
    value: Number(r.received || 0),
    code: r.store_code,
    isTop: i < 5,
  }))

  // 利润瀑布数据
  const waterfallSteps = wf ? [
    { name: '实收', value: Number(wf.received), type: 'total' },
    { name: '食材成本', value: -Number(wf.food_cost), type: 'cost' },
    { name: '人工', value: -Number(wf.wage), type: 'cost' },
    { name: '房租', value: -Number(wf.rent), type: 'cost' },
    { name: '水电', value: -Number(wf.utility), type: 'cost' },
    { name: '宿舍', value: -Number(wf.dorm), type: 'cost' },
    { name: '外卖佣金', value: -Number(wf.commission), type: 'cost' },
    { name: '其他费用', value: -Number(wf.other_expense), type: 'cost' },
    { name: '净利润', value: Number(wf.net_profit), type: 'profit' },
  ] : []

  // 瀑布图累计计算
  let cumulative = 0
  const waterfallChart = waterfallSteps.map((step) => {
    if (step.type === 'total') {
      cumulative = step.value
      return { name: step.name, base: 0, value: step.value, fill: '#3b82f6' }
    } else if (step.type === 'profit') {
      return { name: step.name, base: 0, value: step.value, fill: '#22c55e' }
    } else {
      const decrease = Math.abs(step.value)
      const base = cumulative - decrease
      const result = { name: step.name, base, value: decrease, fill: '#ef4444' }
      cumulative = base
      return result
    }
  })

  // 费用结构饼图
  const pieData = structRows.map((r: any) => ({ name: r.account_name?.length > 6 ? r.account_name.substring(0, 6) + '…' : r.account_name, value: parseFloat(r.amount) }))
  const PIE_COLORS = ['#3b82f6', '#22c55e', '#f97316', '#eab308', '#a855f7', '#ec4899', '#06b6d4', '#64748b']

  // 日度趋势
  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'))

  // 成本超耗TOP5
  const costRed = Number(costOv.red_count || 0)
  const costOrange = Number(costOv.orange_count || 0)
  const costGreen = Number(costOv.green_count || 0)

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

  return (
    <div className="space-y-4">
      {/* 标题 */}
      <div className="flex items-center gap-2">
        <Crown className="text-yellow-500" size={24} />
        <div>
          <h1 className="text-xl font-bold">老板驾驶舱</h1>
          <p className="mt-0.5 text-xs text-muted-foreground">经营全景 · 2026年4月</p>
        </div>
      </div>

      {/* ① 核心经营指标 */}
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <MetricCard title="实收总额" value={od?.received} format="currency" trend={trendReceived} description={`公式：全部门店实收合计。环比上周 ${trendReceived > 0 ? '↑' : '↓'} ${Math.abs(trendReceived)}%`} />
        <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)} · 公式：实收 - 食材成本 - 经营费用。建议值：≥ 10% 优秀，5-10% 合格，< 5% 需整改`} />
        <MetricCard title="门店数" value={totalStores} unit="家" description={`盈利 ${ex?.profitable_stores}家 / 亏损 ${ex?.loss_stores}家。无费用数据 ${ex?.no_expense_stores}家`} />
        <MetricCard title="客单价" value={od?.avg_bill_value} format="currency" trend={trend((last7.length > 0 ? sumKey(last7, 'received') / sumKey(last7, 'bill_count') : 0), (prev7.length > 0 ? sumKey(prev7, 'received') / sumKey(prev7, 'bill_count') : 0))} description={`账单 ${formatNumber(od?.bill_count)} 笔 · 公式：实收 ÷ 账单数`} />
      </div>

      {/* ② 利润瀑布 */}
      {wf && (
        <CollapsibleSection title="利润结构" subtitle="实收 → 减各项成本费用 → 净利润">
          <ResponsiveContainer width="100%" height={280}>
            <BarChart data={waterfallChart} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" tick={{ fontSize: 10 }} angle={-20} textAnchor="middle" height={60} />
              <YAxis tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
              <Tooltip labelFormatter={(label) => label} formatter={(v: any) => [formatCurrency(v), '金额']} />
              <Bar dataKey="value" radius={[4, 4, 0, 0]} shape={(props: any) => {
                const { x, y, width, height, payload, fill } = props
                if (!payload.value || payload.value === 0) return <rect />
                const scale = height / payload.value
                const newY = y - payload.base * scale
                return <rect x={x} y={newY} width={width} height={height} fill={fill} rx={4} ry={4} />
              }}>
                {waterfallChart.map((entry, i) => <Cell key={i} fill={entry.fill} />)}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
          <div className="mt-2 grid grid-cols-3 gap-2 md:grid-cols-5">
            {waterfallSteps.filter(s => s.type === 'cost').map(s => (
              <div key={s.name} className="rounded border p-2 text-center">
                <p className="text-xs text-muted-foreground">{s.name}</p>
                <p className="text-sm font-bold text-red-600">{formatCurrency(Math.abs(s.value))}</p>
              </div>
            ))}
            <div className="rounded border border-green-200 bg-green-50/40 p-2 text-center">
              <p className="text-xs text-muted-foreground">净利润</p>
              <p className="text-sm font-bold text-green-700">{formatCurrency(wf.net_profit)}</p>
            </div>
          </div>
          {/* 成本费用占比汇总条 */}
          {wf && (
            <div className="mt-3 rounded-lg border p-3">
              <p className="mb-2 text-xs font-medium text-muted-foreground">实收分配（占实收比例）</p>
              <div className="flex h-8 w-full overflow-hidden rounded-lg text-[10px] font-bold text-white">
                <div className="flex items-center justify-center bg-orange-500" style={{ width: `${Number(wf.food_cost) / Number(wf.received) * 100}%` }} title={`食材 ${formatPercent(Number(wf.food_cost) / Number(wf.received) * 100)}`}>
                  食材{formatPercent(Number(wf.food_cost) / Number(wf.received) * 100)}
                </div>
                <div className="flex items-center justify-center bg-blue-500" style={{ width: `${Number(wf.wage) / Number(wf.received) * 100}%` }} title={`人工 ${formatPercent(Number(wf.wage) / Number(wf.received) * 100)}`}>
                  人工{formatPercent(Number(wf.wage) / Number(wf.received) * 100)}
                </div>
                <div className="flex items-center justify-center bg-purple-500" style={{ width: `${Number(wf.rent) / Number(wf.received) * 100}%` }} title={`房租 ${formatPercent(Number(wf.rent) / Number(wf.received) * 100)}`}>
                  房租{formatPercent(Number(wf.rent) / Number(wf.received) * 100)}
                </div>
                <div className="flex items-center justify-center bg-cyan-500" style={{ width: `${Number(wf.utility) / Number(wf.received) * 100}%` }} title={`水电 ${formatPercent(Number(wf.utility) / Number(wf.received) * 100)}`}>
                  水电{formatPercent(Number(wf.utility) / Number(wf.received) * 100)}
                </div>
                <div className="flex items-center justify-center bg-slate-400" style={{ width: `${(Number(wf.dorm) + Number(wf.commission) + Number(wf.other_expense)) / Number(wf.received) * 100}%` }} title={`其他费用 ${formatPercent((Number(wf.dorm) + Number(wf.commission) + Number(wf.other_expense)) / Number(wf.received) * 100)}`}>
                  其他{formatPercent((Number(wf.dorm) + Number(wf.commission) + Number(wf.other_expense)) / Number(wf.received) * 100)}
                </div>
                <div className="flex items-center justify-center bg-green-500" style={{ width: `${Number(wf.net_profit) / Number(wf.received) * 100}%` }} title={`净利润 ${formatPercent(Number(wf.net_profit) / Number(wf.received) * 100)}`}>
                  利润{formatPercent(Number(wf.net_profit) / Number(wf.received) * 100)}
                </div>
              </div>
              <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[10px] text-muted-foreground">
                <span>食材成本率 {formatPercent(Number(wf.food_cost) / Number(wf.received) * 100)}（建议 ≤ 32%）</span>
                <span>费用率 {formatPercent(Number(wf.total_expense) / Number(wf.received) * 100)}（建议 ≤ 40%）</span>
                <span>净利率 {formatPercent(Number(wf.net_profit) / Number(wf.received) * 100)}（建议 ≥ 10%）</span>
              </div>
            </div>
          )}
        </CollapsibleSection>
      )}

      {/* ③ 风险态势 */}
      <div className="grid gap-4 lg:grid-cols-3">
        <div className={`rounded-lg border p-4 ${riskSummary['红色'] > 15 ? 'border-red-200 bg-red-50/40' : 'border-yellow-200 bg-yellow-50/40'}`}>
          <div className="flex items-center gap-2">
            <AlertTriangle className="text-red-500" size={20} />
            <span className="text-sm font-bold">红色门店</span>
          </div>
          <p className="mt-2 text-3xl font-bold text-red-600">{riskSummary['红色'] || 0}<span className="text-base text-muted-foreground"> 家</span></p>
          <p className="mt-1 text-xs text-muted-foreground">实收 {formatCurrency(riskRevSummary['红色'])} · 占比 {totalRev > 0 ? formatPercent(riskRevSummary['红色'] / totalRev * 100) : '-'}</p>
        </div>
        <div className="rounded-lg border border-yellow-200 bg-yellow-50/40 p-4">
          <div className="flex items-center gap-2">
            <TrendingDown className="text-yellow-500" size={20} />
            <span className="text-sm font-bold">黄色门店</span>
          </div>
          <p className="mt-2 text-3xl font-bold text-yellow-600">{riskSummary['黄色'] || 0}<span className="text-base text-muted-foreground"> 家</span></p>
          <p className="mt-1 text-xs text-muted-foreground">实收 {formatCurrency(riskRevSummary['黄色'])} · 占比 {totalRev > 0 ? formatPercent(riskRevSummary['黄色'] / totalRev * 100) : '-'}</p>
        </div>
        <div className="rounded-lg border border-green-200 bg-green-50/40 p-4">
          <div className="flex items-center gap-2">
            <TrendingUp className="text-green-500" size={20} />
            <span className="text-sm font-bold">绿色门店</span>
          </div>
          <p className="mt-2 text-3xl font-bold text-green-600">{riskSummary['绿色'] || 0}<span className="text-base text-muted-foreground"> 家</span></p>
          <p className="mt-1 text-xs text-muted-foreground">实收 {formatCurrency(riskRevSummary['绿色'])} · 占比 {totalRev > 0 ? formatPercent(riskRevSummary['绿色'] / totalRev * 100) : '-'}</p>
        </div>
      </div>

      {/* P0/P1 门店清单 */}
      {p0p1Stores.length > 0 && (
        <CollapsibleSection title={`重点整改门店 (P0 ${p0Stores.length}家 + P1 ${p1Stores.length}家)`} subtitle="需紧急修复和重点整改的门店">
          <div className="overflow-auto">
            <table className="w-full text-xs">
              <thead className="bg-muted">
                <tr>
                  <th className="text-left p-2">门店</th>
                  <th className="text-right p-2">实收</th>
                  <th className="text-center p-2">优先级</th>
                  <th className="text-center p-2">风险</th>
                  <th className="text-left p-2">问题</th>
                </tr>
              </thead>
              <tbody>
                {p0p1Stores.map((s: any) => (
                  <tr
                    key={s.store_code}
                    className="cursor-pointer border-b hover:bg-muted/50"
                    onClick={() => navigate(`/stores/${s.store_code}`)}
                  >
                    <td className="p-2 font-medium">{s.store_name}</td>
                    <td className="text-right p-2">{formatCurrency(s.received)}</td>
                    <td className="text-center p-2">
                      <span className={`rounded px-1.5 py-0.5 text-[10px] font-bold ${s.action_priority?.startsWith('P0') ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700'}`}>
                        {s.action_priority}
                      </span>
                    </td>
                    <td className="text-center p-2">
                      <span className={`rounded px-1.5 py-0.5 text-[10px] font-bold ${s.risk_level === '红色' ? 'bg-red-100 text-red-700' : s.risk_level === '黄色' ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'}`}>
                        {s.risk_level}
                      </span>
                    </td>
                    <td className="p-2 text-muted-foreground">{s.problem_combination || '-'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CollapsibleSection>
      )}

      {/* ④ 成本异常 + 费用结构 */}
      <div className="grid gap-4 lg:grid-cols-2">
        <CollapsibleSection title="成本异常分布" subtitle="食材成本超耗情况">
          <div className="grid grid-cols-3 gap-3">
            <div className="rounded-lg border border-red-200 bg-red-50/40 p-3 text-center">
              <p className="text-xs text-muted-foreground">严重超耗</p>
              <p className="text-2xl font-bold text-red-600">{costRed}</p>
              <p className="text-xs text-muted-foreground">家</p>
            </div>
            <div className="rounded-lg border border-orange-200 bg-orange-50/40 p-3 text-center">
              <p className="text-xs text-muted-foreground">明显超耗</p>
              <p className="text-2xl font-bold text-orange-600">{costOrange}</p>
              <p className="text-xs text-muted-foreground">家</p>
            </div>
            <div className="rounded-lg border border-green-200 bg-green-50/40 p-3 text-center">
              <p className="text-xs text-muted-foreground">基本正常</p>
              <p className="text-2xl font-bold text-green-600">{costGreen}</p>
              <p className="text-xs text-muted-foreground">家</p>
            </div>
          </div>
          <div className="mt-3 rounded border p-3">
            <p className="text-xs text-muted-foreground">总差异金额</p>
            <p className="text-xl font-bold text-red-600">{formatCurrency(costOv.total_variance)}</p>
            <p className="mt-1 text-xs text-muted-foreground">公式：实际食材成本 - 理论食材成本。正值表示超耗</p>
          </div>
        </CollapsibleSection>

        <CollapsibleSection title="费用结构" subtitle="各费用科目占比">
          {!structLoading && pieData.length > 0 && (
            <ResponsiveContainer width="100%" height={280}>
              <PieChart>
                <Pie data={pieData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={100} label={(e: any) => `${e.name}`}>
                  {pieData.map((_: any, i: number) => <Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} />)}
                </Pie>
                <Tooltip formatter={(v: any) => formatCurrency(v)} />
                <Legend wrapperStyle={{ fontSize: 10 }} />
              </PieChart>
            </ResponsiveContainer>
          )}
        </CollapsibleSection>
      </div>

      {/* ⑤ 门店营收排名 */}
      <CollapsibleSection title="门店营收排名" subtitle="TOP5 赚钱最多 · BOTTOM5 需关注">
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={rankingData} layout="vertical" margin={{ left: 80 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis type="number" tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
            <YAxis type="category" dataKey="name" tick={{ fontSize: 10 }} width={80} />
            <Tooltip formatter={(v: any) => formatCurrency(v)} />
            <Bar dataKey="value" radius={[0, 4, 4, 0]} onClick={(d: any) => d.code && navigate(`/stores/${d.code}`)}>
              {rankingData.map((entry, i) => (
                <Cell key={i} fill={entry.isTop ? '#22c55e' : '#ef4444'} className="cursor-pointer" />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </CollapsibleSection>

      {/* ⑤b 门店利润排名 */}
      {profitRanking.length > 0 && (
        <CollapsibleSection title="门店利润排名" subtitle="TOP5 最赚钱 · BOTTOM5 亏损最多 · 公式：实收 - 食材成本 - 经营费用">
          <div className="grid gap-4 lg:grid-cols-2">
            {/* TOP5 */}
            <div>
              <p className="mb-2 text-sm font-bold text-green-600">利润 TOP5</p>
              <div className="space-y-2">
                {profitRanking.slice(0, 5).map((s: any, i: number) => (
                  <div
                    key={s.store_code}
                    className="flex cursor-pointer items-center gap-3 rounded-lg border border-green-200 bg-green-50/30 p-3 hover:bg-green-50/60"
                    onClick={() => navigate(`/stores/${s.store_code}`)}
                  >
                    <span className="text-lg font-bold text-green-600">{i + 1}</span>
                    <div className="flex-1">
                      <p className="text-sm font-medium">{s.store_name}</p>
                      <p className="text-xs text-muted-foreground">实收 {formatCurrency(s.received)} · 净利率 {formatPercent(s.net_margin_pct)}</p>
                    </div>
                    <span className="text-lg font-bold text-green-700">{formatCurrency(s.net_profit)}</span>
                  </div>
                ))}
              </div>
            </div>
            {/* BOTTOM5 */}
            <div>
              <p className="mb-2 text-sm font-bold text-red-600">亏损 BOTTOM5</p>
              <div className="space-y-2">
                {profitRanking.filter((s: any) => Number(s.net_profit) < 0).slice(-5).reverse().map((s: any, i: number) => (
                  <div
                    key={s.store_code}
                    className="flex cursor-pointer items-center gap-3 rounded-lg border border-red-200 bg-red-50/30 p-3 hover:bg-red-50/60"
                    onClick={() => navigate(`/stores/${s.store_code}`)}
                  >
                    <span className="text-lg font-bold text-red-600">{i + 1}</span>
                    <div className="flex-1">
                      <p className="text-sm font-medium">{s.store_name}</p>
                      <p className="text-xs text-muted-foreground">实收 {formatCurrency(s.received)} · 净利率 {formatPercent(s.net_margin_pct)}</p>
                    </div>
                    <span className="text-lg font-bold text-red-700">{formatCurrency(s.net_profit)}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </CollapsibleSection>
      )}

      {/* ⑥ 日度实收趋势 */}
      <CollapsibleSection title="日度实收趋势" subtitle={`近30天 · 环比上周 ${trendReceived > 0 ? '↑' : '↓'} ${Math.abs(trendReceived)}%`}>
        <ResponsiveContainer width="100%" height={220}>
          <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>
    </div>
  )
}