import { useCallback, useEffect, useMemo, useState } from 'react'
import {
  Users,
  UserCog,
  Package,
  ShoppingCart,
  DollarSign,
  Activity,
  Boxes,
  RefreshCw,
  Search,
  Loader2,
  TrendingUp,
  ExternalLink,
} from 'lucide-react'
import { cn } from '../../lib/utils'

type Bucket = { key: string; count: number; value?: number }
type Business = {
  ok: boolean
  generated_at: string
  filters: { q: string; region: string }
  kpis: {
    customers: number
    employees: number
    products: number
    orders_indexed: number
    revenue_indexed: number
    avg_order: number
    telemetry_indexed: number
    supply_indexed: number
    source_totals: { orders?: number; hr_events?: number; supply_events?: number }
  }
  orders: {
    by_region: Bucket[]
    by_channel: Bucket[]
    by_status: Bucket[]
    top_customers: Bucket[]
    top_products: Bucket[]
    over_time: Bucket[]
  }
  hr: { by_department: Bucket[]; by_role: Bucket[]; by_event: Bucket[] }
  supply: { by_type: Bucket[]; by_region: Bucket[] }
  telemetry: { by_metric: Bucket[] }
  regions: string[]
}

const REGION_COLORS = ['#34d399', '#60a5fa', '#f472b6', '#fbbf24', '#a78bfa', '#22d3ee', '#fb7185']

function fmtNum(n?: number | null) {
  if (n == null) return '—'
  if (Math.abs(n) >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(2)}B`
  if (Math.abs(n) >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
  if (Math.abs(n) >= 1_000) return `${(n / 1_000).toFixed(1)}K`
  return String(n)
}
function fmtMoney(n?: number | null) {
  if (n == null) return '—'
  return `€${fmtNum(n)}`
}
function monthLabel(key: string) {
  const m = /^(\d{4})-(\d{2})/.exec(key)
  if (!m) return key
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  return `${months[Number(m[2]) - 1]} '${m[1].slice(2)}`
}

function Kpi({ icon: Icon, label, value, sub, accent }: { icon: typeof Users; label: string; value: string; sub?: string; accent: string }) {
  return (
    <div className="panel flex items-center gap-3 px-3 py-2.5">
      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg" style={{ backgroundColor: `${accent}1f`, color: accent }}>
        <Icon className="h-4 w-4" />
      </div>
      <div className="min-w-0">
        <p className="text-[9px] font-semibold uppercase tracking-wider text-foreground-muted">{label}</p>
        <p className="truncate text-lg font-bold leading-tight text-foreground">{value}</p>
        {sub && <p className="truncate text-[9px] text-foreground-faint">{sub}</p>}
      </div>
    </div>
  )
}

function Panel({ title, subtitle, children, icon: Icon }: { title: string; subtitle?: string; children: React.ReactNode; icon?: typeof Users }) {
  return (
    <div className="panel flex min-h-0 flex-col p-3">
      <div className="mb-2 flex items-center gap-1.5">
        {Icon && <Icon className="h-3.5 w-3.5 text-docker" />}
        <h3 className="text-[11px] font-semibold text-foreground">{title}</h3>
        {subtitle && <span className="ml-auto text-[9px] text-foreground-faint">{subtitle}</span>}
      </div>
      {children}
    </div>
  )
}

function BarsH({ data, valueKind, colorByIndex }: { data: Bucket[]; valueKind?: 'money' | 'num'; colorByIndex?: boolean }) {
  const useVal = valueKind != null
  const max = Math.max(1, ...data.map((d) => (useVal && d.value != null ? d.value : d.count)))
  if (!data.length) return <p className="py-6 text-center text-[10px] text-foreground-faint">No data</p>
  return (
    <div className="space-y-1.5">
      {data.map((d, i) => {
        const metric = useVal && d.value != null ? d.value : d.count
        const pct = Math.max(2, (metric / max) * 100)
        const color = colorByIndex ? REGION_COLORS[i % REGION_COLORS.length] : '#38bdf8'
        const label = useVal && d.value != null ? (valueKind === 'money' ? fmtMoney(d.value) : fmtNum(d.value)) : fmtNum(d.count)
        return (
          <div key={d.key ?? i} className="flex items-center gap-2 text-[10px]">
            <span className="w-28 shrink-0 truncate text-foreground-muted" title={d.key}>{d.key ?? '—'}</span>
            <div className="relative h-3.5 flex-1 overflow-hidden rounded bg-surface-overlay">
              <div className="h-full rounded" style={{ width: `${pct}%`, backgroundColor: color }} />
            </div>
            <span className="w-20 shrink-0 text-right font-mono text-foreground">{label}</span>
          </div>
        )
      })}
    </div>
  )
}

