"use client";

import { useState } from "react";
import { BellPlus } from "lucide-react";
import { ReminderForm } from "@/components/reminders/reminder-form";
import { Modal } from "@/components/ui/modal";
import { useReminders } from "@/hooks/use-reminders";
import { requestBrowserNotificationPermissionOnce } from "@/lib/browser-notifications";
import { cn } from "@/lib/utils";
import type { ReminderSourceType } from "@/types";

interface RemindMeButtonProps {
  body?: string | null;
  className?: string;
  label?: string;
  sourceId: string;
  sourceTitle: string;
  sourceType: ReminderSourceType;
  sourceUrl?: string | null;
  title?: string;
  variant?: "icon" | "pill";
}

export function RemindMeButton({
  body,
  className,
  label = "Remind me",
  sourceId,
  sourceTitle,
  sourceType,
  sourceUrl,
  title,
  variant = "pill",
}: RemindMeButtonProps) {
  const { createReminder } = useReminders();
  const [open, setOpen] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(input: Parameters<typeof createReminder>[0]) {
    setSubmitting(true);
    try {
      void requestBrowserNotificationPermissionOnce();
      await createReminder(input);
      setOpen(false);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className={cn(
          variant === "icon"
            ? "inline-flex h-9 w-9 items-center justify-center rounded-xl border border-white/[0.06] bg-white/[0.03] text-white/40 transition-colors hover:bg-white/[0.07] hover:text-white/70"
            : "inline-flex items-center gap-2 rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-2.5 text-[13px] font-semibold text-white/70 transition-all hover:border-white/[0.14] hover:bg-white/[0.07] hover:text-white",
          className,
        )}
        title={label}
      >
        <BellPlus className={variant === "icon" ? "h-4 w-4" : "h-3.5 w-3.5"} />
        {variant !== "icon" && label}
      </button>

      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Remind me"
        className="max-w-3xl border-white/[0.08] bg-[#0e0f16]"
      >
        <ReminderForm
          defaultBody={body || undefined}
          defaultSource={{
            source_id: sourceId,
            source_title: sourceTitle,
            source_type: sourceType,
            source_url: sourceUrl || null,
          }}
          defaultTitle={title || `Reminder: ${sourceTitle}`}
          onCancel={() => setOpen(false)}
          onSubmit={handleSubmit}
          submitting={submitting}
        />
      </Modal>
    </>
  );
}