"use client";

import { useActionState } from "react";
import { Button } from "@/components/ui/button";
import { saveNotificationPreferences, type PreferencesState } from "@/server/actions/notifications/preferences";

export type PreferenceItem = { type: string; label: string; email: boolean; mandatory: boolean };

/** E-mail opt-out per notification type (in-app notifications are always on). */
export function NotificationPreferencesForm({
  items,
  labels,
}: {
  items: PreferenceItem[];
  labels: { email: string; mandatory: string; save: string; saved: string; error: string };
}) {
  const [state, action, pending] = useActionState(saveNotificationPreferences, { status: "idle" } as PreferencesState);

  return (
    <form action={action} className="space-y-3">
      <ul className="divide-y rounded-lg border">
        {items.map((item) => {
          const id = `pref-${item.type}`;
          return (
            <li key={item.type} className="flex min-h-11 items-center justify-between gap-3 px-3 py-1.5">
              <label htmlFor={id} className="flex-1 text-[13px]">
                {item.label}
                {item.mandatory && <span className="block text-[11.5px] text-muted-foreground">{item.mandatory ? labels.mandatory : null}</span>}
              </label>
              <span className="flex items-center gap-2 text-[12px] text-muted-foreground">
                {labels.email}
                <input
                  id={id}
                  type="checkbox"
                  name="emailOn"
                  value={item.type}
                  defaultChecked={item.email}
                  disabled={item.mandatory}
                  className="size-5 accent-[var(--primary)]"
                />
              </span>
            </li>
          );
        })}
      </ul>
      <div className="flex items-center gap-3">
        <Button type="submit" disabled={pending} className="min-h-11">
          {labels.save}
        </Button>
        <p role="status" className="text-[12.5px]">
          {state.status === "saved" && <span className="text-[var(--ok)]">✓ {labels.saved}</span>}
          {state.status === "error" && <span className="text-[var(--risk)]">⚠ {labels.error}</span>}
        </p>
      </div>
    </form>
  );
}