'use client'

import { Sidebar, Header, MobileNav } from '@/components/layout'
import { AlertPanel, useAlerts } from '@/components/alerts'
import { useSidebar } from '@/app/providers'
import { RefreshCw } from 'lucide-react'

export default function AlertsPage() {
  const { isOpen, toggle, close } = useSidebar()
  const { regenerateAlerts, dismissAll, unreadCount } = useAlerts()

  const handleRegenerateAlerts = () => {
    regenerateAlerts()
  }

  const handleDismissAll = () => {
    dismissAll()
  }

  return (
    <div className="min-h-screen bg-slate-950">
      <Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />

      <div className="lg:ml-64 min-h-screen flex flex-col">
        <Header onMenuClick={toggle} title="Alertas" />

        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
          <div className="max-w-4xl mx-auto">
            {/* Action Buttons */}
            <div className="flex flex-wrap gap-3 mb-6">
              <button
                onClick={handleRegenerateAlerts}
                className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/20"
              >
                <RefreshCw className="h-4 w-4" />
                Regenerar Alertas
              </button>

              <button
                onClick={handleDismissAll}
                className="inline-flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-slate-500/20"
              >
                Limpiar Todas
              </button>
            </div>

            {/* Alert Panel */}
            <div className="w-full">
              <AlertPanel />
            </div>
          </div>
        </main>

        <MobileNav unreadAlertsCount={unreadCount} />
      </div>
    </div>
  )
}