famapp/src/modules/garden/components/care-schedule-editor.tsx

"use client";

import Link from "next/link";
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import {
  deleteCareSchedule,
  scheduleOnCalendar,
  toggleCareSchedule,
  upsertCareSchedule,
} from "../server/actions";
import type { CalendarDto } from "../server/calendar-bridge";
import type { CareScheduleDto } from "../server/queries";

const CARE_TYPES = ["watering", "fertilizing", "repotting", "pruning", "pest-control", "other"];

type Props = {
  plantId: string;
  schedules: CareScheduleDto[];
  calendars: CalendarDto[];
};

function daysLabel(n: number | null): string {
  if (n === null) return "No due date";
  if (n < 0) return `${Math.abs(n)} day${Math.abs(n) !== 1 ? "s" : ""} overdue`;
  if (n === 0) return "Due today";
  return `Due in ${n} day${n !== 1 ? "s" : ""}`;
}

export function CareScheduleEditor({ plantId, schedules, calendars }: Props) {
  const [showForm, setShowForm] = useState(false);
  const [careType, setCareType] = useState("watering");
  const [intervalDays, setIntervalDays] = useState("7");
  const [formError, setFormError] = useState<string | null>(null);
  const [calendarOpenId, setCalendarOpenId] = useState<string | null>(null);
  const [selectedCalendarId, setSelectedCalendarId] = useState(calendars[0]?.id ?? "");
  const [reminderMinutes, setReminderMinutes] = useState("");
  const [calendarSuccess, setCalendarSuccess] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const router = useRouter();

  function handleAddSchedule(e: React.FormEvent) {
    e.preventDefault();
    const days = parseInt(intervalDays, 10);
    if (isNaN(days) || days < 1 || days > 365) {
      setFormError("Interval must be between 1 and 365 days.");
      return;
    }
    setFormError(null);
    startTransition(async () => {
      try {
        await upsertCareSchedule({ plantId, careType, intervalDays: days });
        setShowForm(false);
        setCareType("watering");
        setIntervalDays("7");
        router.refresh();
      } catch {
        setFormError("Failed to save schedule.");
      }
    });
  }

  function handleDelete(id: string) {
    startTransition(async () => {
      await deleteCareSchedule({ id });
      router.refresh();
    });
  }

  function handleToggle(id: string, enabled: boolean) {
    startTransition(async () => {
      await toggleCareSchedule({ id, enabled });
      router.refresh();
    });
  }

  function handleScheduleOnCalendar(scheduleId: string) {
    if (!selectedCalendarId) return;
    startTransition(async () => {
      try {
        await scheduleOnCalendar({
          scheduleId,
          calendarId: selectedCalendarId,
          reminderMinutesBefore: reminderMinutes ? parseInt(reminderMinutes, 10) : undefined,
        });
        setCalendarOpenId(null);
        setCalendarSuccess(scheduleId);
        setTimeout(() => setCalendarSuccess(null), 4000);
      } catch (err) {
        setFormError(err instanceof Error ? err.message : "Failed to add to calendar.");
      }
    });
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between">
        <p className="text-sm font-semibold text-[var(--ink-mute)] uppercase tracking-wide">
          Schedules
        </p>
        <button
          className="btn btn-ghost btn-xs"
          onClick={() => setShowForm((v) => !v)}
          disabled={isPending}
        >
          {showForm ? "Cancel" : "Add schedule"}
        </button>
      </div>

      {showForm && (
        <form
          onSubmit={handleAddSchedule}
          className="flex flex-col gap-2 p-3 bg-[var(--surface-2)] rounded-lg"
        >
          <div className="flex gap-2">
            <div className="flex flex-col gap-1 flex-1">
              <label htmlFor="sched-care-type" className="text-xs font-medium">
                Care type
              </label>
              <select
                id="sched-care-type"
                value={careType}
                onChange={(e) => setCareType(e.target.value)}
                className="input input-xs"
              >
                {CARE_TYPES.map((t) => (
                  <option key={t} value={t}>
                    {t.charAt(0).toUpperCase() + t.slice(1).replace("-", " ")}
                  </option>
                ))}
              </select>
            </div>
            <div className="flex flex-col gap-1 w-28">
              <label htmlFor="sched-interval" className="text-xs font-medium">
                Interval (days)
              </label>
              <input
                id="sched-interval"
                type="number"
                min={1}
                max={365}
                value={intervalDays}
                onChange={(e) => setIntervalDays(e.target.value)}
                className="input input-xs"
                required
              />
            </div>
          </div>
          {formError && <p className="text-xs text-red-500">{formError}</p>}
          <button type="submit" className="btn btn-primary btn-xs self-start" disabled={isPending}>
            {isPending ? "Saving…" : "Add"}
          </button>
        </form>
      )}

      {schedules.length === 0 && !showForm && (
        <p className="text-sm text-[var(--ink-mute)]">No schedules yet.</p>
      )}

      {schedules.map((s) => (
        <div key={s.id} className="flex flex-col gap-1">
          <div
            className={`flex items-center justify-between gap-2 p-2 rounded-lg border ${
              s.isOverdue
                ? "border-red-300 bg-red-50 dark:bg-red-950/20"
                : "border-[var(--ink-faint)]"
            }`}
          >
            <div className="flex flex-col gap-0.5">
              <span className="text-sm font-medium capitalize">{s.careType}</span>
              <span className="text-xs text-[var(--ink-mute)]">
                Every {s.intervalDays} days · {daysLabel(s.daysUntilDue)}
              </span>
            </div>
            <div className="flex items-center gap-2 shrink-0">
              {calendars.length > 0 && s.nextDueAt && (
                <button
                  onClick={() => setCalendarOpenId(calendarOpenId === s.id ? null : s.id)}
                  disabled={isPending}
                  title="Add to calendar"
                  className="text-xs text-[var(--ink-mute)] hover:text-[var(--ink)]"
                >
                  📅
                </button>
              )}
              <button
                onClick={() => handleToggle(s.id, !s.enabled)}
                disabled={isPending}
                title={s.enabled ? "Disable" : "Enable"}
                className={`text-xs px-2 py-0.5 rounded-full border transition-colors ${
                  s.enabled
                    ? "border-green-400 text-green-700 dark:text-green-400"
                    : "border-[var(--ink-faint)] text-[var(--ink-mute)]"
                }`}
              >
                {s.enabled ? "Active" : "Paused"}
              </button>
              <button
                onClick={() => handleDelete(s.id)}
                disabled={isPending}
                title="Delete schedule"
                className="text-[var(--ink-mute)] hover:text-red-500 text-xs"
              >
                ✕
              </button>
            </div>
          </div>

          {calendarOpenId === s.id && (
            <div className="flex flex-col gap-2 p-3 bg-[var(--surface-2)] rounded-lg border border-[var(--ink-faint)] ml-2">
              <div className="flex gap-2">
                <div className="flex flex-col gap-1 flex-1">
                  <label htmlFor={`cal-select-${s.id}`} className="text-xs font-medium">
                    Calendar
                  </label>
                  <select
                    id={`cal-select-${s.id}`}
                    value={selectedCalendarId}
                    onChange={(e) => setSelectedCalendarId(e.target.value)}
                    className="input input-xs"
                  >
                    {calendars.map((c) => (
                      <option key={c.id} value={c.id}>
                        {c.name}
                      </option>
                    ))}
                  </select>
                </div>
                <div className="flex flex-col gap-1 w-28">
                  <label htmlFor={`remind-${s.id}`} className="text-xs font-medium">
                    Remind (min)
                  </label>
                  <input
                    id={`remind-${s.id}`}
                    type="number"
                    min={0}
                    max={1440}
                    placeholder="optional"
                    value={reminderMinutes}
                    onChange={(e) => setReminderMinutes(e.target.value)}
                    className="input input-xs"
                  />
                </div>
              </div>
              <div className="flex gap-2 items-center">
                <button
                  onClick={() => handleScheduleOnCalendar(s.id)}
                  disabled={isPending || !selectedCalendarId}
                  className="btn btn-primary btn-xs"
                >
                  {isPending ? "Scheduling…" : "Schedule"}
                </button>
                <button onClick={() => setCalendarOpenId(null)} className="btn btn-ghost btn-xs">
                  Cancel
                </button>
              </div>
            </div>
          )}

          {calendarSuccess === s.id && (
            <p className="text-xs text-green-600 dark:text-green-400 ml-2">
              Event added to calendar.{" "}
              <Link href="/calendar" className="underline">
                View in calendar →
              </Link>
            </p>
          )}
        </div>
      ))}
    </div>
  );
}