function AreaTrend({ data }: { data: Bucket[] }) {
  const pts = data.filter((d) => d.value != null)
  if (pts.length < 2) return <p className="py-6 text-center text-[10px] text-foreground-faint">Not enough data</p>
  const w = 560
  const h = 120
  const max = Math.max(...pts.map((p) => p.value || 0))
  const min = Math.min(...pts.map((p) => p.value || 0))
  const range = max - min || 1
  const step = w / (pts.length - 1)
  const coords = pts.map((p, i) => [i * step, h - ((((p.value || 0) - min) / range) * (h - 16) + 8)])
  const line = coords.map((c, i) => `${i === 0 ? 'M' : 'L'}${c[0].toFixed(1)},${c[1].toFixed(1)}`).join(' ')
  const area = `${line} L${w},${h} L0,${h} Z`
  return (
    <div>
      <svg viewBox={`0 0 ${w} ${h}`} className="w-full" preserveAspectRatio="none" style={{ height: 120 }}>
        <defs>
          <linearGradient id="rev-grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#34d399" stopOpacity="0.45" />
            <stop offset="100%" stopColor="#34d399" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={area} fill="url(#rev-grad)" />
        <path d={line} fill="none" stroke="#34d399" strokeWidth="2" />
        {coords.map((c, i) => <circle key={i} cx={c[0]} cy={c[1]} r="2" fill="#34d399" />)}
      </svg>
      <div className="mt-1 flex justify-between text-[8px] text-foreground-faint">
        <span>{monthLabel(pts[0].key)}</span>
        <span>{monthLabel(pts[Math.floor(pts.length / 2)].key)}</span>
        <span>{monthLabel(pts[pts.length - 1].key)}</span>
      </div>
    </div>
  )
}

function Donut({ data }: { data: Bucket[] }) {
  const total = data.reduce((s, d) => s + d.count, 0) || 1
  let acc = 0
  const r = 42
  const c = 2 * Math.PI * r
  if (!data.length) return <p className="py-6 text-center text-[10px] text-foreground-faint">No data</p>
  return (
    <div className="flex items-center gap-4">
      <svg viewBox="0 0 100 100" className="h-28 w-28 shrink-0 -rotate-90">
        {data.map((d, i) => {
          const frac = d.count / total
          const dash = frac * c
          const seg = (
            <circle
              key={d.key ?? i}
              cx="50" cy="50" r={r} fill="none"
              stroke={REGION_COLORS[i % REGION_COLORS.length]} strokeWidth="14"
              strokeDasharray={`${dash} ${c - dash}`} strokeDashoffset={-acc}
            />
          )
          acc += dash
          return seg
        })}
      </svg>
      <div className="min-w-0 flex-1 space-y-1">
        {data.slice(0, 7).map((d, i) => (
          <div key={d.key ?? i} className="flex items-center gap-1.5 text-[10px]">
            <span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: REGION_COLORS[i % REGION_COLORS.length] }} />
            <span className="flex-1 truncate text-foreground-muted">{d.key ?? '—'}</span>
            <span className="font-mono text-foreground">{((d.count / total) * 100).toFixed(0)}%</span>
          </div>
        ))}
      </div>
    </div>
  )
}

