import { useQuery, useMutation, useQueryClient } 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, PieChart, Pie, Cell, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts'
import { Tabs } from '@/components/Tabs'
import { MonthPicker } from '@/components/MonthPicker'

const GRADE_COLORS: Record<string, string> = { A: '#22c55e', B: '#3b82f6', C: '#eab308', D: '#ef4444' }
const RISK_COLORS: Record<string, string> = { '红色': '#ef4444', '黄色': '#eab308', '绿色': '#22c55e' }

export function StoreGradePage() {
  const [month, setMonth] = useState(new Date().toISOString().slice(0, 7))
  const [selectedStore, setSelectedStore] = useState<any>(null)
  const [tab, setTab] = useState('grade')
  const queryClient = useQueryClient()

  const { data: gradeData, isLoading: gradeLoading } = useQuery({
    queryKey: ['store-grade/grades', month],
    queryFn: () => api.get('/store-grade/grades', { params: { month } }),
    enabled: tab === 'grade',
  })

  const { data: closureData, isLoading: closureLoading } = useQuery({
    queryKey: ['store-grade/closure-analysis', month],
    queryFn: () => api.get('/store-grade/closure-analysis', { params: { month } }),
    enabled: tab === 'closure',
  })

  const autoGradeMutation = useMutation({
    mutationFn: () => api.post('/store-grade/auto-grade', null, { params: { month } }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['store-grade/grades'] })
    },
  })

  const gradeRows = (gradeData as any)?.data || []

  const gradeDistribution = gradeRows.reduce((acc: Record<string, number>, r: any) => {
    acc[r.grade] = (acc[r.grade] || 0) + 1
    return acc
  }, {})
  const gradePieData = Object.entries(gradeDistribution).map(([name, value]) => ({ name: `${name}级`, value }))

  const riskDistribution = gradeRows.reduce((acc: Record<string, number>, r: any) => {
    acc[r.risk_level] = (acc[r.risk_level] || 0) + 1
    return acc
  }, {})
  const riskPieData = [
    { name: '红色', value: riskDistribution['红色'] || 0 },
    { name: '黄色', value: riskDistribution['黄色'] || 0 },
    { name: '绿色', value: riskDistribution['绿色'] || 0 },
  ]

  const avgScore = gradeRows.length > 0
    ? gradeRows.reduce((s: number, r: any) => s + Number(r.overall_score || 0), 0) / gradeRows.length
    : 0
  const aGradeCount = gradeDistribution.A || 0
  const dGradeCount = gradeDistribution.D || 0
  const redRiskCount = riskDistribution['红色'] || 0

  if (gradeLoading && tab === 'grade') {
    return <LoadingSpinner text="加载门店分级数据..." />
  }
  if (closureLoading && tab === 'closure') {
    return <LoadingSpinner text="加载关停测算数据..." />
  }

  const closure = (closureData as any)?.data || {}
  const closureSummary = closure.summary || {}
  const closureStores = closure.stores || []

  const closurePieData = [
    { name: '建议关停', value: closureSummary.recommend_close || 0 },
    { name: '整改观察', value: closureSummary.recommend_rectify || 0 },
    { name: '持续经营', value: (closureSummary.total_stores || 0) - (closureSummary.recommend_close || 0) - (closureSummary.recommend_rectify || 0) },
  ].filter(d => d.value > 0)

  const CLOSURE_COLORS: Record<string, string> = { '建议关停': '#ef4444', '整改观察': '#eab308', '持续经营': '#22c55e' }

  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-2">
          <MonthPicker month={month} onChange={setMonth} />
          {tab === 'grade' && (
            <button
              onClick={() => autoGradeMutation.mutate()}
              disabled={autoGradeMutation.isPending}
              className="rounded bg-primary px-3 py-1 text-sm text-primary-foreground disabled:opacity-50"
            >
              {autoGradeMutation.isPending ? '分级中...' : '自动分级'}
            </button>
          )}
        </div>
      </div>

      <Tabs tabs={[
        { key: 'grade', label: '门店分级' },
        { key: 'closure', label: '关停测算' },
      ]} active={tab} onChange={setTab} />

      {tab === 'closure' && (
        <>
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            <MetricCard title="门店总数" value={closureSummary.total_stores || 0} format="number" description="参与测算的门店总数" />
            <MetricCard title="建议关停" value={closureSummary.recommend_close || 0} format="number" description="持续亏损且D级门店" status="bad" />
            <MetricCard title="整改观察" value={closureSummary.recommend_rectify || 0} format="number" description="亏损但有基础的门店" status="warn" />
            <MetricCard title="关停可月省" value={closureSummary.total_monthly_savings || 0} format="currency" description="关停门店每月可节省亏损" status="good" />
          </div>
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            <MetricCard title="关停总成本" value={closureSummary.total_closure_cost || 0} format="currency" description="遣散+违约+资产处置" status="bad" />
            <MetricCard title="12月预计亏损" value={closureSummary.total_projected_loss || 0} format="currency" description="不关停继续经营的预计亏损" status="bad" />
          </div>

          {closurePieData.length > 0 && (
            <CollapsibleSection title="关停建议分布" subtitle="按盈利状况和综合评分分类">
              <ResponsiveContainer width="100%" height={200}>
                <PieChart>
                  <Pie data={closurePieData} cx="50%" cy="50%" outerRadius={60} dataKey="value"
                    labelLine={false} label={({ name, value }: any) => <tspan fontSize={11}>{`${name}: ${value}`}</tspan>}>
                    {closurePieData.map((e, i) => <Cell key={i} fill={CLOSURE_COLORS[e.name] || '#999'} />)}
                  </Pie>
                  <Tooltip formatter={(v: any) => [formatNumber(v), '门店数']} />
                  <Legend />
                </PieChart>
              </ResponsiveContainer>
            </CollapsibleSection>
          )}

          <CollapsibleSection title={`关停测算明细 (${closureStores.length})`} subtitle="含关停成本、继续经营亏损、回本期、建议">
            <FilterableTable
              data={closureStores}
              filterKey="recommendation"
              filterLabel="全部建议"
              sortOptions={[
                { key: 'monthly_profit', label: '月利润' },
                { key: 'total_closure_cost', label: '关停成本' },
                { key: 'projected_12m_loss', label: '12月亏损' },
                { key: 'payback_months', label: '回本月数' },
                { key: 'overall_score', label: '综合分' },
              ]}
              defaultSort="monthly_profit"
              defaultOrder="asc"
              columns={[
                { key: 'store_name', label: '门店名称' },
                { key: 'region', label: '区域' },
                { key: 'grade', label: '分级', align: 'center', render: (r) => {
                  const colors: Record<string, string> = { A: 'text-green-600', B: 'text-blue-600', C: 'text-yellow-600', D: 'text-red-600' }
                  return <span className={`font-bold ${colors[r.grade] || ''}`}>{r.grade}</span>
                }},
                { key: 'monthly_revenue', label: '月收入', align: 'right', render: (r) => formatCurrency(r.monthly_revenue) },
                { key: 'monthly_profit', label: '月利润', align: 'right', render: (r) => {
                  const v = Number(r.monthly_profit || 0)
                  return <span className={v < 0 ? 'text-red-600 font-medium' : 'text-green-600'}>{formatCurrency(v)}</span>
                }},
                { key: 'monthly_rent', label: '月租', align: 'right', render: (r) => formatCurrency(r.monthly_rent) },
                { key: 'monthly_wage', label: '月人工', align: 'right', render: (r) => formatCurrency(r.monthly_wage) },
                { key: 'total_closure_cost', label: '关停成本', align: 'right', render: (r) => <span className="text-red-600">{formatCurrency(r.total_closure_cost)}</span> },
                { key: 'projected_12m_loss', label: '12月亏损', align: 'right', render: (r) => {
                  const v = Number(r.projected_12m_loss || 0)
                  return v ? <span className="text-red-600">{formatCurrency(v)}</span> : '-'
                }},
                { key: 'monthly_savings_if_closed', label: '月节省', align: 'right', render: (r) => {
                  const v = Number(r.monthly_savings_if_closed || 0)
                  return v ? <span className="text-green-600">{formatCurrency(v)}</span> : '-'
                }},
                { key: 'payback_months', label: '回本(月)', align: 'right', render: (r) => r.payback_months ? `${Number(r.payback_months).toFixed(1)}月` : '-' },
                { key: 'recommendation', label: '建议', align: 'center', render: (r) => {
                  const colors: Record<string, string> = { '建议关停': 'bg-red-500 text-white', '整改观察3个月': 'bg-yellow-500 text-white', '重点整改': 'bg-blue-500 text-white', '持续经营': 'bg-green-500 text-white' }
                  return <span className={`rounded px-2 py-0.5 text-xs ${colors[r.recommendation] || ''}`}>{r.recommendation}</span>
                }},
                { key: 'reason', label: '原因' },
              ]}
            />
          </CollapsibleSection>
        </>
      )}

      {tab === 'grade' && (
        <>

      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <MetricCard title="门店总数" value={gradeRows.length} format="number" description="参与分级的门店总数" />
        <MetricCard title="平均综合分" value={avgScore} format="number" description="所有门店综合评分平均值" status={avgScore >= 75 ? 'good' : avgScore >= 60 ? 'warn' : 'bad'} />
        <MetricCard title="A级门店" value={aGradeCount} format="number" description="综合分≥85的优秀门店" status="good" />
        <MetricCard title="高风险门店" value={redRiskCount} format="number" description="风险等级红色的门店" status={redRiskCount > 0 ? 'bad' : 'good'} />
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <CollapsibleSection title="门店分级分布" subtitle="综合分=达成率40%+毛利率25%+会员占比15%+风险20% | A≥85 · B≥70 · C≥50 · D<50">
          <ResponsiveContainer width="100%" height={250}>
            <PieChart>
              <Pie data={gradePieData} cx="50%" cy="50%" outerRadius={70} dataKey="value"
                labelLine={false} label={({ name, value }: any) => <tspan fontSize={11}>{`${name}: ${value}`}</tspan>}>
                {gradePieData.map((entry, i) => <Cell key={i} fill={GRADE_COLORS[entry.name[0]] || '#999'} />)}
              </Pie>
              <Tooltip formatter={(v: any) => [formatNumber(v), '门店数']} />
              <Legend />
            </PieChart>
          </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 }: any) => <tspan fontSize={11}>{`${name}: ${value}`}</tspan>}>
                {riskPieData.map((entry, i) => <Cell key={i} fill={RISK_COLORS[entry.name] || '#999'} />)}
              </Pie>
              <Tooltip formatter={(v: any) => [formatNumber(v), '门店数']} />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </CollapsibleSection>
      </div>

      <CollapsibleSection title={`门店分级明细 (${gradeRows.length})`} subtitle="综合分=达成率40%+毛利率25%+会员占比15%+风险20% | A≥85 · B≥70 · C≥50 · D<50">
        <FilterableTable
          data={gradeRows}
          filterKey="grade"
          filterLabel="全部分级"
          sortOptions={[
            { key: 'overall_score', label: '综合分' },
            { key: 'revenue_achievement_pct', label: '达成率' },
            { key: 'store_name', label: '门店' },
          ]}
          defaultSort="overall_score"
          defaultOrder="desc"
          onRowClick={(r) => setSelectedStore(r)}
          columns={[
            { key: 'store_code', label: '门店编码' },
            { key: 'store_name', label: '门店名称' },
            { key: 'region', label: '区域' },
            { key: 'grade', label: '分级', align: 'center', render: (r) => {
              const colors: Record<string, string> = { A: 'text-green-600', B: 'text-blue-600', C: 'text-yellow-600', D: 'text-red-600' }
              return <span className={`font-bold ${colors[r.grade] || ''}`}>{r.grade}</span>
            }},
            { key: 'risk_level', label: '风险', align: 'center', render: (r) => {
              const colors: Record<string, string> = { '红色': 'bg-red-500 text-white', '黄色': 'bg-yellow-500 text-white', '绿色': 'bg-green-500 text-white' }
              return <span className={`rounded px-2 py-0.5 text-xs ${colors[r.risk_level] || ''}`}>{r.risk_level || '-'}</span>
            }},
            { key: 'overall_score', label: '综合分', align: 'right', render: (r) => Number(r.overall_score || 0).toFixed(1) },
            { key: 'revenue_achievement_pct', label: '营收达成率', align: 'right', render: (r) => {
              const v = Number(r.revenue_achievement_pct || 0)
              return <span className={v >= 100 ? 'text-green-600' : v >= 80 ? 'text-yellow-600' : 'text-red-600'}>{v.toFixed(1)}%</span>
            }},
            { key: 'reason', label: '分级原因' },
          ]}
        />
      </CollapsibleSection>

      {selectedStore && <StoreDetailModal store={selectedStore} onClose={() => setSelectedStore(null)} />}
        </>
      )}
    </div>
  )
}

