import { useQuery } from '@tanstack/react-query'
import { useNavigate } from 'react-router-dom'
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, ResponsiveContainer, ScatterChart, Scatter, ZAxis, ReferenceLine, Cell } from 'recharts'
import { StoreMap } from '@/components/StoreMap'
import { MonthPicker } from '@/components/MonthPicker'

const SCENE_COLORS: Record<string, string> = {
  '办公园区': '#3b82f6', '商场商业体': '#a855f7', '社区居民': '#22c55e', '街边综合': '#dc2626', '交通枢纽': '#f97316', '校园档口': '#06b6d4', '特殊业态': '#6b7280',
}
const RISK_COLORS: Record<string, string> = { '高风险：距离近且至少一家经营承压': '#ef4444', '中风险：需核查客群和配送圈重叠': '#eab308', '观察': '#22c55e' }

type SiteTab = 'benchmark' | 'replication' | 'overlap' | 'district'

const TABS: { key: SiteTab; label: string }[] = [
  { key: 'benchmark', label: '分段基准' },
  { key: 'replication', label: '复制评分' },
  { key: 'overlap', label: '重叠风险' },
  { key: 'district', label: '区域基准' },
]

export function SiteSelectionPage() {
  const navigate = useNavigate()
  const [tab, setTab] = useState<SiteTab>('benchmark')
  const [sceneFilter, setSceneFilter] = useState('')
  const [month, setMonth] = useState('2026-04')

  const { data: profileData, isLoading: profileLoading } = useQuery({
    queryKey: ['site-selection/profile', month],
    queryFn: () => api.get('/site-selection/profile', { params: { month } }),
  })

  const { data: segData, isLoading: segLoading } = useQuery({
    queryKey: ['site-selection/segment-benchmark', month],
    queryFn: () => api.get('/site-selection/segment-benchmark', { params: { month } }),
  })

  const { data: replData, isLoading: replLoading } = useQuery({
    queryKey: ['site-selection/replication', month],
    queryFn: () => api.get('/site-selection/replication', { params: { month } }),
  })

  const { data: overlapData, isLoading: overlapLoading } = useQuery({
    queryKey: ['site-selection/overlap-risk', month],
    queryFn: () => api.get('/site-selection/overlap-risk', { params: { month } }),
  })

  const { data: districtData, isLoading: districtLoading } = useQuery({
    queryKey: ['site-selection/district-benchmark', month],
    queryFn: () => api.get('/site-selection/district-benchmark', { params: { month } }),
  })

  const profileRows = ((profileData as any)?.data || []).filter((r: any) => !sceneFilter || r.site_scene === sceneFilter)
  const segRows = (segData as any)?.data || []
  const replRows = (replData as any)?.data || []
  const overlapRows = (overlapData as any)?.data || []
  const districtRows = (districtData as any)?.data || []

  const pageLoading = profileLoading || segLoading || replLoading || overlapLoading || districtLoading

  if (pageLoading) {
    return <LoadingSpinner text="加载选址分析数据..." />
  }

  const totalStores = profileRows.length
  const totalScenes = Object.keys(profileRows.reduce((acc: any, r: any) => { acc[r.site_scene] = true; return acc }, {})).length
  const highRiskCount = overlapRows.filter((r: any) => r.overlap_risk?.startsWith('高风险')).length
  const topReplication = replRows.filter((r: any) => r.replication_recommendation === '优先提炼选址原型').length

  const scatterData = profileRows.map((r: any) => ({
    store_name: r.store_name,
    area_sqm: Number(r.area_sqm || 0),
    received_per_sqm: Number(r.monthly_received_per_sqm || 0),
    received: Number(r.received || 0),
    site_scene: r.site_scene,
  }))

  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} · {totalStores}家经营门店</p>
        </div>
        <MonthPicker month={month} onChange={setMonth} />
      </div>

      {/* 门店分布地图（左） + 指标+面积坪效分布（右） 左右并排 */}
      <div className="grid gap-4 lg:grid-cols-2">
        {/* 左：门店分布地图 */}
        <CollapsibleSection title="门店分布地图" subtitle="按场景类型标注门店地理位置，点击查看详情">
          <StoreMap stores={profileRows} height={660} />
        </CollapsibleSection>

        {/* 右：指标 + 面积坪效散点图 */}
        <div className="flex flex-col gap-4 lg:h-[760px]">
          {/* 概览指标 — 两行靠左 */}
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
            <MetricCard title="标准门店数" value={totalStores} format="number" description="有面积和经营数据的标准门店" />
            <MetricCard title="场景类型" value={totalScenes} format="number" description="办公/社区/商场/街边/交通枢纽等" />
            <MetricCard title="高风险重叠对" value={highRiskCount} format="number" description="距离<1km且至少一家经营承压" />
            <MetricCard title="优先提炼原型" value={topReplication} format="number" description="复制评分≥75且问题数≤1" />
          </div>

          <CollapsibleSection title="面积 × 坪效分布" subtitle="每个点代表一家门店，颜色区分场景">
            <ResponsiveContainer width="100%" height={550}>
              <ScatterChart margin={{ left: 20, right: 20, top: 10, bottom: 10 }}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis type="number" dataKey="area_sqm" name="面积(㎡)" tick={{ fontSize: 10 }} label={{ value: '面积(㎡)', position: 'bottom', offset: 0, fontSize: 11 }} />
                <YAxis type="number" dataKey="received_per_sqm" name="月坪效(元/㎡)" tick={{ fontSize: 10 }} tickFormatter={(v) => v >= 1000 ? `${(v / 1000).toFixed(1)}k` : v} />
                <ZAxis type="number" dataKey="received" range={[40, 400]} name="实收" />
                <Tooltip
                  cursor={{ strokeDasharray: '3 3' }}
                  content={({ payload }: any) => {
                    if (!payload || !payload.length) return null
                    const d = payload[0].payload
                    return (
                      <div className="rounded border bg-white p-2 text-xs shadow">
                        <p className="font-bold">{d.store_name}</p>
                        <p>场景: {d.site_scene}</p>
                        <p>面积: {d.area_sqm}㎡</p>
                        <p>月坪效: {formatCurrency(d.received_per_sqm)}</p>
                        <p>实收: {formatCurrency(d.received)}</p>
                      </div>
                    )
                  }}
                />
                <Scatter data={scatterData}>
                  {scatterData.map((entry: any, i: number) => (
                    <Cell key={i} fill={SCENE_COLORS[entry.site_scene] || '#999'} />
                  ))}
                </Scatter>
              </ScatterChart>
            </ResponsiveContainer>
            <div className="mt-2 flex flex-wrap gap-3 text-xs">
              {Object.entries(SCENE_COLORS).map(([scene, color]) => (
                <span key={scene} className="flex items-center gap-1">
                  <span className="inline-block h-3 w-3 rounded-full" style={{ background: color }} />
                  {scene}
                </span>
              ))}
            </div>
          </CollapsibleSection>
        </div>
      </div>

      {/* Tab 切换 */}
      <div className="flex gap-2 border-b">
        {TABS.map((t) => (
          <button
            key={t.key}
            onClick={() => setTab(t.key)}
            className={`px-4 py-2 text-sm font-medium transition-colors ${
              tab === t.key ? 'border-b-2 border-primary text-primary' : 'text-muted-foreground hover:text-foreground'
            }`}
          >
            {t.label}
          </button>
        ))}
      </div>

      {/* 分段基准 */}
      {tab === 'benchmark' && (
        <div className="space-y-4">
          <CollapsibleSection title={`场景 × 面积分段基准 (${segRows.length})`} subtitle="各场景各面积段的经营基准，按坪效降序">
            <FilterableTable
              data={segRows}
              sortOptions={[
                { key: 'avg_received_per_sqm', label: '平均坪效' },
                { key: 'median_received_per_sqm', label: '中位坪效' },
                { key: 'avg_received', label: '平均实收' },
                { key: 'site_scene', label: '场景' },
              ]}
              defaultSort="avg_received_per_sqm"
              defaultOrder="desc"
              filterKey="site_scene"
              filterLabel="全部场景"
              columns={[
                { key: 'site_scene', label: '场景' },
                { key: 'area_band', label: '面积段' },
                { key: 'store_count', label: '门店数', align: 'center' },
                { key: 'avg_area_sqm', label: '平均面积', align: 'right', render: (r) => `${r.avg_area_sqm}㎡` },
                { key: 'avg_received', label: '平均实收', align: 'right', render: (r) => formatCurrency(r.avg_received) },
                { key: 'median_received', label: '中位实收', align: 'right', render: (r) => formatCurrency(r.median_received) },
                { key: 'avg_received_per_sqm', label: '平均坪效', align: 'right', render: (r) => formatCurrency(r.avg_received_per_sqm) },
                { key: 'median_received_per_sqm', label: '中位坪效', align: 'right', render: (r) => formatCurrency(r.median_received_per_sqm) },
                { key: 'avg_bill_value', label: '客单价', align: 'right', render: (r) => formatCurrency(r.avg_bill_value) },
                { key: 'avg_repeat_rate_pct', label: '复购率', align: 'right', render: (r) => formatPercent(r.avg_repeat_rate_pct) },
              ]}
            />
          </CollapsibleSection>

          <CollapsibleSection title="门店画像明细" subtitle="全部标准门店选址画像，可按场景筛选">
            <FilterableTable
              data={profileRows}
              sortOptions={[
                { key: 'received', label: '实收' },
                { key: 'monthly_received_per_sqm', label: '坪效' },
                { key: 'area_sqm', label: '面积' },
                { key: 'avg_bill_value', label: '客单价' },
                { key: 'repeat_rate_pct', label: '复购率' },
              ]}
              defaultSort="received"
              defaultOrder="desc"
              filterKey="site_scene"
              filterLabel="全部场景"
              onRowClick={(r) => navigate(`/stores/${r.store_code}`)}
              columns={[
                { key: 'store_name', label: '门店' },
                { key: 'site_scene', label: '场景', render: (r) => <span className="rounded px-2 py-0.5 text-xs" style={{ background: (SCENE_COLORS[r.site_scene] || '#999') + '20', color: SCENE_COLORS[r.site_scene] || '#999' }}>{r.site_scene}</span> },
                { key: 'area_band', label: '面积段' },
                { key: 'area_sqm', label: '面积(㎡)', align: 'right', render: (r) => r.area_sqm ? `${r.area_sqm}㎡` : '-' },
                { key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
                { key: 'monthly_received_per_sqm', label: '坪效', align: 'right', render: (r) => formatCurrency(r.monthly_received_per_sqm) },
                { key: 'avg_bill_value', label: '客单价', align: 'right', render: (r) => formatCurrency(r.avg_bill_value) },
                { key: 'repeat_rate_pct', label: '复购率', align: 'right', render: (r) => formatPercent(r.repeat_rate_pct) },
                { key: 'actual_food_cost_rate_pct', label: '成本率', align: 'right', render: (r) => formatPercent(r.actual_food_cost_rate_pct) },
              ]}
            />
          </CollapsibleSection>
        </div>
      )}

      {/* 复制评分 */}
      {tab === 'replication' && (
        <CollapsibleSection title={`门店复制评分 (${replRows.length})`} subtitle="综合坪效、日均、复购、优惠纪律、成本、平台、执行七维评分">
          <FilterableTable
            data={replRows}
            sortOptions={[
              { key: 'site_replication_score', label: '复制评分' },
              { key: 'received', label: '实收' },
              { key: 'monthly_received_per_sqm', label: '坪效' },
              { key: 'nearest_distance_km', label: '距离' },
            ]}
            defaultSort="site_replication_score"
            defaultOrder="desc"
            filterKey="replication_recommendation"
            filterLabel="全部建议"
            onRowClick={(r) => navigate(`/stores/${r.store_code}`)}
            columns={[
              { key: 'store_name', label: '门店' },
              { key: 'site_scene', label: '场景' },
              { key: 'area_sqm', label: '面积', align: 'right', render: (r) => r.area_sqm ? `${r.area_sqm}㎡` : '-' },
              { key: 'received', label: '实收', align: 'right', render: (r) => formatCurrency(r.received) },
              { key: 'monthly_received_per_sqm', label: '坪效', align: 'right', render: (r) => formatCurrency(r.monthly_received_per_sqm) },
              { key: 'nearest_store_name', label: '最近门店' },
              { key: 'nearest_distance_km', label: '距离(km)', align: 'right', render: (r) => `${r.nearest_distance_km}km` },
              { key: 'site_replication_score', label: '复制评分', align: 'right', render: (r) => {
                const v = Number(r.site_replication_score || 0)
                return <span className={v >= 75 ? 'font-bold text-green-600' : v >= 60 ? 'text-blue-600' : v < 40 ? 'text-red-600' : ''}>{v.toFixed(2)}</span>
              } },
              { key: 'replication_recommendation', label: '复制建议', render: (r) => {
                const rec = r.replication_recommendation
                const cls = rec === '优先提炼选址原型' ? 'bg-green-100 text-green-700' : rec === '不宜作为选址标杆' ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'
                return <span className={`rounded px-2 py-0.5 text-xs ${cls}`}>{rec}</span>
              } },
              { key: 'spatial_recommendation', label: '空间建议', render: (r) => <span className="text-xs text-muted-foreground">{r.spatial_recommendation}</span> },
            ]}
          />
        </CollapsibleSection>
      )}

      {/* 重叠风险 */}
      {tab === 'overlap' && (
        <div className="space-y-4">
          <div className="grid grid-cols-3 gap-3">
            <MetricCard title="高度重叠(<1km)" value={overlapRows.filter((r: any) => r.distance_km < 1).length} format="number" description="需做顾客来源和配送圈验证" />
            <MetricCard title="较高重叠(1-2km)" value={overlapRows.filter((r: any) => r.distance_km >= 1 && r.distance_km < 2).length} format="number" description="检查道路阻隔和商圈边界" />
            <MetricCard title="观察(2-3km)" value={overlapRows.filter((r: any) => r.distance_km >= 2).length} format="number" description="不能仅用直线距离判断" />
          </div>
          <CollapsibleSection title={`空间重叠风险 (${overlapRows.length}对)`} subtitle="3公里内门店两两距离与重叠风险等级">
            <FilterableTable
              data={overlapRows}
              sortOptions={[
                { key: 'distance_km', label: '距离' },
                { key: 'received_a', label: 'A实收' },
                { key: 'received_b', label: 'B实收' },
              ]}
              defaultSort="distance_km"
              defaultOrder="asc"
              filterKey="overlap_risk"
              filterLabel="全部风险"
              columns={[
                { key: 'store_name_a', label: '门店A' },
                { key: 'store_name_b', label: '门店B' },
                { key: 'distance_km', label: '距离(km)', align: 'right', render: (r) => `${Number(r.distance_km).toFixed(2)}km` },
                { key: 'received_a', label: 'A实收', align: 'right', render: (r) => formatCurrency(r.received_a) },
                { key: 'received_b', label: 'B实收', align: 'right', render: (r) => formatCurrency(r.received_b) },
                { key: 'overlap_risk', label: '风险等级', render: (r) => {
                  const risk = r.overlap_risk
                  const color = RISK_COLORS[risk] || '#999'
                  return <span className="rounded px-2 py-0.5 text-xs font-medium" style={{ background: color + '20', color }}>{risk}</span>
                } },
              ]}
            />
          </CollapsibleSection>
        </div>
      )}

      {/* 区域基准 */}
      {tab === 'district' && (
        <div className="space-y-4">
          <CollapsibleSection title="区域基准柱状图" subtitle="各区域平均实收对比">
            <ResponsiveContainer width="100%" height={280}>
              <BarChart data={districtRows.slice(0, 15)} margin={{ left: 20 }}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="district" tick={{ fontSize: 10 }} angle={-30} textAnchor="end" height={60} />
                <YAxis tick={{ fontSize: 10 }} tickFormatter={(v) => v >= 10000 ? `${(v / 10000).toFixed(0)}万` : v} />
                <Tooltip formatter={(v: any) => formatCurrency(v)} />
                <Bar dataKey="avg_received" fill="#3b82f6" name="平均实收" />
                <Bar dataKey="median_received" fill="#22c55e" name="中位实收" />
              </BarChart>
            </ResponsiveContainer>
          </CollapsibleSection>
          <CollapsibleSection title={`区域基准明细 (${districtRows.length})`} subtitle="按区域汇总的经营基准">
            <FilterableTable
              data={districtRows}
              sortOptions={[
                { key: 'avg_received', label: '平均实收' },
                { key: 'avg_received_per_sqm', label: '平均坪效' },
                { key: 'total_received', label: '总实收' },
                { key: 'district', label: '区域' },
              ]}
              defaultSort="avg_received"
              defaultOrder="desc"
              columns={[
                { key: 'district', label: '区域' },
                { key: 'store_count', label: '门店数', align: 'center' },
                { key: 'avg_area_sqm', label: '平均面积', align: 'right', render: (r) => `${r.avg_area_sqm}㎡` },
                { key: 'total_received', label: '总实收', align: 'right', render: (r) => formatCurrency(r.total_received) },
                { key: 'avg_received', label: '平均实收', align: 'right', render: (r) => formatCurrency(r.avg_received) },
                { key: 'median_received', label: '中位实收', align: 'right', render: (r) => formatCurrency(r.median_received) },
                { key: 'avg_received_per_sqm', label: '平均坪效', align: 'right', render: (r) => formatCurrency(r.avg_received_per_sqm) },
                { key: 'avg_bill_value', label: '客单价', align: 'right', render: (r) => formatCurrency(r.avg_bill_value) },
                { key: 'avg_repeat_rate_pct', label: '复购率', align: 'right', render: (r) => formatPercent(r.avg_repeat_rate_pct) },
                { key: 'p0_count', label: 'P0', align: 'center', render: (r) => r.p0_count > 0 ? <span className="font-bold text-red-600">{r.p0_count}</span> : '0' },
                { key: 'p1_count', label: 'P1', align: 'center', render: (r) => r.p1_count > 0 ? <span className="font-bold text-yellow-600">{r.p1_count}</span> : '0' },
              ]}
            />
          </CollapsibleSection>
        </div>
      )}
    </div>
  )
}
