import { useState } from 'react'
import { AlertTriangle } from 'lucide-react'
import { EscalationQueue, EscalationMetricCard } from '@/components/flowpilot'
import { L1EscalationsSection } from '@/components/l1/L1EscalationsSection'

export default function EscalationQueuePage() {
  const [count, setCount] = useState<number | null>(null)

  return (
    <div className="mx-auto max-w-4xl p-6 space-y-6">
      <div className="flex items-center gap-3">
        <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-warning-dim">
          <AlertTriangle size={16} className="text-warning" />
        </span>
        <div>
          <h1 className="font-heading text-xl font-bold text-foreground">Escalation Queue</h1>
          <p className="text-sm text-muted-foreground">
            {count !== null && count > 0
              ? `${count} session${count !== 1 ? 's' : ''} waiting for pickup`
              : 'Sessions from your team waiting for pickup'}
          </p>
        </div>
      </div>

      <EscalationMetricCard period="30d" />

      <EscalationQueue onCountChange={setCount} />

      {/* L1 AI-build handoffs (GET /l1/escalations). Renders nothing when empty,
          so engineers without L1 escalations see no change. */}
      <L1EscalationsSection />
    </div>
  )
}