"use client";

import { useRouter } from "next/navigation";
import { BellPlus, BellRing } from "lucide-react";
import { NodeViewWrapper } from "@tiptap/react";
import type { NodeViewProps } from "@tiptap/react";
import { RemindMeButton } from "@/components/reminders/remind-me-button";
import type { ReminderStatus } from "@/types";
import type { ReminderBlockOptions } from "./reminder-node";

interface ReminderBlockViewProps extends NodeViewProps {
  options: ReminderBlockOptions;
}

const STATUS_DOT: Record<ReminderStatus, string> = {
  scheduled: "bg-sky-400",
  triggered: "bg-amber-400",
  snoozed: "bg-amber-400",
  done: "bg-emerald-400",
  cancelled: "bg-white/20",
};

function formatRemindAt(value: string) {
  return new Date(value).toLocaleString("de-DE", {
    day: "2-digit",
    month: "short",
    hour: "2-digit",
    minute: "2-digit",
  });
}

export function ReminderBlockView({ node, updateAttributes, options }: ReminderBlockViewProps) {
  const router = useRouter();
  const reminderId = node.attrs.reminderId as string | null;
  const title = node.attrs.title as string | null;
  const remindAt = node.attrs.remindAt as string | null;
  const status = (node.attrs.status as ReminderStatus | null) || "scheduled";

  if (reminderId && title && remindAt) {
    return (
      <NodeViewWrapper className="my-2" contentEditable={false}>
        <button
          type="button"
          onClick={() => router.push("/reminders")}
          className="group flex w-full items-center gap-2.5 rounded-xl border border-border bg-card/60 px-3.5 py-2.5 text-left transition-colors hover:bg-accent/40"
        >
          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-accent text-accent-foreground">
            <BellRing className="h-3.5 w-3.5" />
          </span>
          <span className="min-w-0 flex-1">
            <span className="block truncate text-[13px] font-medium">{title}</span>
            <span className="block text-[11px] text-muted-foreground">{formatRemindAt(remindAt)}</span>
          </span>
          <span className={`h-2 w-2 shrink-0 rounded-full ${STATUS_DOT[status]}`} />
        </button>
      </NodeViewWrapper>
    );
  }

  return (
    <NodeViewWrapper className="my-2" contentEditable={false}>
      <RemindMeButton
        sourceId={options.parentNoteId}
        sourceTitle={options.parentNoteTitle}
        sourceType="note"
        sourceUrl={`/notes/${options.parentNoteId}`}
        onCreated={(reminder) =>
          updateAttributes({
            reminderId: reminder.id,
            title: reminder.title,
            remindAt: reminder.remind_at,
            status: reminder.status,
          })
        }
        trigger={(open) => (
          <button
            type="button"
            onClick={open}
            className="flex items-center gap-2 rounded-xl border border-dashed border-border bg-transparent px-3.5 py-2.5 text-[13px] font-medium text-muted-foreground transition-colors hover:border-ring hover:text-foreground"
          >
            <BellPlus className="h-3.5 w-3.5" />
            Set a reminder
          </button>
        )}
      />
    </NodeViewWrapper>
  );
}