"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { MessageSquare } from "lucide-react"
import { useGetReminders, useUpdateReminder } from "@/lib/react-query/hooks/reminders"
import { useToaster } from "@/context/ToasterContext"
import { useState } from "react"
import EditReminderModal from "./EditReminderModal"
import { LoadingReminders } from "./LoadingReminders"
import type { Reminder } from "@/types/reminders"
import { useTranslations } from "next-intl"

function getReminderTitle(reminder: any, t: any) {
  const { type, schedule, inactiveDays } = reminder
  if (type === "appointment") {
    if (schedule === "30m_before") return t("reminders.list.titles.30mAppointment")
    if (schedule === "2h_before") return t("reminders.list.titles.2hAppointment")
    if (schedule === "24h_before") return t("reminders.list.titles.24hAppointment")
    return t("reminders.list.titles.appointment")
  }
  if (type === "birthday") {
    return t("reminders.list.titles.birthday")
  }
  if (type === "inactive_client") {
    return t("reminders.list.titles.inactiveClient")
  }
  if (type === "new_client") {
    return t("reminders.list.titles.newClient")
  }
  return t("reminders.list.titles.automation")
}

function getReminderDescription(reminder: any, t: any) {
  const { message } = reminder
  return message || t("reminders.list.descriptions.automated")
}

export function RemindersList() {
  const { data: reminders, isLoading } = useGetReminders()
  const updateReminder = useUpdateReminder()
  const toast = useToaster()
  const [editModalOpen, setEditModalOpen] = useState(false)
  const [selectedReminder, setSelectedReminder] = useState<Reminder | null>(null)
  const t = useTranslations()

  const handleToggle = (reminder: Reminder) => {
    updateReminder.mutate({
      id: reminder._id,
      payload: { isEnabled: !reminder.isEnabled }
    })
  }

  const handleEdit = (reminder: Reminder) => {
    setSelectedReminder(reminder)
    setEditModalOpen(true)
  }

  if (isLoading) {
    return <LoadingReminders />
  }

  return (
    <div className="space-y-4">
      {reminders?.map(reminder => (
        <Card key={reminder._id} className="py-3 rounded-md">
          <CardContent className="px-4 flex flex-col md:flex-row md:justify-between gap-4 md:gap-0">
            <div className="flex flex-col gap-1.5 flex-1">
              <h4 className="text-gray-900 font-semibold text-base">{getReminderTitle(reminder, t)}</h4>
              <p className="text-gray-500 text-sm">{getReminderDescription(reminder, t)}</p>
              <div className="flex flex-col sm:flex-row gap-2.5">
                <div className="flex gap-1">
                  {/* {reminder.channels.map((channel: string) => (
                    <Badge key={channel} className="bg-gray-200 rounded-sm text-gray-900 text-xs capitalize">
                      {channel === ""}
                    </Badge>
                  ))} */}
                </div>

                <div className="flex flex-col sm:flex-row gap-2">
                  {/* <Button className="bg-[#4a6392] text-white py-1 px-2 h-7 rounded-sm text-sm">
                    <Settings size={16} className="mr-1" />
                    Configure
                  </Button> */}
                  <Button
                    variant="outline"
                    className="text-[#4a6392] border border-[#4a6392] bg-transparent py-1 px-2 h-7 rounded-sm text-sm"
                    onClick={() => handleEdit(reminder)}
                  >
                    <MessageSquare size={16} className="mr-1" />
                    {t("reminders.list.editTemplate")}
                  </Button>
                </div>
              </div>
            </div>
            <div className="md:shrink-0 flex items-start">
              <Switch
                checked={reminder.isEnabled}
                onCheckedChange={() => handleToggle(reminder)}
                onClick={e => e.stopPropagation()}
                className="w-8 h-5 **:data-[slot=switch-thumb]:size-4 data-[state=checked]:bg-[#4a6392]"
              />
            </div>
          </CardContent>
        </Card>
      ))}
      {(!reminders || reminders.length === 0) && <div className="text-center py-8 text-gray-500">{t("reminders.list.noReminders")}</div>}

      <EditReminderModal open={editModalOpen} setOpen={setEditModalOpen} reminder={selectedReminder} />
    </div>
  )
}