import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { PageLoading, ErrorState } from '@/components/ui/feedback'
import { PageHeader } from '@/components/common/PageHeader'
import { Badge } from '@/components/ui/badge'
import { Card, CardHeader } from '@/components/ui/card'
import { StatCard } from '@/components/common/StatCard'
import { LiveDataBadge } from '@/components/common/LiveDataBadge'
import { CountryFlag } from '@/components/common/CountryFlag'
import { ChartCard, TrendChart, DonutChart, FunnelChart, RankBars, SimpleBarChart } from '@/components/charts'
import { getAnalytics } from '@/services/api/org'
import { Activity, BadgePercent, Users, Zap, Target } from 'lucide-react'

const PERIOD_OPTIONS = [
  { value: 'today', label: '今日' },
  { value: '7d', label: '近 7 天' },
  { value: '30d', label: '近 30 天' },
  { value: 'quarter', label: '本季度' },
] as const

export function AnalyticsPage() {
  const [period, setPeriod] = useState<(typeof PERIOD_OPTIONS)[number]['value']>('30d')
  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ['analytics', period],
    queryFn: () => getAnalytics({ period }),
  })

  if (isLoading) return <PageLoading />
  if (isError || !data) return <ErrorState onRetry={() => refetch()} />

  const k = data.kpis

  return (
    <div className="page-shell">
      <PageHeader
        title="业务分析"
        description="从客户获取、沟通效率到成交转化，查看完整经营链路"
        actions={
          <div className="flex items-center gap-2">
            <LiveDataBadge />
            <div className="flex rounded-[10px] border border-slate-200 bg-white p-1 shadow-sm">
              {PERIOD_OPTIONS.map((option) => (
                <button
                  key={option.value}
                  type="button"
                  aria-pressed={period === option.value}
                  onClick={() => setPeriod(option.value)}
                  className={`rounded-[7px] px-3 py-1.5 text-xs font-medium transition ${
                    period === option.value
                      ? 'bg-slate-900 text-white shadow-sm'
                      : 'text-slate-500 hover:bg-slate-50 hover:text-slate-900'
                  }`}
                >
                  {option.label}
                </button>
              ))}
            </div>
          </div>
        }
      />

      <div className="grid grid-cols-2 gap-3 xl:grid-cols-5">
        <StatCard title="新增客户" value={k.newCustomers.value} delta={k.newCustomers.delta} icon={Users} />
        <StatCard title="有效询盘" value={k.validInquiries.value} delta={k.validInquiries.delta} icon={Activity} />
        <StatCard title="高意向客户" value={k.highIntent.value} delta={k.highIntent.delta} icon={Target} />
        <StatCard title="转化率" value={`${k.conversionRate.value}%`} delta={k.conversionRate.delta} icon={BadgePercent} />
        <StatCard title="AI采纳率" value={`${k.aiAdoptionRate.value}%`} delta={k.aiAdoptionRate.delta} icon={Zap} />
      </div>

      <section className="page-section">
        <div className="section-heading">
          <div>
            <h2 className="section-title">增长与转化</h2>
            <p className="section-description">观察客户增长速度、渠道贡献和阶段流失</p>
          </div>
        </div>
        <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
          <ChartCard className="xl:col-span-7" title="客户增长趋势" description="所选周期内的新增客户变化" height={290}>
            <TrendChart data={data.customerGrowth} series={[{ key: 'count', name: '新增客户', color: '#2563eb' }]} />
          </ChartCard>
          <ChartCard className="xl:col-span-5" title="客户阶段转化漏斗" description="识别转化链路中的主要流失阶段" height={290}>
            <FunnelChart data={data.funnel} />
          </ChartCard>
          <ChartCard className="xl:col-span-4" title="各渠道询盘数量" height={255}>
            <SimpleBarChart data={data.channelInquiries} xKey="name" barKey="count" name="询盘数" />
          </ChartCard>
          <ChartCard className="xl:col-span-4" title="客户国家/地区分布" height={255}>
            <DonutChart data={data.countryDistribution} />
          </ChartCard>
          <ChartCard className="xl:col-span-4" title="意向分数分布" height={255}>
            <DonutChart data={data.intentDistribution} nameKey="range" />
          </ChartCard>
        </div>
      </section>

      <section className="page-section">
        <div className="section-heading">
          <div>
            <h2 className="section-title">产品与团队效率</h2>
            <p className="section-description">比较产品热度、响应速度和团队转化结果</p>
          </div>
        </div>
        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
          <ChartCard title="产品关注度排行" height={250}><RankBars data={data.productRank.map((p) => ({ name: p.product, value: p.inquiries }))} /></ChartCard>
          <ChartCard title="团队回复效率" height={250}><RankBars data={data.teamReplyRank.map((r) => ({ name: r.name, value: r.avgResponseMin }))} unit="分钟" max={30} /></ChartCard>
          <ChartCard title="团队客户转化" height={250}><RankBars data={data.teamConversionRank.map((r) => ({ name: r.name, value: r.rate }))} unit="%" /></ChartCard>
        </div>
      </section>

      <section className="page-section">
        <div className="section-heading">
          <div>
            <h2 className="section-title">经营提醒</h2>
            <p className="section-description">需要优先处理的客户、跟进和市场变化</p>
          </div>
        </div>
        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
          <Card><CardHeader title="重点跟进客户" /><div className="divide-y divide-slate-100">{data.bossBoard.urgentHighValue.map((c) => (<div key={c.id} className="flex items-center justify-between px-5 py-3 text-sm"><span className="font-medium text-slate-900">{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="max-w-[55%] truncate text-xs text-slate-500">{c.reason}</span></div>))}</div></Card>
          <Card><CardHeader title="逾期跟进" /><div className="divide-y divide-slate-100">{data.bossBoard.overdueMembers.map((m) => (<div key={m.id} className="flex items-center justify-between px-5 py-3 text-sm"><span className="font-medium text-slate-900">{m.name}</span><Badge variant="danger">{m.overdueCount} 项逾期</Badge></div>))}</div></Card>
          <Card><CardHeader title="增长较快的市场" /><div className="divide-y divide-slate-100">{data.bossBoard.fastestCountries.map((c) => (<div key={c.country} className="flex items-center justify-between px-5 py-3 text-sm"><CountryFlag code={c.country} /><Badge variant="success">+{(c.growth * 100).toFixed(0)}%</Badge></div>))}</div></Card>
          <Card><CardHeader title="渠道转化" /><div className="px-5 py-6"><p className="text-2xl font-semibold tracking-tight text-slate-950">{data.bossBoard.bestChannel.name}</p><p className="mt-1 text-sm text-slate-500">当前转化率 {data.bossBoard.bestChannel.conversion}%</p></div></Card>
          <Card><CardHeader title="产品询盘" /><div className="divide-y divide-slate-100 px-5">{data.bossBoard.topProducts.map((p) => (<div key={p.product} className="flex items-center justify-between py-3 text-sm"><span className="font-medium text-slate-900">{p.product}</span><span className="text-slate-500">{p.inquiries} 次</span></div>))}</div></Card>
          <Card><CardHeader title="久未联系的高意向客户" /><div className="divide-y divide-slate-100">{data.bossBoard.churningHighIntent.map((c) => (<div key={c.id} className="px-5 py-3 text-sm"><span className="font-medium text-slate-900">{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="ml-2 text-xs text-slate-500">{c.daysSilent} 天未联系 · 意向 {c.intentScore} 分</span></div>))}</div></Card>
        </div>
      </section>
    </div>
  )
}