hope-events/frontend/src/app/set-banner/page.tsx

"use client";

import React, { useEffect, useState } from "react";
import { useAuth } from "@/hooks/useAuth";
import { useRouter } from "next/navigation";
import { apiFetch } from "@/lib/api";
import { Megaphone } from "lucide-react";

type BannerType = "info" | "warning" | "success" | "danger";

const TYPE_LABELS: Record<BannerType, string> = {
  info:    "Info (blue)",
  warning: "Warning (amber)",
  success: "Success (green)",
  danger:  "Danger (red)",
};

export default function SetBannerPage() {
  const { user, token, loading } = useAuth();
  const router = useRouter();

  const [message, setMessage] = useState("");
  const [type, setType] = useState<BannerType>("info");
  const [liveFrom, setLiveFrom] = useState("");
  const [liveTill, setLiveTill] = useState("");
  const [busy, setBusy] = useState(false);
  const [status, setStatus] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (loading) return;
    if (!user) { router.replace("/login"); return; }
    if (user.role !== "admin" && user.role !== "supervisor") {
      router.replace("/dashboard");
    }
  }, [user, loading, router]);

  // Load current banner
  useEffect(() => {
    apiFetch<any>("/api/banner")
      .then(b => {
        if (!b) return;
        setMessage(b.message || "");
        setType(b.type || "info");
        // Convert ISO strings back to datetime-local format
        setLiveFrom(b.liveFrom ? toLocalInput(b.liveFrom) : "");
        setLiveTill(b.liveTill ? toLocalInput(b.liveTill) : "");
      })
      .catch(() => {});
  }, []);

  function toLocalInput(iso: string) {
    const d = new Date(iso);
    if (isNaN(d.getTime())) return "";
    // datetime-local wants "YYYY-MM-DDTHH:MM"
    const pad = (n: number) => String(n).padStart(2, "0");
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
  }

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!token) return;
    setError(null);
    setStatus(null);
    setBusy(true);
    try {
      await apiFetch("/api/banner", {
        method: "POST",
        authToken: token,
        body: {
          message,
          type,
          liveFrom: liveFrom ? new Date(liveFrom).toISOString() : null,
          liveTill: liveTill ? new Date(liveTill).toISOString() : null,
        },
      });
      setStatus("Banner saved.");
    } catch (e: any) {
      setError(e?.message || "Failed to save banner.");
    } finally {
      setBusy(false);
    }
  };

  const clear = async () => {
    if (!token) return;
    setError(null);
    setStatus(null);
    setBusy(true);
    try {
      await apiFetch("/api/banner", {
        method: "POST",
        authToken: token,
        body: { message: "", type: "info", liveFrom: null, liveTill: null },
      });
      setMessage("");
      setType("info");
      setLiveFrom("");
      setLiveTill("");
      setStatus("Banner cleared.");
    } catch (e: any) {
      setError(e?.message || "Failed to clear banner.");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex items-start justify-center px-4 py-12">
      <div className="w-full max-w-lg border rounded-xl bg-white shadow-sm p-6">
        <div className="flex items-center gap-3 mb-1">
          <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
            <Megaphone className="w-5 h-5 text-brand-600" />
          </div>
          <h1 className="text-xl font-semibold text-gray-900">Site Banner</h1>
        </div>
        <p className="text-sm text-gray-500 mb-6 mt-2">Set a message that appears at the top of every page for visitors within the scheduled window.</p>

        <form onSubmit={submit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1">Message</label>
            <input
              className="w-full border rounded px-3 py-2 text-sm"
              placeholder="e.g. Registration for Camp 2026 is now open!"
              value={message}
              onChange={e => setMessage(e.target.value)}
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-1">Type</label>
            <select className="w-full border rounded px-3 py-2 text-sm" value={type} onChange={e => setType(e.target.value as BannerType)}>
              {(Object.keys(TYPE_LABELS) as BannerType[]).map(t => (
                <option key={t} value={t}>{TYPE_LABELS[t]}</option>
              ))}
            </select>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium mb-1">Live from</label>
              <input type="datetime-local" className="w-full border rounded px-3 py-2 text-sm" value={liveFrom} onChange={e => setLiveFrom(e.target.value)} />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Live until</label>
              <input type="datetime-local" className="w-full border rounded px-3 py-2 text-sm" value={liveTill} onChange={e => setLiveTill(e.target.value)} />
            </div>
          </div>

          <p className="text-xs text-gray-500">Leave dates empty to show the banner immediately with no end date. Times use your local timezone.</p>

          {error && <p className="text-sm text-red-600">{error}</p>}
          {status && <p className="text-sm text-emerald-700">{status}</p>}

          <div className="flex gap-3 pt-1">
            <button type="submit" disabled={busy} className="px-4 py-2 rounded bg-brand-600 text-white text-sm disabled:opacity-60 hover:bg-brand-700">
              {busy ? "Saving…" : "Save banner"}
            </button>
            <button type="button" onClick={clear} disabled={busy} className="px-4 py-2 rounded bg-gray-100 text-gray-700 text-sm disabled:opacity-60 hover:bg-gray-200">
              Clear banner
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}