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 } from 'recharts'
import api from '@/lib/api'
import { MetricCard } from '@/components/MetricCard'
import { Badge } from '@/components/Badge'
import { DataTable } from '@/components/DataTable'
import { Pagination } from '@/components/Pagination'
import { LoadingSpinner } from '@/components/LoadingSpinner'
import { CollapsibleSection } from '@/components/CollapsibleSection'
import { formatNumber, formatCurrency, formatPercent } from '@/lib/utils'
import { useState, useMemo } from 'react'

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

export function DashboardPage() {
  const navigate = useNavigate()
  const [priorityPage, setPriorityPage] = useState(1)

  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: 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: loopHealth, isLoading: loopLoading } = useQuery({
    queryKey: ['loop-health'],
    queryFn: () => api.get('/tasks/loop-health'),
  })

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

  const od = (overview 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 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 pagedP0P1 = useMemo(() => p0p1Stores.slice((priorityPage - 1) * PAGE_SIZE, priorityPage * PAGE_SIZE), [p0p1Stores, priorityPage])

  // 闭环健康度综合得分
  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">全部门店经营总览 · 2026年4月</p>
        </div>
        <div className="flex gap-2">
          <span className="rounded-md bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">{totalStores} 家门店</span>
          <span className="rounded-md bg-red-50 px-3 py-1 text-xs font-medium text-red-700">红色 {riskSummary['红色'] || 0}</span>
          <span className="rounded-md bg-yellow-50 px-3 py-1 text-xs font-medium text-yellow-700">黄色 {riskSummary['黄色'] || 0}</span>
          <span className="rounded-md bg-green-50 px-3 py-1 text-xs font-medium text-green-700">绿色 {riskSummary['绿色'] || 0}</span>
        </div>
      </div>

      {/* 经营指标 */}
      <CollapsibleSection title="经营指标" subtitle="实收、账单数、客单价等核心经营数据">
        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
          <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="需要重点整改的门店数：P0为紧急修复，P1为重点整改" />
        </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>

      {/* 闭环健康度 */}
      {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 grid-cols-2 gap-3 md:grid-cols-5">
            {[
              { 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>
        </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={80}
                dataKey="value"
                label={({ name, value, pct }: any) => `${name} ${value}家 (${pct}%)`}
              >
                {riskPieData.map((entry) => (
                  <Cell key={entry.name} fill={RISK_COLORS[entry.name as keyof typeof RISK_COLORS] || '#gray'} />
                ))}
              </Pie>
              <Tooltip />
              <Legend />
            </PieChart>
          </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>
        }
      >
        <Pagination page={priorityPage} pageSize={PAGE_SIZE} total={p0p1Stores.length} onPageChange={setPriorityPage} />
        <div className="mt-3">
        <DataTable
          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) },
          ]}
          data={pagedP0P1}
          onRowClick={(r) => navigate(`/stores/${r.store_code}`)}
        />
        </div>
      </CollapsibleSection>
    </div>
  )
}