"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";

const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api";

type FormState = "idle" | "loading" | "success" | "error";

function Message({ state }: { state: FormState }) {
  if (state === "success")
    return (
      <div className="flex items-center gap-2 rounded-md border border-[var(--color-primary)]/30 bg-[var(--color-primary)]/10 p-3 text-sm font-medium text-[var(--color-primary-deep)]">
        Submitted successfully! We will be in touch soon.
      </div>
    );
  if (state === "error")
    return (
      <div className="flex items-center gap-2 rounded-md border border-[#e8a49a]/40 bg-[#fdece8] p-3 text-sm font-medium text-[#b5472e]">
        Something went wrong. Please try again.
      </div>
    );
  return null;
}

async function postForm(path: string, form: HTMLFormElement) {
  const body = Object.fromEntries(new FormData(form).entries());
  const res = await fetch(`${API}${path}`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
  if (!res.ok) throw new Error("Request failed");
  return res.json();
}

function QuickAmountPicker({ amount, setAmount }: { amount: string; setAmount: (v: string) => void }) {
  return (
    <>
      <p className="mb-1 text-xs font-medium uppercase tracking-widest text-[var(--color-ink-mute-2)]">Quick Select</p>
      <div className="grid grid-cols-4 gap-2">
        {["100", "500", "1000", "5000"].map((value) => (
          <button
            type="button"
            key={value}
            onClick={() => setAmount(value)}
            className={
              amount === value
                ? "rounded-[6px] bg-[var(--color-primary)] py-2.5 text-sm font-medium text-[var(--color-on-primary)] transition-all"
                : "rounded-[6px] border border-[var(--color-hairline-strong)] bg-white py-2.5 text-sm font-medium text-[var(--color-ink)] transition-colors hover:border-[var(--color-ink)]"
            }
          >
            ₹{value}
          </button>
        ))}
      </div>
    </>
  );
}

export function ContactForm() {
  const [state, setState] = useState<FormState>("idle");
  return (
    <form
      className="grid gap-4"
      onSubmit={async (event) => {
        event.preventDefault();
        const form = event.currentTarget;
        setState("loading");
        try {
          const body = Object.fromEntries(new FormData(form).entries());
          const res = await fetch(`${API}/enquiries`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(body),
          });

          if (res.status === 201) {
            form.reset();
            setState("success");
            toast.success("Enquiry sent successfully! We will be in touch soon.");
          } else {
            const err = await res.json().catch(() => ({ message: "Request failed" }));
            setState("idle");
            toast.error(err.message || "Something went wrong. Please try again.");
          }
        } catch {
          setState("idle");
          toast.error("Network error. Please check your connection and try again.");
        }
      }}
    >
      <input name="name" required placeholder="Name" className="input" />
      <input name="email" type="email" required placeholder="Email" className="input" />
      <input name="phone" required placeholder="Phone" className="input" />
      <textarea name="message" required placeholder="Message" className="input min-h-32" />
      <button className="btn" disabled={state === "loading"}>{state === "loading" ? "Sending..." : "Send message"}</button>
    </form>
  );
}

export function DonationForm() {
  const [amount, setAmount] = useState("1000");
  const [state, setState] = useState<FormState>("idle");
  return (
    <form
      className="grid gap-4"
      onSubmit={async (event) => {
        event.preventDefault();
        const form = event.currentTarget;
        setState("loading");
        try {
          const data = await postForm("/donations/create-order", form);
          if (data.paymentUrl) {
            window.location.href = data.paymentUrl;
          } else {
            form.reset();
            setAmount("1000");
            setState("success");
          }
        } catch {
          setState("error");
        }
      }}
    >
      <QuickAmountPicker amount={amount} setAmount={setAmount} />
      <input name="amount" required value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="Custom amount" className="input" />
      <input name="donorName" required placeholder="Donor name" className="input" />
      <input name="email" type="email" required placeholder="Email" className="input" />
      <input name="phone" required placeholder="Phone" className="input" />
      <input name="pan" placeholder="PAN (optional)" className="input" />
      <select name="purpose" className="input" defaultValue="General Donation">
        <option>General Donation</option>
        <option>Digital Hub</option>
        <option>Health Camp</option>
        <option>Education Kit Drive</option>
      </select>
      <button className="btn" disabled={state === "loading"}>{state === "loading" ? "Creating order..." : "Continue to donate"}</button>
      <Message state={state} />
    </form>
  );
}

