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

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

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

  const { data: marketingData, isLoading: marketingLoading } = useQuery({
    queryKey: ['marketing/plans', month],
    queryFn: () => api.get('/marketing/plans', { params: { month } }),
  })

  const platformRows = (platformData as any)?.data || []
  const marketingRows = (marketingData as any)?.data || []

  const pageLoading = platformLoading || marketingLoading

  const storesWithPlatform = platformRows.filter((r: any) => Number(r.meituan_received) > 0 || Number(r.taobao_received) > 0 || Number(r.jd_received) > 0)

  const totalMeituan = storesWithPlatform.reduce((s: number, r: any) => s + Number(r.meituan_received || 0), 0)
  const totalTaobao = storesWithPlatform.reduce((s: number, r: any) => s + Number(r.taobao_received || 0), 0)
  const totalJd = storesWithPlatform.reduce((s: number, r: any) => s + Number(r.jd_received || 0), 0)
  const totalMeituanCost = storesWithPlatform.reduce((s: number, r: any) => s + Number(r.meituan_discount || 0) + Number(r.meituan_commission || 0), 0)
  const totalTaobaoCost = storesWithPlatform.reduce((s: number, r: any) => s + Number(r.taobao_discount || 0) + Number(r.taobao_commission || 0), 0)
  const totalJdCost = storesWithPlatform.reduce((s: number, r: any) => s + Number(r.jd_discount || 0) + Number(r.jd_commission || 0), 0)

  const totalPlatformReceived = totalMeituan + totalTaobao + totalJd
  const totalPlatformCost = totalMeituanCost + totalTaobaoCost + totalJdCost
  const blendedCostRate = totalPlatformReceived > 0 ? (totalPlatformCost / totalPlatformReceived) * 100 : 0

  const highCostStores = storesWithPlatform.filter((r: any) => {
    const rates = [Number(r.meituan_cost_rate_pct || 0), Number(r.taobao_cost_rate_pct || 0), Number(r.jd_cost_rate_pct || 0)].filter((v: number) => v > 0)
    return rates.some((v: number) => v >= 38)
  })

  const platformChartData = [
    { name: '美团', 实收: totalMeituan, 折扣: storesWithPlatform.reduce((s: number, r: any) => s + Number(r.meituan_discount || 0), 0), 佣金: storesWithPlatform.reduce((s: number, r: any) => s + Number(r.meituan_commission || 0), 0) },
    { name: '淘宝', 实收: totalTaobao, 折扣: storesWithPlatform.reduce((s: number, r: any) => s + Number(r.taobao_discount || 0), 0), 佣金: storesWithPlatform.reduce((s: number, r: any) => s + Number(r.taobao_commission || 0), 0) },
    { name: '京东', 实收: totalJd, 折扣: storesWithPlatform.reduce((s: number, r: any) => s + Number(r.jd_discount || 0), 0), 佣金: storesWithPlatform.reduce((s: number, r: any) => s + Number(r.jd_commission || 0), 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">三平台经济性 · 营销方案ROI · 优惠结构 · {month}</p>
        </div>
        <MonthPicker month={month} onChange={setMonth} />
      </div>

      {/* 概览指标 */}
      <CollapsibleSection title="平台概览" subtitle="三平台合并加权成本率">
        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
          <MetricCard title="平台总实收" value={totalPlatformReceived} format="currency" description="美团+淘宝+京东三平台实收合计" />
          <MetricCard title="合并加权成本率" value={blendedCostRate} format="percent" description="(折扣+佣金)÷实收，越高平台让利负担越大" />
          <MetricCard title="高成本门店(≥38%)" value={highCostStores.length} format="number" description="任一平台成本率≥38%的门店数" />
          <MetricCard title="营销方案数" value={marketingRows.length} format="number" description="活跃营销方案数量" />
        </div>
      </CollapsibleSection>

      {/* 三平台对比图 */}
      <CollapsibleSection title="三平台实收与成本对比" subtitle="实收、折扣、佣金金额对比">
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={platformChartData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" tick={{ fontSize: 12 }} />
            <YAxis tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} tick={{ fontSize: 10 }} />
            <Tooltip formatter={(v: any) => formatCurrency(v)} />
            <Legend />
            <Bar dataKey="实收" fill="#3b82f6" />
            <Bar dataKey="折扣" fill="#eab308" />
            <Bar dataKey="佣金" fill="#ef4444" />
          </BarChart>
        </ResponsiveContainer>
      </CollapsibleSection>

      {/* 门店平台经济性 */}
      <CollapsibleSection title={`门店平台经济性 (${storesWithPlatform.length})`} subtitle="成本率 = (折扣 + 佣金) ÷ 实收 × 100%　|　≥38%红色警示，35-38%黄色关注，<35%绿色健康">
        <FilterableTable
          data={storesWithPlatform}
          filterKey="store_name"
          filterLabel="全部门店"
          sortOptions={[
            { key: 'meituan_received', label: '美团实收' },
            { key: 'meituan_cost_rate_pct', label: '美团成本率' },
            { key: 'taobao_received', label: '淘宝实收' },
            { key: 'jd_received', label: '京东实收' },
            { key: 'store_name', label: '门店' },
          ]}
          defaultSort="meituan_received"
          defaultOrder="desc"
          columns={[
            { key: 'store_name', label: '门店' },
            { key: 'meituan_received', label: '美团实收', align: 'right', render: (r) => formatCurrency(r.meituan_received) },
            { key: 'meituan_cost_rate_pct', label: '美团成本率', align: 'right', render: (r) => {
              const v = Number(r.meituan_cost_rate_pct || 0)
              return v > 0 ? <span className={v >= 38 ? 'font-medium text-red-600' : v >= 35 ? 'text-yellow-600' : 'text-green-600'}>{v.toFixed(1)}%</span> : <span className="text-muted-foreground">-</span>
            }},
            { key: 'taobao_received', label: '淘宝实收', align: 'right', render: (r) => formatCurrency(r.taobao_received) },
            { key: 'taobao_cost_rate_pct', label: '淘宝成本率', align: 'right', render: (r) => {
              const v = Number(r.taobao_cost_rate_pct || 0)
              return v > 0 ? <span className={v >= 38 ? 'font-medium text-red-600' : v >= 35 ? 'text-yellow-600' : 'text-green-600'}>{v.toFixed(1)}%</span> : <span className="text-muted-foreground">-</span>
            }},
            { key: 'jd_received', label: '京东实收', align: 'right', render: (r) => formatCurrency(r.jd_received) },
            { key: 'jd_cost_rate_pct', label: '京东成本率', align: 'right', render: (r) => {
              const v = Number(r.jd_cost_rate_pct || 0)
              return v > 0 ? <span className={v >= 38 ? 'font-medium text-red-600' : v >= 35 ? 'text-yellow-600' : 'text-green-600'}>{v.toFixed(1)}%</span> : <span className="text-muted-foreground">-</span>
            }},
            { key: 'best_platform', label: '经济性优', align: 'center', render: (r) => {
              const platforms: { name: string; rate: number; received: number }[] = []
              if (Number(r.meituan_received) > 0) platforms.push({ name: '美团', rate: Number(r.meituan_cost_rate_pct || 0), received: Number(r.meituan_received) })
              if (Number(r.taobao_received) > 0) platforms.push({ name: '淘宝', rate: Number(r.taobao_cost_rate_pct || 0), received: Number(r.taobao_received) })
              if (Number(r.jd_received) > 0) platforms.push({ name: '京东', rate: Number(r.jd_cost_rate_pct || 0), received: Number(r.jd_received) })
              if (platforms.length === 0) return <span className="text-muted-foreground">-</span>
              const best = platforms.reduce((a, b) => a.rate < b.rate ? a : b)
              const worst = platforms.reduce((a, b) => a.rate > b.rate ? a : b)
              const gap = (worst.rate - best.rate).toFixed(1)
              const color = best.name === '美团' ? 'text-blue-600' : best.name === '淘宝' ? 'text-green-600' : 'text-purple-600'
              return <span className={`font-medium ${color}`}>{best.name} <span className="text-xs text-muted-foreground">(-{gap}%)</span></span>
            }},
          ]}
        />
      </CollapsibleSection>

      {/* 营销方案ROI */}
      <CollapsibleSection title={`营销方案分析 (${marketingRows.length})`} subtitle="各营销方案的订单、实收、优惠率与毛利率">
        {marketingRows.length > 0 && (
          <div className="mb-3 grid grid-cols-1 gap-2 md:grid-cols-5">
            {marketingRows.slice(0, 5).map((r: any, i: number) => {
              const dr = Number(r.discount_rate_pct || 0)
              const mr = Number(r.theoretical_margin_pct || 0)
              return (
                <div key={r.marketing_plan} className="rounded-lg border p-3">
                  <div className="flex items-center gap-2">
                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-foreground">{i + 1}</span>
                    <span className="text-sm font-medium truncate">{r.marketing_plan}</span>
                  </div>
                  <div className="mt-2 space-y-1 text-xs">
                    <div className="flex justify-between"><span className="text-muted-foreground">实收</span><span className="font-medium">{formatCurrency(r.received)}</span></div>
                    <div className="flex justify-between"><span className="text-muted-foreground">消费额</span><span>{formatCurrency(r.consumption)}</span></div>
                    <div className="flex justify-between"><span className="text-muted-foreground">优惠额</span><span className="text-red-600">{formatCurrency(r.discounts)}</span></div>
                    <div className="flex justify-between"><span className="text-muted-foreground">账单数</span><span>{formatNumber(r.bill_count)}</span></div>
                    <div className="flex justify-between"><span className="text-muted-foreground">客单价</span><span>{formatCurrency(r.avg_bill_value)}</span></div>
                    <div className="flex justify-between"><span className="text-muted-foreground">优惠率</span><span className={dr >= 25 ? 'font-medium text-red-600' : dr >= 15 ? 'text-yellow-600' : 'text-green-600'}>{dr.toFixed(1)}%</span></div>
                    <div className="flex justify-between"><span className="text-muted-foreground">毛利率</span><span className={mr >= 70 ? 'text-green-600' : mr >= 60 ? 'text-yellow-600' : 'text-red-600'}>{mr.toFixed(1)}%</span></div>
                  </div>
                </div>
              )
            })}
          </div>
        )}
        <FilterableTable
          data={marketingRows}
          filterKey="marketing_plan"
          filterLabel="全部方案"
          sortOptions={[
            { key: 'received', label: '实收' },
            { key: 'consumption', label: '消费额' },
            { key: 'discounts', label: '优惠额' },
            { key: 'bill_count', label: '账单数' },
            { key: 'avg_bill_value', label: '客单价' },
            { key: 'discount_rate_pct', label: '优惠率' },
            { key: 'theoretical_margin_pct', label: '毛利率' },
          ]}
          defaultSort="received"
          defaultOrder="desc"
          columns={[
            { key: 'marketing_plan', label: '营销方案' },
            { key: 'bill_count', label: '账单数', align: 'right', render: (r) => formatNumber(r.bill_count) },
            { key: 'consumption', label: '消费额', align: 'right', render: (r) => formatCurrency(r.consumption) },
            { key: 'discounts', label: '优惠额', align: 'right', render: (r) => formatCurrency(r.discounts) },
            { key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
            { key: 'avg_bill_value', label: '客单价', align: 'right', render: (r) => formatCurrency(r.avg_bill_value) },
            { key: 'discount_rate_pct', label: '优惠率', align: 'right', render: (r) => {
              const v = Number(r.discount_rate_pct || 0)
              return <span className={v >= 25 ? 'font-medium text-red-600' : v >= 15 ? 'text-yellow-600' : 'text-green-600'}>{v.toFixed(1)}%</span>
            }},
            { key: 'theoretical_margin_pct', label: '理论毛利率', align: 'right', render: (r) => formatPercent(r.theoretical_margin_pct) },
          ]}
        />
      </CollapsibleSection>
    </div>
  )
}
