import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import api from '@/lib/api'
import { Badge } from '@/components/Badge'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
import { formatCurrency, formatPercent, formatNumber } from '@/lib/utils'
import { LoadingSpinner } from '@/components/LoadingSpinner'
import { useState } from 'react'

export function StorePage() {
  const queryClient = useQueryClient()
  const [executeText, setExecuteText] = useState('')
  const [activeTaskId, setActiveTaskId] = useState<number | null>(null)
  const [storeCode, setStoreCode] = useState('1111')

  const { data: storesData, isLoading: storesLoading } = useQuery({
    queryKey: ['stores-list'],
    queryFn: () => api.get('/stores/risk'),
  })
  const stores = ((storesData as any)?.data || []).map((s: any) => ({ code: s.store_code, name: s.store_name, risk: s.risk_level, issue: s.primary_issue }))

  const { data: priorityData } = useQuery({
    queryKey: ['stores-priority-detail'],
    queryFn: () => api.get('/stores/priority'),
  })

  const { data: cardData, isLoading: cardLoading } = useQuery({
    queryKey: ['store', storeCode, 'daily-card'],
    queryFn: () => api.get(`/tasks/stores/${storeCode}/daily-card`),
  })

  const { data: tasksData, isLoading: tasksLoading } = useQuery({
    queryKey: ['store', storeCode, 'tasks'],
    queryFn: () => api.get('/tasks', { params: { store_code: storeCode, month: '2026-05', page_size: 50 } }),
  })

  const { data: dailyData, isLoading: dailyLoading } = useQuery({
    queryKey: ['store', storeCode, 'daily'],
    queryFn: () => api.get(`/stores/${storeCode}/daily`, { params: { month: '2026-04' } }),
  })

  const { data: followupData, isLoading: followupLoading } = useQuery({
    queryKey: ['store', storeCode, 'followup'],
    queryFn: () => api.get('/tasks/followup'),
  })

  const { data: skuData } = useQuery({
    queryKey: ['sku-attach', storeCode],
    queryFn: () => api.get('/sku/attach'),
  })

  const { data: abcData } = useQuery({
    queryKey: ['sku-abc'],
    queryFn: () => api.get('/sku/abc'),
  })

  const card = (cardData as any)?.data
  const anomalies = card?.anomalies || []
  const tasks = (tasksData as any)?.data || []
  const dailyRows = (dailyData as any)?.data || []
  const followupRows = (followupData as any)?.data || []
  const followup = followupRows.find((f: any) => f.store_code === storeCode)
  const skuRows = (skuData as any)?.data || []
  const abcRows = (abcData as any)?.data || []
  const coreSKUs = abcRows.filter((r: any) => r.abc_class === 'A').slice(0, 10)

  const priorityRows = (priorityData as any)?.data || []
  const priorityInfo = priorityRows.find((p: any) => p.store_code === storeCode)

  const storeInfo = stores.find((s: any) => s.code === storeCode)
  const storeName = storeInfo?.name || ''
  const primaryIssue = storeInfo?.issue || priorityInfo?.problem_combination || '-'

  const todoTasks = tasks.filter((t: any) => t.status === '待启动' || t.status === '进行中')
  const doneTasks = tasks.filter((t: any) => t.status === '已验收' || t.status === '已回滚')
  const passCount = tasks.filter((t: any) => t.verification_result === '达标').length
  const improvingCount = tasks.filter((t: any) => t.verification_result === '改善中').length

  const allAnomalyItems: { module: string; metric: string; value: number; baseline: number; is_anomaly: boolean }[] = []
  anomalies.forEach((a: any) => {
    const list = typeof a.anomalies === 'string' ? JSON.parse(a.anomalies) : a.anomalies || []
    list.forEach((item: any) => {
      allAnomalyItems.push({ module: a.module, metric: item.metric, value: item.value, baseline: item.baseline, is_anomaly: item.is_anomaly })
    })
  })
  const anomalyCount = allAnomalyItems.filter((i: any) => i.is_anomaly).length

  const executeMutation = useMutation({
    mutationFn: ({ id, text }: { id: number; text: string }) => api.put(`/tasks/${id}/execute`, { process_evidence: text }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['store', storeCode, 'tasks'] })
      setExecuteText('')
      setActiveTaskId(null)
    },
  })

  const riskColor = (level: string) => {
    if (level === '红色') return 'bg-red-100 text-red-700 border-red-300'
    if (level === '黄色') return 'bg-yellow-100 text-yellow-700 border-yellow-300'
    return 'bg-green-100 text-green-700 border-green-300'
  }

  const pageLoading = storesLoading || cardLoading || tasksLoading || dailyLoading || followupLoading

  if (pageLoading) {
    return <LoadingSpinner text="加载店长工作台..." />
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-bold">店长工作台</h1>
        <select
          value={storeCode}
          onChange={(e) => setStoreCode(e.target.value)}
          className="rounded-md border px-3 py-1.5 text-sm"
        >
          {stores.map((s: any) => (
            <option key={s.code} value={s.code}>{s.name}</option>
          ))}
        </select>
      </div>

      {/* 门店概况 */}
      <div className="grid gap-3 md:grid-cols-4">
        <div className="rounded-lg border bg-card p-4">
          <p className="text-xs text-muted-foreground">门店名称</p>
          <p className="mt-1 text-lg font-bold">{storeName}</p>
        </div>
        <div className="rounded-lg border bg-card p-4">
          <p className="text-xs text-muted-foreground">风险等级</p>
          <div className="mt-1">
            {storeInfo?.risk && <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-sm font-medium ${riskColor(storeInfo.risk)}`}>{storeInfo.risk}</span>}
          </div>
        </div>
        <div className="rounded-lg border bg-card p-4">
          <p className="text-xs text-muted-foreground">主要问题</p>
          <p className="mt-1 text-sm font-medium">{primaryIssue}</p>
        </div>
        <div className="rounded-lg border bg-card p-4">
          <p className="text-xs text-muted-foreground">任务完成率</p>
          <p className="mt-1 text-lg font-bold">{tasks.length > 0 ? Math.round(doneTasks.length / tasks.length * 100) : 0}%</p>
          <p className="text-xs text-muted-foreground">{doneTasks.length}/{tasks.length} 已完成</p>
        </div>
      </div>

      {/* 最新经营概览 + 本周指标进度 一行 */}
      <div className="grid gap-4 lg:grid-cols-2">
        {/* 经营概览 */}
        <div className="rounded-lg border bg-card p-4">
          <div className="mb-3 flex items-center justify-between">
            <h2 className="text-sm font-bold">最新经营概览（5月1日）</h2>
            {anomalyCount > 0 && (
              <span className="rounded-md bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">{anomalyCount} 项异常</span>
            )}
          </div>
          {allAnomalyItems.length === 0 ? (
            <p className="text-sm text-muted-foreground">暂无数据</p>
          ) : (
            <div className="grid gap-2 md:grid-cols-3">
              {allAnomalyItems.map((item, idx) => (
                <div key={idx} className={`rounded-md border p-3 ${item.is_anomaly ? 'border-red-200 bg-red-50/50' : ''}`}>
                  <p className="text-xs text-muted-foreground">{item.metric}</p>
                  <p className={`mt-1 text-lg font-bold ${item.is_anomaly ? 'text-red-600' : ''}`}>
                    {item.metric === '实收' ? formatCurrency(item.value) : formatNumber(item.value)}
                  </p>
                  <p className="text-xs text-muted-foreground">日基准: {item.metric === '实收' ? formatCurrency(item.baseline) : formatNumber(item.baseline)}{item.is_anomaly && <span className="text-red-500"> ⚠</span>}</p>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* 本周指标进度条 */}
        {followup && (
          <div className="rounded-lg border bg-card p-4">
            <h2 className="mb-3 text-sm font-bold">本周指标进度</h2>
            <div className="space-y-3">
              {[
                { label: '实收', baseline: Number(followup.baseline_received), target: Number(followup.target_received), actual: Number(followup.actual_received), lower: false, isCurrency: true },
                { label: '客单价', baseline: Number(followup.baseline_avg_bill), target: Number(followup.target_avg_bill), actual: Number(followup.actual_avg_bill), lower: false, isCurrency: true },
                { label: '优惠率', baseline: Number(followup.baseline_discount_rate), target: Number(followup.target_discount_rate), actual: Number(followup.actual_discount_rate), lower: true, isCurrency: false },
                { label: '毛利率', baseline: Number(followup.baseline_margin_rate), target: Number(followup.target_margin_rate), actual: Number(followup.actual_margin_rate), lower: false, isCurrency: false },
              ].map((m) => {
                const pct = !isNaN(m.target) && m.target !== 0 && !isNaN(m.actual)
                  ? Math.min(Math.round((m.actual / m.target) * 100), 200) : 0
                const achieved = !isNaN(m.actual) && !isNaN(m.target) && (m.lower ? m.actual <= m.target : m.actual >= m.target)
                const fmt = (v: number) => isNaN(v) ? '-' : m.isCurrency ? formatCurrency(v) : `${formatNumber(v)}%`
                return (
                  <div key={m.label}>
                    <div className="mb-1 flex items-center justify-between text-xs">
                      <span className="font-medium">{m.label}</span>
                      <span className="text-muted-foreground">
                        目标: {fmt(m.target)} | 实际: {fmt(m.actual)} | {pct}% {achieved ? '✓' : ''}
                      </span>
                    </div>
                    <div className="h-2 overflow-hidden rounded-full bg-muted">
                      <div
                        className={`h-full rounded-full transition-all ${achieved ? 'bg-green-500' : pct >= 80 ? 'bg-yellow-500' : 'bg-red-500'}`}
                        style={{ width: `${Math.min(pct, 100)}%` }}
                      />
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        )}
      </div>

      {/* 日度趋势 + 月度指标对比 */}
      <div className="grid gap-4 lg:grid-cols-2">
        {/* 日度实收趋势 */}
        <div className="rounded-lg border bg-card p-4">
          <h2 className="mb-3 text-sm font-bold">日度实收趋势</h2>
          {dailyRows.length > 0 ? (
            <ResponsiveContainer width="100%" height={220}>
              <LineChart data={dailyRows}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="business_date" tickFormatter={(v) => v?.substring(5, 10)} tick={{ fontSize: 10 }} />
                <YAxis tick={{ fontSize: 10 }} />
                <Tooltip labelFormatter={(v) => v?.substring(0, 10)} />
                <Line type="monotone" dataKey="received" stroke="#3b82f6" name="实收" dot={false} />
              </LineChart>
            </ResponsiveContainer>
          ) : <p className="py-16 text-center text-sm text-muted-foreground">暂无数据</p>}
        </div>

        {/* 月度指标对比 */}
        <div className="rounded-lg border bg-card p-4">
          <h2 className="mb-3 text-sm font-bold">月度指标对比</h2>
          {followup ? (
            <table className="w-full text-xs">
              <thead>
                <tr className="border-b text-muted-foreground">
                  <th className="py-2 text-left font-medium">指标</th>
                  <th className="py-2 text-right font-medium">月基线</th>
                  <th className="py-2 text-right font-medium">目标</th>
                  <th className="py-2 text-right font-medium">实际</th>
                  <th className="py-2 text-right font-medium">达成率</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { label: '实收', baseline: Number(followup.baseline_received), target: Number(followup.target_received), actual: Number(followup.actual_received), lower: false, isCurrency: true },
                  { label: '客单价', baseline: Number(followup.baseline_avg_bill), target: Number(followup.target_avg_bill), actual: Number(followup.actual_avg_bill), lower: false, isCurrency: true },
                  { label: '优惠率(%)', baseline: Number(followup.baseline_discount_rate), target: Number(followup.target_discount_rate), actual: Number(followup.actual_discount_rate), lower: true, isCurrency: false },
                  { label: '理论毛利率(%)', baseline: Number(followup.baseline_margin_rate), target: Number(followup.target_margin_rate), actual: Number(followup.actual_margin_rate), lower: false, isCurrency: false },
                  { label: '异常率(%)', baseline: Number(followup.baseline_anomaly_rate), target: Number(followup.target_anomaly_rate), actual: Number(followup.actual_anomaly_rate), lower: true, isCurrency: false },
                  { label: '会员占比(%)', baseline: Number(followup.baseline_member_share), target: Number(followup.target_member_share), actual: Number(followup.actual_member_share), lower: false, isCurrency: false },
                ].map((m) => {
                  const achieved = !isNaN(m.actual) && !isNaN(m.target) && (m.lower ? m.actual <= m.target : m.actual >= m.target)
                  const rate = !isNaN(m.actual) && !isNaN(m.baseline) && m.baseline !== 0 ? Math.round((m.actual / m.baseline) * 100) : null
                  const fmt = (v: number) => isNaN(v) ? '-' : m.isCurrency ? formatCurrency(v) : formatNumber(v)
                  return (
                    <tr key={m.label} className="border-b last:border-0">
                      <td className="py-2 text-left">{m.label}</td>
                      <td className="py-2 text-right text-muted-foreground">{fmt(m.baseline)}</td>
                      <td className="py-2 text-right text-blue-600">{fmt(m.target)}</td>
                      <td className={`py-2 text-right font-medium ${achieved ? 'text-green-600' : 'text-red-600'}`}>{fmt(m.actual)}</td>
                      <td className={`py-2 text-right ${achieved ? 'text-green-600' : 'text-red-600'}`}>
                        {rate !== null ? `${rate}%` : '-'}
                        {achieved ? ' ✓' : ' ✗'}
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          ) : <p className="py-16 text-center text-sm text-muted-foreground">暂无数据</p>}
        </div>
      </div>

      {/* 工作重点和行动计划 */}
      {followup && (followup.work_focus || followup.action_plan) && (
        <div className="grid gap-4 lg:grid-cols-2">
          {followup.work_focus && (
            <div className="rounded-lg border bg-card p-4">
              <h2 className="mb-2 text-sm font-bold">工作重点</h2>
              <p className="text-sm text-muted-foreground">{followup.work_focus}</p>
            </div>
          )}
          {followup.action_plan && (
            <div className="rounded-lg border bg-card p-4">
              <h2 className="mb-2 text-sm font-bold">行动计划</h2>
              <p className="text-sm text-muted-foreground">{followup.action_plan}</p>
            </div>
          )}
        </div>
      )}

      {/* 核心SKU备货提醒 */}
      {coreSKUs.length > 0 && (
        <div className="rounded-lg border bg-card p-4">
          <h2 className="mb-3 text-sm font-bold">核心SKU备货提醒 (A级)</h2>
          <div className="space-y-2">
            {coreSKUs.map((s: any, idx: number) => (
              <div key={idx} className="flex items-center justify-between rounded-md border p-2">
                <div className="flex items-center gap-2">
                  <Badge type="priority" text="A" />
                  <span className="text-sm font-medium">{s.dish_name || s.sku_name || '-'}</span>
                </div>
                <div className="flex items-center gap-4 text-xs text-muted-foreground">
                  <span>营收占比: {Number(s.revenue_share_pct || 0).toFixed(1)}%</span>
                  <span>累计: {Number(s.cumulative_revenue_share_pct || 0).toFixed(1)}%</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 待办任务 */}
      <div className="rounded-lg border bg-card p-4">
        <h2 className="mb-3 text-sm font-bold">待办任务 ({todoTasks.length})</h2>
        <div className="space-y-2">
          {todoTasks.length === 0 ? (
            <p className="text-sm text-muted-foreground">暂无待办任务</p>
          ) : todoTasks.map((t: any) => (
            <div key={t.task_id} className="rounded-md border p-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Badge type="priority" text={t.priority} />
                  <span className="text-sm font-medium">{t.problem_indicator}</span>
                </div>
                <Badge type="status" text={t.status} />
              </div>
              <p className="mt-1 text-xs text-muted-foreground">{t.action_required}</p>
              <p className="mt-1 text-xs text-muted-foreground">截止日: {t.deadline?.substring(0, 10)}</p>

              {activeTaskId === t.task_id ? (
                <div className="mt-2">
                  <textarea
                    value={executeText}
                    onChange={(e) => setExecuteText(e.target.value)}
                    placeholder="填写执行结果和过程证据..."
                    className="mb-2 w-full rounded-md border p-2 text-xs"
                    rows={2}
                  />
                  <div className="flex gap-2">
                    <button
                      onClick={() => executeMutation.mutate({ id: t.task_id, text: executeText })}
                      disabled={!executeText || executeMutation.isPending}
                      className="rounded-md bg-primary px-3 py-1 text-xs text-primary-foreground disabled:opacity-50"
                    >
                      {executeMutation.isPending ? '提交中...' : '提交反馈'}
                    </button>
                    <button
                      onClick={() => { setActiveTaskId(null); setExecuteText('') }}
                      className="rounded-md border px-3 py-1 text-xs"
                    >
                      取消
                    </button>
                  </div>
                </div>
              ) : (
                t.status === '待启动' && (
                  <button
                    onClick={() => setActiveTaskId(t.task_id)}
                    className="mt-2 rounded-md border px-3 py-1 text-xs hover:bg-muted"
                  >
                    填写执行反馈
                  </button>
                )
              )}
            </div>
          ))}
        </div>
      </div>

      {/* 已完成任务 */}
      {doneTasks.length > 0 && (
        <div className="rounded-lg border bg-card p-4">
          <h2 className="mb-3 text-sm font-bold">已完成任务 ({doneTasks.length})</h2>
          <div className="space-y-2">
            {doneTasks.map((t: any) => (
              <div key={t.task_id} className="flex items-center justify-between rounded-md border p-3 opacity-70">
                <div className="flex items-center gap-2">
                  <Badge type="priority" text={t.priority} />
                  <span className="text-sm">{t.problem_indicator}</span>
                </div>
                <div className="flex items-center gap-2">
                  {t.verification_result && <Badge type="review" text={t.verification_result} />}
                  <Badge type="status" text={t.status} />
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}
