import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import api from '@/lib/api'
import { CollapsibleSection } from '@/components/CollapsibleSection'
import { FilterableTable } from '@/components/FilterableTable'
import { LoadingSpinner } from '@/components/LoadingSpinner'
import { formatNumber } from '@/lib/utils'

const ACTION_COLORS: Record<string, string> = {
  '需增配': 'text-red-600 font-medium',
  '可减配': 'text-blue-500 font-medium',
  '配置合理': 'text-green-600',
}

const ROW_BG: Record<string, string> = {
  '需增配': 'bg-red-50',
  '可减配': 'bg-blue-50',
  '配置合理': 'bg-green-50',
}

function gapLabel(suggested: any, current: any): string {
  const s = parseFloat(suggested) || 0
  const c = parseFloat(current) || 0
  const gap = s - c
  if (gap > 0) return `+${gap.toFixed(1)}`
  if (gap < 0) return gap.toFixed(1)
  return '0'
}

function gapColor(suggested: any, current: any): string {
  const s = parseFloat(suggested) || 0
  const c = parseFloat(current) || 0
  const gap = s - c
  if (gap > 0) return 'text-red-600 font-medium'
  if (gap < 0) return 'text-blue-500'
  return 'text-muted-foreground'
}

const tableColumns = [
  { key: 'hour', label: '时段', render: (r: any) => `${r.hour}:00` },
  { key: 'avg_daily_bills', label: '日均账单', align: 'right' as const, render: (r: any) => formatNumber(r.avg_daily_bills) },
  { key: 'p85_bills', label: '高峰账单', align: 'right' as const, render: (r: any) => <span className="text-orange-600">{formatNumber(r.p85_bills)}</span> },
  { key: 'volatility', label: '波动系数', align: 'right' as const, render: (r: any) => <span className={parseFloat(r.volatility) > 1 ? 'text-red-600 font-medium' : ''}>{r.volatility}</span> },
  { key: 'suggested_front', label: '建议前厅', align: 'right' as const, render: (r: any) => r.suggested_front },
  { key: 'current_front', label: '当前前厅', align: 'right' as const, render: (r: any) => r.current_front },
  { key: 'gap_front', label: '前厅缺口', align: 'right' as const, render: (r: any) => <span className={gapColor(r.suggested_front, r.current_front)}>{gapLabel(r.suggested_front, r.current_front)}</span> },
  { key: 'suggested_kitchen', label: '建议后厨', align: 'right' as const, render: (r: any) => r.suggested_kitchen },
  { key: 'current_kitchen', label: '当前后厨', align: 'right' as const, render: (r: any) => r.current_kitchen },
  { key: 'gap_kitchen', label: '后厨缺口', align: 'right' as const, render: (r: any) => <span className={gapColor(r.suggested_kitchen, r.current_kitchen)}>{gapLabel(r.suggested_kitchen, r.current_kitchen)}</span> },
  { key: 'suggested_manager', label: '建议管理', align: 'right' as const, render: (r: any) => r.suggested_manager },
  { key: 'current_other', label: '当前管理', align: 'right' as const, render: (r: any) => r.current_other },
  { key: 'gap_manager', label: '管理缺口', align: 'right' as const, render: (r: any) => <span className={gapColor(r.suggested_manager, r.current_other)}>{gapLabel(r.suggested_manager, r.current_other)}</span> },
  { key: 'suggested_total', label: '建议合计', align: 'right' as const, render: (r: any) => <span className="font-medium">{r.suggested_total}</span> },
  { key: 'current_total', label: '当前合计', align: 'right' as const, render: (r: any) => r.current_total },
  { key: 'staff_gap', label: '总缺口', align: 'right' as const, render: (r: any) => <span className={parseFloat(r.staff_gap) > 0 ? 'text-red-600 font-bold' : parseFloat(r.staff_gap) < 0 ? 'text-blue-500 font-bold' : ''}>{parseFloat(r.staff_gap) > 0 ? '+' : ''}{r.staff_gap}</span> },
  { key: 'action', label: '建议', render: (r: any) => <span className={ACTION_COLORS[r.action] || ''}>{r.action}</span> },
]

