import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Network, Code2, ListChecks, ArrowRight } from 'lucide-react'
import { sidebarApi } from '@/api'

export function KnowledgeBaseCards() {
  const navigate = useNavigate()
  const [flowCount, setFlowCount] = useState(0)

  useEffect(() => {
    sidebarApi.getStats()
      .then((stats) => setFlowCount(stats.tree_counts.total))
      .catch(() => {})
  }, [])

  const items = [
    { label: 'Flows', value: flowCount, icon: Network, color: '#a78bfa', href: '/trees' },
    { label: 'Scripts', value: '\u2014', icon: Code2, color: '#2dd4bf', href: '/scripts' },
    { label: 'Pending Review', value: '\u2014', icon: ListChecks, color: '#fbbf24', href: '/review-queue' },
  ]

  return (
    <div className="glass-card-static">
      <div
        className="flex items-center justify-between px-5 py-3"
        style={{ borderBottom: '1px solid var(--glass-border)' }}
      >
        <h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3>
        <button
          onClick={() => navigate('/trees')}
          className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
        >
          Browse <ArrowRight size={10} />
        </button>
      </div>
      <div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
        {items.map((item) => (
          <button
            key={item.label}
            onClick={() => navigate(item.href)}
            className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
          >
            <item.icon size={20} style={{ color: item.color }} />
            <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
            <p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
              {item.label}
            </p>
          </button>
        ))}
      </div>
    </div>
  )
}