export function CrowdfundingDonationForm({ campaignId, campaignTitle }: { campaignId: number; campaignTitle: string }) {
  const [amount, setAmount] = useState("500");
  const [state, setState] = useState<FormState>("idle");
  return (
    <form
      className="grid gap-4"
      onSubmit={async (event) => {
        event.preventDefault();
        const form = event.currentTarget;
        setState("loading");
        try {
          const body: Record<string, string> = {};
          for (const [key, value] of new FormData(form).entries()) {
            body[key] = String(value);
          }
          body.campaignId = String(campaignId);
          body.purpose = `Crowdfunding: ${campaignTitle}`;
          const res = await fetch(`${API}/donations/create-order`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(body),
          });
          if (!res.ok) throw new Error("Request failed");
          const data = await res.json();
          if (data.paymentUrl) {
            window.location.href = data.paymentUrl;
          } else {
            form.reset();
            setAmount("500");
            setState("success");
          }
        } catch {
          setState("error");
        }
      }}
    >
      <input type="hidden" name="purpose" value={`Crowdfunding: ${campaignTitle}`} />
      <QuickAmountPicker amount={amount} setAmount={setAmount} />
      <input name="amount" required value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="Custom amount" className="input" />
      <input name="donorName" required placeholder="Donor name" className="input" />
      <input name="email" type="email" required placeholder="Email" className="input" />
      <input name="phone" required placeholder="Phone" className="input" />
      <input name="pan" placeholder="PAN (optional)" className="input" />
      <button className="btn" disabled={state === "loading"}>{state === "loading" ? "Creating order..." : "Donate Now"}</button>
      <Message state={state} />
    </form>
  );
}

export function EventRegistrationForm({ eventId, eventTitle, isPaid = false, price = 0 }: { eventId: number; eventTitle: string; isPaid?: boolean; price?: number }) {
  const [state, setState] = useState<FormState>("idle");
  const [errorMsg, setErrorMsg] = useState("");
  return (
    <form
      className="mt-5 grid gap-3"
      onSubmit={async (e) => {
        e.preventDefault();
        setState("loading");
        setErrorMsg("");
        const form = e.currentTarget;
        const body = {
          eventId,
          name: (form.elements.namedItem("name") as HTMLInputElement).value,
          phone: (form.elements.namedItem("phone") as HTMLInputElement).value,
          email: (form.elements.namedItem("email") as HTMLInputElement).value,
        };
        try {
          const res = await fetch(`${API}/events/register`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(body),
          });
          const data = await res.json();
          if (!res.ok) {
            setErrorMsg(data.message || "Registration failed.");
            setState("idle");
            return;
          }
          if (data.paymentRequired && data.paymentUrl) {
            window.location.href = data.paymentUrl;
          } else {
            form.reset();
            setState("success");
          }
        } catch {
          setErrorMsg("Network error. Please try again.");
          setState("idle");
        }
      }}
    >
      <input type="hidden" name="eventId" value={eventId} />
      <input name="name" required placeholder="Name" className="input" />
      <input name="phone" required placeholder="Phone" className="input" />
      <input name="email" type="email" placeholder="Email (optional)" className="input" />
      {errorMsg && (
        <div className="rounded-md border border-[#e8a49a]/40 bg-[#fdece8] p-3 text-sm font-medium text-[#b5472e]">
          {errorMsg}
        </div>
      )}
      <button className="btn-secondary" disabled={state === "loading"}>
        {state === "loading" ? (isPaid ? "Redirecting..." : "Registering...") : isPaid ? `Pay ₹${Number(price).toLocaleString("en-IN")} & Register` : "Register"}
      </button>
      <Message state={state} />
    </form>
  );
}

export function AdminLoginForm() {
  const [state, setState] = useState<FormState>("idle");
  const router = useRouter();
  return (
    <form
      className="grid gap-4"
      onSubmit={async (event) => {
        event.preventDefault();
        setState("loading");
        try {
          const data = await postForm("/auth/login", event.currentTarget);
          localStorage.setItem("ngo_admin_token", data.token);
          localStorage.setItem("ngo_admin_user", JSON.stringify(data.user));
          setState("success");
          router.push("/admin/dashboard");
        } catch {
          setState("error");
        }
      }}
    >
      <input
        name="email"
        type="email"
        defaultValue="admin@sksfoundation.org"
        required
        placeholder="Admin email"
        className="input"
      />
      <input
        name="password"
        type="password"
        defaultValue="admin123"
        required
        placeholder="Password"
        className="input"
      />
      <button
        className="btn w-full"
        disabled={state === "loading"}
      >
        {state === "loading" ? "Signing in..." : "Login"}
      </button>
      <Message state={state} />
    </form>
  );
}