import { useQuery } from '@tanstack/react-query'
import { useParams, useNavigate } from 'react-router-dom'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
import api from '@/lib/api'
import { MetricCard } from '@/components/MetricCard'
import { Badge } from '@/components/Badge'
import { DataTable } from '@/components/DataTable'
import { formatCurrency, formatPercent, formatNumber } from '@/lib/utils'
import { ArrowLeft } from 'lucide-react'

export function StoreDetailPage() {
  const { code } = useParams()
  const navigate = useNavigate()

  const { data: storeData } = useQuery({
    queryKey: ['store', code],
    queryFn: () => api.get(`/stores/${code}`),
  })

  const { data: dailyData } = useQuery({
    queryKey: ['store', code, 'daily'],
    queryFn: () => api.get(`/stores/${code}/daily`),
  })

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

  const sd = (storeData as any)?.data
  const daily = ((dailyData as any)?.data) || []
  const tasks = ((tasksData as any)?.data) || []

  if (!sd) return <div>加载中...</div>
  const sc = sd.scorecard

  return (
    <div className="space-y-4">
      <button onClick={() => navigate(-1)} className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
        <ArrowLeft size={16} /> 返回
      </button>

      <div className="flex items-center gap-3">
        <h1 className="text-xl font-bold">{sc.store_name}</h1>
        {sd.risk && <Badge type="risk" text={sd.risk.risk_level} />}
      </div>

      {/* 核心指标 */}
      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6">
        <MetricCard title="实收" value={sc.received} format="currency" />
        <MetricCard title="账单数" value={sc.bill_count} format="number" />
        <MetricCard title="客单价" value={sc.avg_bill_value} format="currency" />
        <MetricCard title="优惠率" value={sc.discount_rate_pct} format="percent" />
        <MetricCard title="理论毛利率" value={sc.theoretical_margin_pct} format="percent" />
        <MetricCard title="会员占比" value={sc.member_bill_share_pct} format="percent" />
      </div>

      {/* 日度趋势 */}
      <div className="rounded-lg border bg-card p-4">
        <h2 className="mb-3 text-sm font-bold">日度实收趋势</h2>
        <ResponsiveContainer width="100%" height={250}>
          <LineChart data={daily}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="business_date" tick={{ fontSize: 11 }} />
            <YAxis tick={{ fontSize: 11 }} />
            <Tooltip />
            <Line type="monotone" dataKey="received" stroke="#3b82f6" name="实收" />
            <Line type="monotone" dataKey="avg_bill_value" stroke="#eab308" name="客单价" />
          </LineChart>
        </ResponsiveContainer>
      </div>

      {/* 平台经济性 */}
      {sd.platform && (
        <div className="rounded-lg border bg-card p-4">
          <h2 className="mb-3 text-sm font-bold">平台经济性</h2>
          <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
            <MetricCard title="美团实收" value={sd.platform.meituan_received} format="currency" />
            <MetricCard title="饿了么实收" value={sd.platform.eleme_received} format="currency" />
            <MetricCard title="抖音实收" value={sd.platform.douyin_received} format="currency" />
            <MetricCard title="平台加权成本率" value={sd.platform.weighted_cost_rate_pct} format="percent" />
          </div>
        </div>
      )}

      {/* 任务列表 */}
      <div className="rounded-lg border bg-card p-4">
        <h2 className="mb-3 text-sm font-bold">门店任务 ({tasks.length})</h2>
        <DataTable
          columns={[
            { key: 'problem_indicator', label: '问题指标' },
            { key: 'priority', label: '优先级', render: (r) => <Badge type="priority" text={r.priority} /> },
            { key: 'action_required', label: '行动要求', render: (r) => <span className="text-xs">{r.action_required}</span> },
            { key: 'status', label: '状态', render: (r) => <Badge type="status" text={r.status} /> },
            { key: 'deadline', label: '截止日', render: (r) => r.deadline?.substring(0, 10) },
          ]}
          data={tasks}
          onRowClick={(r) => navigate(`/tasks/${r.task_id}`)}
        />
      </div>
    </div>
  )
}