"use client"
import { AppSidebar } from "@/components/app-sidebar"
import { SiteHeader } from "@/components/site-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import { useState, useEffect } from "react"
import { useTranslation } from "react-i18next"
import { NotificationCard } from "@/components/notification-card"
import { Notification } from "../types"

export default function ExecutionNotificationsPage() {
  const { t } = useTranslation()
  const [notifications, setNotifications] = useState<Notification[]>([])

  useEffect(() => {
    fetch("/notifications/api/notifications?category=execution")
      .then(res => res.json())
      .then(setNotifications)
      .catch(error => console.error("Error loading notifications:", error))
  }, [])

  async function handleSolve(id: number) {
    await fetch("/notifications/api/notifications", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id, category: "execution", status: "done" })
    })
    setNotifications(notifications.map(n => 
      n.id === id ? { ...n, status: "done" } : n
    ))
  }

  return (
    <SidebarProvider style={{
      "--sidebar-width": "calc(var(--spacing) * 72)",
      "--header-height": "calc(var(--spacing) * 12)",
    } as React.CSSProperties}>
      <AppSidebar variant="inset" />
      <SidebarInset>
        <SiteHeader title={t("notifications.execution")} />
        <div className="flex flex-1 flex-col">
          <div className="@container/main flex flex-1 flex-col gap-2">
            <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
              <div className="flex justify-between items-center px-4 lg:px-6">
                <h2 className="text-2xl font-bold">{t("notifications.execution")}</h2>
              </div>
              <div className="grid grid-cols-1 gap-4 px-4 lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-3">
                {notifications.map(notification => (
                  <NotificationCard
                    key={notification.id}
                    notification={notification}
                    category="execution"
                    onSolve={handleSolve}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}