const GRADE_DIMENSIONS = [
  { key: 'revenue_achievement_pct', label: '营收达成', max: 100 },
  { key: 'overall_score', label: '综合分', max: 100 },
  { key: 'margin_pct', label: '毛利率', max: 50 },
  { key: 'anomaly_rate', label: '异常率', max: 20, inverse: true },
]

function StoreDetailModal({ store, onClose }: { store: any; onClose: () => void }) {
  const gradeColor = GRADE_COLORS[store.grade] || '#999'
  const riskColor = RISK_COLORS[store.risk_level] || '#999'

  const radarData = GRADE_DIMENSIONS.map(d => {
    const raw = Number(store[d.key] || 0)
    const pct = d.inverse ? Math.max(0, 100 - (raw / d.max) * 100) : Math.min((raw / d.max) * 100, 100)
    return { dimension: d.label, score: Math.round(pct), fullMark: 100 }
  })

  const metrics = [
    { label: '门店编码', value: store.store_code },
    { label: '区域', value: store.region || '-' },
    { label: '分级', value: store.grade, color: gradeColor },
    { label: '综合分', value: Number(store.overall_score || 0).toFixed(1) },
    { label: '营收达成率', value: `${Number(store.revenue_achievement_pct || 0).toFixed(1)}%` },
    { label: '营收', value: formatCurrency(store.revenue) },
    { label: '毛利率', value: formatPercent(store.margin_pct) },
    { label: '优惠率', value: store.discount_rate != null ? `${Number(store.discount_rate).toFixed(1)}%` : '-' },
    { label: '异常率', value: store.anomaly_rate != null ? `${Number(store.anomaly_rate).toFixed(1)}%` : '-' },
    { label: '会员占比', value: store.member_pct != null ? `${Number(store.member_pct).toFixed(1)}%` : '-' },
    { label: '客单价', value: formatCurrency(store.avg_bill_value) },
    { label: '活跃天数', value: store.active_days != null ? `${store.active_days}天` : '-' },
    { label: '风险等级', value: store.risk_level || '-', color: riskColor },
  ]

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
      <div className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-lg border bg-card p-6 shadow-lg" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <h2 className="text-lg font-bold">{store.store_name}</h2>
            <span className="rounded px-2 py-0.5 text-xs font-bold text-white" style={{ background: gradeColor }}>{store.grade}级</span>
            <span className="rounded px-2 py-0.5 text-xs font-medium text-white" style={{ background: riskColor }}>
              {store.risk_level || '-'}
            </span>
          </div>
          <button onClick={onClose} className="text-muted-foreground hover:text-foreground text-xl">✕</button>
        </div>

        <div className="mt-4 grid gap-4 md:grid-cols-2">
          <div>
            <ResponsiveContainer width="100%" height={250}>
              <RadarChart data={radarData}>
                <PolarGrid />
                <PolarAngleAxis dataKey="dimension" tick={{ fontSize: 10 }} />
                <PolarRadiusAxis angle={90} domain={[0, 100]} tick={{ fontSize: 8 }} />
                <Radar dataKey="score" name="得分" stroke={gradeColor} fill={gradeColor} fillOpacity={0.3} />
                <Tooltip formatter={(v: any) => [v, '得分']} />
              </RadarChart>
            </ResponsiveContainer>
          </div>

          <div className="space-y-2">
            {metrics.map(m => (
              <div key={m.label} className="flex items-center justify-between border-b pb-1 text-sm">
                <span className="text-muted-foreground">{m.label}</span>
                <span className="font-medium" style={m.color ? { color: m.color } : undefined}>{m.value}</span>
              </div>
            ))}
            {store.reason && (
              <div className="pt-2 text-xs text-muted-foreground">
                <span className="font-medium">分级原因：</span>{store.reason}
              </div>
            )}
            {store.primary_issue && (
              <div className="pt-1 text-xs text-muted-foreground">
                <span className="font-medium">风险原因：</span>{store.primary_issue}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}