import React from "react";
import { useReminder } from "@/shared/hooks/useReminder";
import { useNavigate } from "react-router-dom";
import { Clock, Trash2, Bell, BellOff } from "lucide-react";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { Button } from "@/shared/common/ui/button";
import { useLocalizedName } from "@/shared/common/localizedName";
import { toast } from "sonner";

dayjs.extend(relativeTime);

const ReminderList = () => {
  const { pendingReminders, deleteReminder, snoozeReminder } = useReminder();
  const navigate = useNavigate();
  const localizedName = useLocalizedName();

  const handleReminderClick = (reminder: any) => {
    const metadataType = reminder.metadata?.route;
    const recordTypeKey = reminder.metadata?.recordType;

    // Same routing logic as notifications
    if (metadataType === "Outgoing") {
      navigate(`/record-management/viewApproval/${reminder.itemId}`);
    } else if (metadataType === "Incoming") {
      switch (recordTypeKey) {
        case "external":
          navigate(
            `/record-management/viewIncoming/incoming/${reminder.itemId}`
          );
          break;
        case "internal":
          navigate(
            `/record-management/viewIncoming/internal/${reminder.itemId}`
          );
          break;
        case "cc":
          navigate(`/record-management/viewIncoming/${reminder.itemId}`);
          break;
        case "non_smart_user":
          navigate(
            `/record-management/viewIncoming/incoming/${reminder.itemId}`
          );
          break;
      }
    } else {
      toast.info("No specific route defined for this reminder");
    }
  };

  const handleDelete = (id: string, e: React.MouseEvent) => {
    e.stopPropagation();
    deleteReminder(id);
    toast.success("Reminder deleted");
  };

  const handleSnooze = (id: string, minutes: number, e: React.MouseEvent) => {
    e.stopPropagation();
    snoozeReminder(id, minutes);
  };

  if (pendingReminders.length === 0) {
    return (
      <div className="text-center py-6">
        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
          <BellOff className="h-5 w-5 text-gray-400" />
        </div>
        <h3 className="mt-2 text-sm font-medium text-gray-900">
          No active reminders
        </h3>
        <p className="mt-1 text-xs text-gray-500">
          Set reminders from notifications to see them here
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between mb-2">
        <h3 className="text-sm font-medium text-gray-900">
          Active Reminders ({pendingReminders.length})
        </h3>
      </div>

      <div className="space-y-2 max-h-[500px] overflow-y-auto">
        {pendingReminders.map((reminder) => (
          <div
            key={reminder.id}
            className="flex items-start gap-3 p-3 rounded-md border bg-blue-50 border-blue-400 hover:shadow-sm transition-all cursor-pointer"
            onClick={() => handleReminderClick(reminder)}
          >
            <div className="mt-1">
              <Clock className="w-5 h-5 text-blue-600" />
            </div>

            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <h4 className="font-medium text-sm text-gray-900 break-all">
                  {localizedName(reminder.subject as { am: string; en: string })}
                </h4>
                <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
              </div>
              <p className="text-xs text-gray-600">{reminder.message}</p>
              <div className="flex items-center gap-2 mt-1">
                <p className="text-[11px] text-blue-600 font-medium">
                  Remind {dayjs(reminder.remindAt).fromNow()}
                </p>
                <span className="text-[11px] text-gray-400">
                  ({dayjs(reminder.remindAt).format("MMM D, h:mm A")})
                </span>
              </div>
            </div>

            <div className="flex items-center gap-1">
              <Button
                variant="ghost"
                size="sm"
                className="h-7 w-7 p-0 hover:bg-blue-100"
                onClick={(e) => handleSnooze(reminder.id, 15, e)}
                title="Snooze 15 min"
              >
                <Bell className="h-4 w-4 text-gray-500" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                className="h-7 w-7 p-0 hover:bg-red-100"
                onClick={(e) => handleDelete(reminder.id, e)}
                title="Delete reminder"
              >
                <Trash2 className="h-4 w-4 text-red-500" />
              </Button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ReminderList;