export function SchedulingSuggestionTab({ month }: { month: string }) {
  const { data: storesData } = useQuery({
    queryKey: ['ss/stores'],
    queryFn: () => api.get('/smart-scheduling/stores'),
  })
  const stores = (storesData as any)?.data || []
  const [storeName, setStoreName] = useState('七里庄店')
  const [frontTarget, setFrontTarget] = useState(15)
  const [kitchenTarget, setKitchenTarget] = useState(25)

  const { data, isLoading } = useQuery({
    queryKey: ['ss/suggestion', storeName, frontTarget, kitchenTarget, month],
    queryFn: () => api.get(`/smart-scheduling/scheduling-suggestion?store=${storeName}&front_target=${frontTarget}&kitchen_target=${kitchenTarget}&month=${month}`),
    enabled: !!storeName,
  })

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

  const workdayRows = rows.filter((r: any) => r.day_type === '工作日')
  const weekendRows = rows.filter((r: any) => r.day_type === '周末')

  const increaseCount = rows.filter((r: any) => r.action === '需增配').length
  const decreaseCount = rows.filter((r: any) => r.action === '可减配').length
  const okCount = rows.filter((r: any) => r.action === '配置合理').length

  return (
    <div className="space-y-4">
      <CollapsibleSection title="排班建议" subtitle="基于历史客流规律，分岗位推荐各时段在岗人数">
        <div className="mb-3 flex gap-3 items-center flex-wrap">
          <div className="flex gap-2 items-center">
            <label className="text-sm text-muted-foreground">门店：</label>
            <select value={storeName} onChange={(e) => setStoreName(e.target.value)} className="border rounded px-2 py-1 text-sm">
              {stores.map((s: any) => <option key={s.store_name} value={s.store_name}>{s.store_name}</option>)}
            </select>
          </div>
          <div className="flex gap-2 items-center">
            <label className="text-sm text-muted-foreground">前厅人均：</label>
            <input type="number" value={frontTarget} onChange={(e) => setFrontTarget(parseInt(e.target.value) || 15)} className="border rounded px-2 py-1 text-sm w-16" />
            <span className="text-xs text-muted-foreground">单/人/时</span>
          </div>
          <div className="flex gap-2 items-center">
            <label className="text-sm text-muted-foreground">后厨人均：</label>
            <input type="number" value={kitchenTarget} onChange={(e) => setKitchenTarget(parseInt(e.target.value) || 25)} className="border rounded px-2 py-1 text-sm w-16" />
            <span className="text-xs text-muted-foreground">单/人/时</span>
          </div>
        </div>

        {isLoading ? <LoadingSpinner text="生成排班建议..." /> : (
          <>
            <div className="grid grid-cols-3 gap-3 mb-4">
              <div className="rounded-lg border p-3">
                <p className="text-xs text-muted-foreground">需增配时段</p>
                <p className="text-xl font-bold text-red-600">{increaseCount}</p>
              </div>
              <div className="rounded-lg border p-3">
                <p className="text-xs text-muted-foreground">可减配时段</p>
                <p className="text-xl font-bold text-blue-500">{decreaseCount}</p>
              </div>
              <div className="rounded-lg border p-3">
                <p className="text-xs text-muted-foreground">配置合理时段</p>
                <p className="text-xl font-bold text-green-600">{okCount}</p>
              </div>
            </div>

            <div className="space-y-4">
              <div>
                <h3 className="text-sm font-bold mb-2">工作日排班建议</h3>
                <FilterableTable
                  data={workdayRows}
                  sortOptions={[
                    { key: 'hour', label: '时段' },
                    { key: 'avg_daily_bills', label: '日均账单' },
                    { key: 'staff_gap', label: '总缺口' },
                  ]}
                  defaultSort="hour"
                  defaultOrder="asc"
                  filterKey="action"
                  filterLabel="全部建议"
                  columns={tableColumns}
                />
              </div>
              <div>
                <h3 className="text-sm font-bold mb-2">周末排班建议</h3>
                <FilterableTable
                  data={weekendRows}
                  sortOptions={[
                    { key: 'hour', label: '时段' },
                    { key: 'avg_daily_bills', label: '日均账单' },
                    { key: 'staff_gap', label: '总缺口' },
                  ]}
                  defaultSort="hour"
                  defaultOrder="asc"
                  filterKey="action"
                  filterLabel="全部建议"
                  columns={tableColumns}
                />
              </div>
            </div>
          </>
        )}
      </CollapsibleSection>
    </div>
  )
}