"use client"
import { useState } from "react"
import { CustomTabs, TabItem } from "@/components/common/CustomTabs"
import { TabsContent } from "@/components/ui/tabs"
import { NotificationsList } from "./NotificatonsList"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { useGetReminderDefaults, useUpdateReminder, useGetNotifications, useMarkAllNotificationsAsRead } from "@/lib/react-query/hooks/reminders"
import type { Reminder } from "@/types/reminders"
import { useTranslations } from "next-intl"

export function NotificationsTabs() {
  const [activeTab, setActiveTab] = useState("all")
  const { data: notifications, isLoading, error } = useGetNotifications()
  const markAllAsReadMutation = useMarkAllNotificationsAsRead()
  const t = useTranslations('notifications')

  // Calculate counts for tabs
  const allCount = notifications?.filter(n => n.type !== "incoming_call").length || 0
  const bookedCount = notifications?.filter(n => n.type === "appointment_booked").length || 0
  // const callCount = notifications?.filter(n => n.type === "incoming_call").length || 0
  const clientCount = notifications?.filter(n => n.type === "client_created").length || 0
  const cancelledCount = notifications?.filter(n => n.type === "appointment_cancelled").length || 0
  const completedCount = notifications?.filter(n => n.type === "appointment_completed").length || 0

  const handleMarkAllAsRead = () => {
    markAllAsReadMutation.mutate()
  }

  const tabItems: TabItem[] = [
    { value: "all", label: t('tabs.all'), count: allCount },
    { value: "appointment_booked", label: t('tabs.appointmentBooked'), count: bookedCount },
    // { value: "incoming_call", label: t('tabs.incomingCall'), count: callCount },
    { value: "client_created", label: t('tabs.clientCreated'), count: clientCount },
    { value: "appointment_cancelled", label: t('tabs.appointmentCancelled'), count: cancelledCount },
    { value: "appointment_completed", label: t('tabs.appointmentCompleted'), count: completedCount }
  ]

  return (
    <div className="w-full mt-6">
      <CustomTabs items={tabItems} activeValue={activeTab} onTabChange={setActiveTab}>
        <div className="w-full">
          <TabsContent value="all">
            <NotificationsList
              onMarkAllAsRead={handleMarkAllAsRead}
              isMarkingAllAsRead={markAllAsReadMutation.isPending}
            />
          </TabsContent>
          <TabsContent value="appointment_booked">
            <NotificationsList
              type="appointment_booked"
              onMarkAllAsRead={handleMarkAllAsRead}
              isMarkingAllAsRead={markAllAsReadMutation.isPending}
            />
          </TabsContent>
          {/* <TabsContent value="incoming_call">
            <NotificationsList
              type="incoming_call"
              onMarkAllAsRead={handleMarkAllAsRead}
              isMarkingAllAsRead={markAllAsReadMutation.isPending}
            />
          </TabsContent> */}
          <TabsContent value="client_created">
            <NotificationsList
              type="client_created"
              onMarkAllAsRead={handleMarkAllAsRead}
              isMarkingAllAsRead={markAllAsReadMutation.isPending}
            />
          </TabsContent>
          <TabsContent value="appointment_cancelled">
            <NotificationsList
              type="appointment_cancelled"
              onMarkAllAsRead={handleMarkAllAsRead}
              isMarkingAllAsRead={markAllAsReadMutation.isPending}
            />
          </TabsContent>
          <TabsContent value="appointment_completed">
            <NotificationsList
              type="appointment_completed"
              onMarkAllAsRead={handleMarkAllAsRead}
              isMarkingAllAsRead={markAllAsReadMutation.isPending}
            />
          </TabsContent>
        </div>
      </CustomTabs>
    </div>
  )
}