cm_whatsapp_bot_v1/apps/web/src/components/reminder-wizard/review-submit-client.tsx

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { CalendarCheckIcon, AlertCircleIcon, Loader2Icon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { createReminderAction, updateReminderAction } from "@/actions/reminders";
import { cn } from "@/lib/utils";
import type { MessagePart } from "@/lib/reminder-messages";

interface ReviewSubmitClientProps {
  accountId: string;
  groupIds?: string;
  name?: string;
  messages: MessagePart[];
  scheduledAt: string;
  rrule?: string;
  editReminderId?: string;
  timezone: string;
}

export function ReviewSubmitClient({
  accountId,
  groupIds,
  name,
  messages,
  scheduledAt,
  rrule,
  editReminderId,
  timezone,
}: ReviewSubmitClientProps) {
  const router = useRouter();
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSchedule() {
    setSubmitting(true);
    setError(null);

    try {
      const payload = {
        accountId,
        groupIds: groupIds ? groupIds.split(",").filter(Boolean) : [],
        name: name?.trim() || null,
        messages,
        scheduledAtIso: scheduledAt,
        rrule: rrule ?? null,
        timezone,
      };
      const result = editReminderId
        ? await updateReminderAction({ ...payload, reminderId: editReminderId })
        : await createReminderAction(payload);

      if (result.ok) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        router.push(`/reminders/${result.reminderId}` as any);
      } else {
        setError(result.error);
        setSubmitting(false);
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "An unexpected error occurred.");
      setSubmitting(false);
    }
  }

  return (
    <div className="space-y-3 pt-2">
      {error && (
        <div className="flex items-start gap-2 rounded-lg bg-destructive/10 px-3 py-2.5 text-sm text-destructive">
          <AlertCircleIcon className="size-4 shrink-0 mt-0.5" />
          <span>{error}</span>
        </div>
      )}

      <div className="flex justify-end">
        <Button
          type="button"
          size="lg"
          onClick={handleSchedule}
          disabled={submitting}
          className={cn("gap-2", submitting && "cursor-wait")}
        >
          {submitting ? (
            <>
              <Loader2Icon className="size-4 animate-spin" />
              {editReminderId ? "Saving…" : "Scheduling…"}
            </>
          ) : (
            <>
              <CalendarCheckIcon className="size-4" />
              {editReminderId ? "Save changes" : "Schedule Reminder"}
            </>
          )}
        </Button>
      </div>
    </div>
  );
}