export function DataExplorerView() {
  const [data, setData] = useState<Business | null>(null)
  const [loading, setLoading] = useState(true)
  const [region, setRegion] = useState('')
  const [qInput, setQInput] = useState('')
  const [q, setQ] = useState('')

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const params = new URLSearchParams()
      if (q) params.set('q', q)
      if (region) params.set('region', region)
      const r = await fetch(`/api/search/business?${params.toString()}`)
      if (r.ok) setData(await r.json())
    } catch { /* */ } finally {
      setLoading(false)
    }
  }, [q, region])

  useEffect(() => { load() }, [load])

  const k = data?.kpis
  const regions = useMemo(() => data?.regions || [], [data])

  return (
    <div className="scrollbar-thin flex h-full min-h-0 flex-col gap-2 overflow-y-auto p-3">
      {/* header */}
      <header className="panel flex shrink-0 flex-wrap items-center justify-between gap-3 px-4 py-3">
        <div>
          <h1 className="flex items-center gap-2 text-base font-semibold text-foreground">
            <TrendingUp className="h-5 w-5 text-docker" />
            Data Explorer
          </h1>
          <p className="text-[11px] text-foreground-muted">
            Your actual business data — customers, orders, employees, supply chain &amp; telemetry across all sources
          </p>
        </div>
        <div className="flex items-center gap-2">
          <form
            onSubmit={(e) => { e.preventDefault(); setQ(qInput.trim()) }}
            className="flex items-center gap-1 rounded-md border border-border bg-surface px-2 py-1"
          >
            <Search className="h-3.5 w-3.5 text-foreground-muted" />
            <input
              value={qInput}
              onChange={(e) => setQInput(e.target.value)}
              placeholder="Filter by name, id, region…"
              className="w-48 bg-transparent text-[11px] text-foreground outline-none placeholder:text-foreground-faint"
            />
          </form>
          <button type="button" onClick={load} className="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-[11px] text-foreground-muted hover:bg-surface-overlay">
            {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />} Refresh
          </button>
        </div>
      </header>

      {/* region filters */}
      <div className="flex shrink-0 flex-wrap items-center gap-1.5 px-1 text-[10px]">
        <span className="mr-1 font-semibold uppercase tracking-wider text-foreground-faint">Region</span>
        {['', ...regions].map((rg) => (
          <button
            key={rg || 'all'}
            type="button"
            onClick={() => setRegion(rg)}
            className={cn('rounded-full border px-2.5 py-1 font-medium transition-colors', region === rg ? 'border-docker bg-docker/15 text-docker' : 'border-border text-foreground-muted hover:bg-surface-overlay')}
          >
            {rg || 'All regions'}
          </button>
        ))}
        {(q || region) && (
          <button type="button" onClick={() => { setQ(''); setQInput(''); setRegion('') }} className="ml-1 rounded-full border border-amber-500/40 px-2.5 py-1 font-medium text-amber-400 hover:bg-amber-500/10">
            Clear filters
          </button>
        )}
        {data && <span className="ml-auto text-[9px] text-foreground-faint">updated {new Date(data.generated_at).toLocaleTimeString()}</span>}
      </div>

      {/* KPIs */}
      <div className="grid shrink-0 grid-cols-2 gap-2 md:grid-cols-4 xl:grid-cols-7">
        <Kpi icon={Users} label="Customers" value={fmtNum(k?.customers)} sub="distinct, searchable" accent="#34d399" />
        <Kpi icon={UserCog} label="Employees" value={fmtNum(k?.employees)} sub="distinct, searchable" accent="#60a5fa" />
        <Kpi icon={Package} label="Products" value={fmtNum(k?.products)} accent="#f472b6" />
        <Kpi icon={ShoppingCart} label="Orders (source)" value={fmtNum(k?.source_totals?.orders)} sub={`${fmtNum(k?.orders_indexed)} indexed`} accent="#fbbf24" />
        <Kpi icon={DollarSign} label="Revenue (sample)" value={fmtMoney(k?.revenue_indexed)} sub={`avg ${fmtMoney(k?.avg_order)}`} accent="#22d3ee" />
        <Kpi icon={Boxes} label="Supply events" value={fmtNum(k?.source_totals?.supply_events)} accent="#a78bfa" />
        <Kpi icon={Activity} label="HR events" value={fmtNum(k?.source_totals?.hr_events)} accent="#fb7185" />
      </div>

      {/* Sales */}
      <h2 className="mt-1 shrink-0 px-1 text-[10px] font-semibold uppercase tracking-widest text-foreground-muted">Sales &amp; Customers — PostgreSQL</h2>
      <div className="grid shrink-0 gap-2 lg:grid-cols-2">
        <Panel title="Revenue over time" subtitle="monthly, indexed sample" icon={TrendingUp}>
          <AreaTrend data={data?.orders.over_time || []} />
        </Panel>
        <Panel title="Revenue by region" icon={DollarSign}>
          <BarsH data={data?.orders.by_region || []} valueKind="money" colorByIndex />
        </Panel>
        <Panel title="Top customers by spend" icon={Users}>
          <BarsH data={data?.orders.top_customers || []} valueKind="money" />
        </Panel>
        <div className="grid gap-2 sm:grid-cols-2">
          <Panel title="Orders by status">
            <Donut data={data?.orders.by_status || []} />
          </Panel>
          <Panel title="Orders by channel">
            <Donut data={data?.orders.by_channel || []} />
          </Panel>
        </div>
        <Panel title="Top products by revenue" icon={Package}>
          <BarsH data={data?.orders.top_products || []} valueKind="money" />
        </Panel>
      </div>

      {/* HR */}
      <h2 className="mt-1 shrink-0 px-1 text-[10px] font-semibold uppercase tracking-widest text-foreground-muted">Workforce — MySQL HR</h2>
      <div className="grid shrink-0 gap-2 lg:grid-cols-3">
        <Panel title="Employees by department" icon={UserCog}><BarsH data={data?.hr.by_department || []} colorByIndex /></Panel>
        <Panel title="By role"><BarsH data={data?.hr.by_role || []} /></Panel>
        <Panel title="By event type"><Donut data={data?.hr.by_event || []} /></Panel>
      </div>

      {/* Supply + telemetry */}
      <h2 className="mt-1 shrink-0 px-1 text-[10px] font-semibold uppercase tracking-widest text-foreground-muted">Supply Chain (MongoDB) &amp; Telemetry (Cassandra)</h2>
      <div className="grid shrink-0 gap-2 lg:grid-cols-3 pb-2">
        <Panel title="Supply events by type" icon={Boxes}><BarsH data={data?.supply.by_type || []} colorByIndex /></Panel>
        <Panel title="Supply events by region"><Donut data={data?.supply.by_region || []} /></Panel>
        <Panel title="Telemetry — avg value by metric" icon={Activity}><BarsH data={data?.telemetry.by_metric || []} valueKind="num" /></Panel>
      </div>
    </div>
  )
}