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

const CHANNEL_COLORS: Record<string, string> = {
  wechat: '#07c160',
  alipay: '#1677ff',
  meituan_delivery: '#ffd700',
  meituan: '#ff6b35',
  taobao_delivery: '#ff4400',
  douyin: '#000000',
  cash: '#52c41a',
  jd_delivery: '#e1251b',
  unionpay: '#f5222d',
  credit: '#722ed1',
}

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

  const { data: dailyData, isLoading: dailyLoading } = useQuery({
    queryKey: ['revenue/daily-summary', month],
    queryFn: () => api.get('/revenue/daily-summary', { params: { month } }),
  })
  const { data: channelData, isLoading: channelLoading } = useQuery({
    queryKey: ['revenue/channel', month],
    queryFn: () => api.get('/revenue/channel', { params: { month } }),
  })
  const { data: mealPeriodData, isLoading: mealLoading } = useQuery({
    queryKey: ['revenue/meal-period', month],
    queryFn: () => api.get('/revenue/meal-period', { params: { month } }),
  })
  const { data: storeRankingData, isLoading: rankLoading } = useQuery({
    queryKey: ['revenue/store-ranking', month],
    queryFn: () => api.get('/revenue/store-ranking', { params: { month } }),
  })

  const pageLoading = dailyLoading || channelLoading || mealLoading || rankLoading

  const dailyRows = (dailyData as any)?.data || []
  const channelRows = (channelData as any)?.data || []
  const mealRows = (mealPeriodData as any)?.data || []
  const rankRows = (storeRankingData as any)?.data || []

  // 核心指标
  const totalConsumption = dailyRows.reduce((s: number, r: any) => s + Number(r.consumption || 0), 0)
  const totalReceived = dailyRows.reduce((s: number, r: any) => s + Number(r.received || 0), 0)
  const totalBills = dailyRows.reduce((s: number, r: any) => s + Number(r.bill_count || 0), 0)
  const totalDiscounts = dailyRows.reduce((s: number, r: any) => s + Number(r.discounts || 0), 0)
  const totalGuests = dailyRows.reduce((s: number, r: any) => s + Number(r.guests || 0), 0)
  const avgBillValue = totalBills > 0 ? totalReceived / totalBills : 0
  const avgDiscountRate = totalReceived > 0 ? totalDiscounts / (totalReceived + totalDiscounts) * 100 : 0
  const avgGuestValue = totalGuests > 0 ? totalReceived / totalGuests : 0

  // 日度趋势数据
  const dailyChart = dailyRows.map((r: any) => ({
    date: r.business_date?.substring(5, 10),
    received: Number(r.received || 0),
    bills: Number(r.bill_count || 0),
    avg_bill: Number(r.avg_bill_value || 0),
    discount_rate: Number(r.discount_rate_pct || 0),
  }))

  // 环比
  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 channelTotals: Record<string, number> = {}
  channelRows.forEach((r: any) => {
    Object.keys(r).forEach((k) => {
      if (k !== 'business_date') {
        channelTotals[k] = (channelTotals[k] || 0) + Number(r[k] || 0)
      }
    })
  })
  const channelPie = Object.entries(channelTotals)
    .filter(([k, v]) => v > 0)
    .map(([k, v]) => ({ name: k, value: Math.round(v * 100) / 100 }))
    .sort((a, b) => b.value - a.value)

  const channelLabels: Record<string, string> = {
    wechat: '微信',
    alipay: '支付宝',
    meituan_delivery: '美团外卖',
    meituan: '美团堂食',
    taobao_delivery: '淘宝外卖',
    douyin: '抖音',
    cash: '现金',
    jd_delivery: '京东外卖',
    unionpay: '银联',
    credit: '挂账',
  }

  // 渠道日度趋势（前5大渠道）
  const topChannels = channelPie.slice(0, 5).map((c) => c.name)
  const channelTrend = channelRows.map((r: any) => {
    const row: any = { date: r.business_date?.substring(5, 10) }
    topChannels.forEach((ch) => { row[ch] = Number(r[ch] || 0) })
    return row
  })

  // 时段分布
  const mealColors = ['#f59e0b', '#3b82f6', '#22c55e', '#8b5cf6', '#ec4899', '#06b6d4']
  const mealPie = mealRows.map((r: any, i: number) => ({
    name: r.meal_period,
    value: Number(r.received || 0),
    bills: Number(r.bill_count || 0),
    avg_bill: Number(r.avg_bill_value || 0),
    fill: mealColors[i % mealColors.length],
  }))

  // 门店排名 TOP10 / BOTTOM10
  const top10 = rankRows.slice(0, 10).map((r: any) => ({
    name: r.store_name?.substring(0, 6) || '',
    value: Number(r.received || 0),
    code: r.store_code,
  }))
  const bottom10 = rankRows.filter((r: any) => Number(r.received) > 0).slice(-10).reverse().map((r: any) => ({
    name: r.store_name?.substring(0, 6) || '',
    value: Number(r.received || 0),
    code: r.store_code,
  }))

  if (pageLoading) {
    return <LoadingSpinner text="加载营收分析..." />
  }

  return (
    <div className="space-y-4">
      {/* 标题 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <BarChart3 className="text-blue-500" size={24} />
          <div>
            <h1 className="text-xl font-bold">营收分析</h1>
            <p className="mt-0.5 text-xs text-muted-foreground">收入结构 · 渠道分布 · 时段分析 · 门店排名</p>
          </div>
        </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={totalConsumption} format="currency" description="全部门店消费金额合计" />
        <MetricCard title="优惠总额" value={totalDiscounts} format="currency" status={avgDiscountRate > 25 ? 'bad' : avgDiscountRate > 20 ? 'warn' : 'good'} description={`优惠率 ${formatPercent(avgDiscountRate)}`} />
        <MetricCard title="实收总额" value={totalReceived} format="currency" trend={trendReceived} description={`环比上周 ${trendReceived > 0 ? '↑' : '↓'} ${Math.abs(trendReceived)}%`} />
        <MetricCard title="账单数" value={totalBills} format="number" trend={trendBills} description={`环比上周 ${trendBills > 0 ? '↑' : '↓'} ${Math.abs(trendBills)}%`} />
        <MetricCard title="客单价" value={avgBillValue} format="currency" description="实收 ÷ 账单数" />
        <MetricCard title="客流量" value={totalGuests} format="number" description={`人均 ${formatCurrency(avgGuestValue)}`} />
      </div>

      {/* 日度营收趋势 */}
      <CollapsibleSection title="日度营收趋势" subtitle="实收 · 账单数 · 客单价 · 优惠率">
        <ResponsiveContainer width="100%" height={280}>
          <ComposedChart data={dailyChart} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="date" tick={{ fontSize: 10 }} />
            <YAxis yAxisId="left" tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
            <YAxis yAxisId="right" orientation="right" tick={{ fontSize: 10 }} />
            <Tooltip
              labelFormatter={(label) => label}
              formatter={(v: any, name: any) => {
                const labels: Record<string, string> = { received: '实收', bills: '账单数', avg_bill: '客单价', discount_rate: '优惠率' }
                if (name === 'received') return [formatCurrency(v), '实收']
                if (name === 'bills') return [formatNumber(v), '账单数']
                if (name === 'avg_bill') return [formatCurrency(v), '客单价']
                if (name === 'discount_rate') return [`${v}%`, '优惠率']
                return [v, labels[name] || name]
              }}
            />
            <Legend wrapperStyle={{ fontSize: 10 }} formatter={(v: any) => { const m: Record<string, string> = { received: '实收', bills: '账单数', avg_bill: '客单价', discount_rate: '优惠率' }; return m[v] || v }} />
            <Bar yAxisId="left" dataKey="received" fill="#3b82f6" radius={[4, 4, 0, 0]} name="received" />
            <Line yAxisId="right" type="monotone" dataKey="avg_bill" stroke="#22c55e" name="avg_bill" dot={false} strokeWidth={2} />
            <Line yAxisId="right" type="monotone" dataKey="discount_rate" stroke="#ef4444" name="discount_rate" dot={false} strokeWidth={2} />
          </ComposedChart>
        </ResponsiveContainer>
      </CollapsibleSection>

      {/* 渠道收入结构 + 渠道趋势 */}
      <div className="grid gap-4 lg:grid-cols-2">
        <CollapsibleSection title="渠道收入结构" subtitle="各支付/外卖渠道占比">
          {channelPie.length > 0 && (
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie data={channelPie} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} labelLine={false} label={(e: any) => <tspan fontSize={11}>{channelLabels[e.name] || e.name}</tspan>}>
                  {channelPie.map((entry: any, i: number) => <Cell key={i} fill={CHANNEL_COLORS[entry.name] || '#999'} />)}
                </Pie>
                <Tooltip formatter={(v: any, name: any) => [formatCurrency(v), channelLabels[name] || name]} />
                <Legend wrapperStyle={{ fontSize: 10 }} formatter={(v: any) => channelLabels[v] || v} />
              </PieChart>
            </ResponsiveContainer>
          )}
        </CollapsibleSection>

        <CollapsibleSection title="渠道收入趋势" subtitle="前5大渠道日度收入">
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={channelTrend}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" tick={{ fontSize: 10 }} />
              <YAxis tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
              <Tooltip formatter={(v: any, name: any) => [formatCurrency(v), channelLabels[name] || name]} />
              <Legend wrapperStyle={{ fontSize: 10 }} formatter={(v) => channelLabels[v] || v} />
              {topChannels.map((ch) => (
                <Line key={ch} type="monotone" dataKey={ch} stroke={CHANNEL_COLORS[ch] || '#999'} dot={false} strokeWidth={2} />
              ))}
            </LineChart>
          </ResponsiveContainer>
        </CollapsibleSection>
      </div>

      {/* 时段收入分布 */}
      <CollapsibleSection title="时段收入分布" subtitle="早市/午市/下午茶/晚市/夜市">
        <div className="grid gap-4 lg:grid-cols-2">
          <ResponsiveContainer width="100%" height={280}>
            <PieChart>
              <Pie data={mealPie} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} labelLine={false} label={(e: any) => <tspan fontSize={11}>{e.name}</tspan>}>
                {mealPie.map((entry: any, i: number) => <Cell key={i} fill={entry.fill} />)}
              </Pie>
              <Tooltip formatter={(v: any, name: any) => [formatCurrency(v), name]} />
              <Legend wrapperStyle={{ fontSize: 10 }} />
            </PieChart>
          </ResponsiveContainer>
          <div className="space-y-2">
            {mealRows.map((r: any, i: number) => (
              <div key={r.meal_period} className="flex items-center gap-3 rounded-lg border p-3">
                <div className="h-4 w-4 rounded" style={{ backgroundColor: mealColors[i % mealColors.length] }} />
                <div className="flex-1">
                  <p className="text-sm font-medium">{r.meal_period}</p>
                  <p className="text-xs text-muted-foreground">{formatNumber(r.bill_count)} 笔 · 客单价 {formatCurrency(r.avg_bill_value)}</p>
                </div>
                <div className="text-right">
                  <p className="text-sm font-bold">{formatCurrency(r.received)}</p>
                  <p className="text-xs text-muted-foreground">{totalReceived > 0 ? formatPercent(Number(r.received) / totalReceived * 100) : '-'}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </CollapsibleSection>

      {/* 门店营收排名 */}
      <div className="grid gap-4 lg:grid-cols-2">
        <CollapsibleSection title="营收 TOP10" subtitle="实收最高的10家门店">
          <ResponsiveContainer width="100%" height={320}>
            <BarChart data={top10} layout="vertical" margin={{ left: 70 }}>
              <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={70} />
              <Tooltip formatter={(v: any) => [formatCurrency(v), '实收']} />
              <Bar dataKey="value" radius={[0, 4, 4, 0]} onClick={(d: any) => d.code && navigate(`/stores/${d.code}`)}>
                {top10.map((_: any, i: number) => <Cell key={i} fill="#22c55e" className="cursor-pointer" />)}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </CollapsibleSection>

        <CollapsibleSection title="营收 BOTTOM10" subtitle="营收最低的10家门店">
          <ResponsiveContainer width="100%" height={320}>
            <BarChart data={bottom10} layout="vertical" margin={{ left: 70 }}>
              <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={70} />
              <Tooltip formatter={(v: any) => [formatCurrency(v), '实收']} />
              <Bar dataKey="value" radius={[0, 4, 4, 0]} onClick={(d: any) => d.code && navigate(`/stores/${d.code}`)}>
                {bottom10.map((_: any, i: number) => <Cell key={i} fill="#ef4444" className="cursor-pointer" />)}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </CollapsibleSection>
      </div>

      {/* 门店营收明细表 */}
      <CollapsibleSection title="门店营收明细" subtitle="全部门店营收排名">
        <FilterableTable
          data={rankRows}
          filterKey="store_name"
          filterLabel="全部门店"
          onRowClick={(r) => r.store_code && navigate(`/stores/${r.store_code}`)}
          sortOptions={[
            { key: 'received', label: '实收' },
            { key: 'bill_count', label: '账单数' },
            { key: 'avg_bill_value', label: '客单价' },
            { key: 'avg_discount_rate_pct', label: '优惠率' },
            { key: 'guests', label: '客流量' },
            { key: 'avg_theoretical_margin_pct', label: '毛利率' },
          ]}
          defaultSort="received"
          defaultOrder="desc"
          columns={[
            { key: 'store_name', label: '门店' },
            { key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
            { key: 'bill_count', label: '账单数', align: 'right', render: (r) => formatNumber(r.bill_count) },
            { key: 'avg_bill_value', label: '客单价', align: 'right', render: (r) => formatCurrency(r.avg_bill_value) },
            { key: 'avg_discount_rate_pct', label: '优惠率', align: 'right', render: (r) => <span className={Number(r.avg_discount_rate_pct) > 25 ? 'text-red-600 font-bold' : Number(r.avg_discount_rate_pct) > 20 ? 'text-yellow-600' : ''}>{formatPercent(r.avg_discount_rate_pct)}</span> },
            { key: 'guests', label: '客流量', align: 'right', render: (r) => formatNumber(r.guests) },
            { key: 'avg_theoretical_margin_pct', label: '理论毛利率', align: 'right', render: (r) => formatPercent(r.avg_theoretical_margin_pct) },
          ]}
        />
      </CollapsibleSection>
    </div>
  )
}