hope-events/frontend/src/app/dashboard/user/donate/page.tsx

"use client";
import React, { useEffect, useState } from "react";
import { useAuth } from "@/hooks/useAuth";
import { apiFetch } from "@/lib/api";
import { useDismissingState } from "@/hooks/useDismissingState";
import { HandHeart } from "lucide-react";

export default function DonatePage() {
  const { token } = useAuth();
  const [events, setEvents] = useState<any[]>([]);
  const [eventId, setEventId] = useState<string>("");
  const [amount, setAmount] = useState<string>("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useDismissingState<string | null>(null);
  const [info, setInfo] = useDismissingState<string | null>(null);

  useEffect(() => {
    (async () => {
      try {
        const evs = await apiFetch<any[]>("/api/events");
        setEvents(evs);
        if (evs.length > 0) setEventId(evs[0].id);
      } catch (e: any) {
        setError(e?.message || "Failed to load events");
      }
    })();
  }, []);

  const submit = async () => {
    if (!token) { setError("Please login"); return; }
    const amt = parseFloat(amount);
    if (!(amt > 0)) { setError("Enter a valid amount"); return; }
    if (amt < 15) { setError("Minimum donation is R15"); return; }
    if (!eventId) { setError("Select an event"); return; }
    try {
      setError(null);
      setInfo(null);
      setLoading(true);
      const res = await apiFetch<{ redirectUrl: string }>("/api/payments/yoco-checkout", {
        method: "POST",
        body: {
          eventId,
          amount: amt,
          successUrl: window.location.origin + "/payment/success",
          cancelUrl: window.location.origin + "/payment/cancel",
          failureUrl: window.location.origin + "/payment/failure",
        },
        authToken: token,
      });
      setInfo("Redirecting to payment...");
      window.location.href = res.redirectUrl;
    } catch (e: any) {
      setError(e?.message || "Failed to start donation checkout");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-xl mx-auto w-full p-6">
      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-rose-50 flex items-center justify-center shrink-0">
          <HandHeart className="w-5 h-5 text-rose-600" />
        </div>
        <div>
          <h1 className="text-2xl font-semibold text-gray-900">Make a donation</h1>
          <p className="text-sm text-gray-500">Support an event or the ministry directly.</p>
        </div>
      </div>

      <div className="border rounded-xl p-5 bg-white shadow-sm">
        {error && <p className="text-red-600 text-sm mb-3 bg-red-50 border border-red-100 rounded-lg p-2.5">{error}</p>}
        {info && <p className="text-green-700 text-sm mb-3 bg-green-50 border border-green-100 rounded-lg p-2.5">{info}</p>}

        <label className="block text-sm font-medium text-gray-700 mb-1">Event</label>
        <select className="w-full border rounded-lg px-3 py-2 mb-4 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400" value={eventId} onChange={(e)=>setEventId(e.target.value)}>
          {events.map(ev => <option key={ev.id} value={ev.id}>{ev.title}</option>)}
        </select>

        <label className="block text-sm font-medium text-gray-700 mb-1">Amount (R)</label>
        <input
          type="number"
          min="15"
          step="1"
          placeholder="Enter amount (min R15)"
          value={amount}
          onChange={(e)=>setAmount(e.target.value)}
          className="w-full border rounded-lg px-3 py-2 mb-1 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
        />
        <p className="text-xs text-gray-500 mb-4">Minimum donation is R15.</p>

        <button
          disabled={loading}
          onClick={submit}
          className="w-full bg-brand-600 hover:bg-brand-700 text-white px-4 py-2.5 rounded-lg disabled:opacity-60 font-medium transition-colors"
        >{loading?"Starting checkout...":"Donate"}</button>
      </div>
    </div>
  );
}