"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import { PageBand, SiteShell } from "@/components/SiteShell";
import { API } from "@/lib/api";

const API_URL = API;

type EventData = {
  id: number;
  title: string;
  event_date: string;
  venue: string;
  category: string;
  description: string;
  short_description?: string;
  cover_image_url?: string;
  price: number;
  capacity: number;
  event_status: string;
  registration_deadline?: string;
  highlights?: string;
  registered_count?: number;
};

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

function formatDate(dateStr: string) {
  if (!dateStr) return "";
  try {
    return new Date(dateStr).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    });
  } catch {
    return dateStr;
  }
}

function RegisterContent() {
  const params = useSearchParams();
  const eventId = params.get("eventId");

  const [event, setEvent] = useState<EventData | null>(null);
  const [loading, setLoading] = useState(true);
  const [fetchError, setFetchError] = useState("");
  const [formState, setFormState] = useState<FormState>("idle");
  const [errorMessage, setErrorMessage] = useState("");

  useEffect(() => {
    if (!eventId) {
      setLoading(false);
      setFetchError("No event specified.");
      return;
    }
    fetch(`${API_URL}/events/${eventId}`)
      .then((r) => {
        if (!r.ok) throw new Error("Event not found");
        return r.json();
      })
      .then((data) => {
        setEvent(data);
        setLoading(false);
      })
      .catch(() => {
        setFetchError("Could not load event details.");
        setLoading(false);
      });
  }, [eventId]);

  if (loading) {
    return (
      <SiteShell>
        <PageBand>
          <div className="flex min-h-[50vh] items-center justify-center">
            <p className="font-medium text-[var(--color-ink-mute)]">Loading event details...</p>
          </div>
        </PageBand>
      </SiteShell>
    );
  }

  if (fetchError || !event) {
    return (
      <SiteShell>
        <PageBand>
          <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4">
            <p className="font-medium text-[var(--color-ink-mute)]">{fetchError || "Event not found."}</p>
            <Link href="/events" className="btn">Browse Events</Link>
          </div>
        </PageBand>
      </SiteShell>
    );
  }

  if (event.event_status === "cancelled") {
    return (
      <SiteShell>
        <PageBand>
          <div className="mx-auto max-w-lg text-center">
            <div className="mx-auto mb-4 grid h-14 w-14 place-items-center rounded-full bg-[var(--color-canvas-soft)] text-2xl">✖</div>
            <h2 className="text-2xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>Event Cancelled</h2>
            <p className="mt-2 text-sm text-[var(--color-ink-mute)]">This event has been cancelled. Please check other events.</p>
            <Link href="/events" className="btn mt-6 inline-block">Browse Events</Link>
          </div>
        </PageBand>
      </SiteShell>
    );
  }

  if (event.event_status === "completed") {
    return (
      <SiteShell>
        <PageBand>
          <div className="mx-auto max-w-lg text-center">
            <div className="mx-auto mb-4 grid h-14 w-14 place-items-center rounded-full bg-[var(--color-canvas-soft)] text-2xl">📅</div>
            <h2 className="text-2xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>Event Already Held</h2>
            <p className="mt-2 text-sm text-[var(--color-ink-mute)]">This event has already taken place.</p>
            <Link href="/events" className="btn mt-6 inline-block">Browse Events</Link>
          </div>
        </PageBand>
      </SiteShell>
    );
  }

  const isFull = event.capacity > 0 && (event.registered_count || 0) >= event.capacity;
  const deadlinePassed = event.registration_deadline && new Date(event.registration_deadline) < new Date();
  const priceAmount = Number(event.price) || 0;
  const isPaid = priceAmount > 0;

  if (isFull) {
    return (
      <SiteShell>
        <PageBand>
          <div className="mx-auto max-w-lg text-center">
            <div className="mx-auto mb-4 grid h-14 w-14 place-items-center rounded-full bg-[var(--color-canvas-soft)] text-2xl">⏳</div>
            <h2 className="text-2xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>Fully Booked</h2>
            <p className="mt-2 text-sm text-[var(--color-ink-mute)]">All spots for this event are filled.</p>
            <Link href="/events" className="btn mt-6 inline-block">Browse Events</Link>
          </div>
        </PageBand>
      </SiteShell>
    );
  }

  if (deadlinePassed) {
    return (
      <SiteShell>
        <PageBand>
          <div className="mx-auto max-w-lg text-center">
            <div className="mx-auto mb-4 grid h-14 w-14 place-items-center rounded-full bg-[var(--color-canvas-soft)] text-2xl">⏰</div>
            <h2 className="text-2xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>Registration Closed</h2>
            <p className="mt-2 text-sm text-[var(--color-ink-mute)]">The registration deadline for this event has passed.</p>
            <Link href="/events" className="btn mt-6 inline-block">Browse Events</Link>
          </div>
        </PageBand>
      </SiteShell>
    );
  }

  return (
    <SiteShell>
      <section className="border-b border-[var(--color-hairline-cool)] bg-white">
        <div className="mx-auto max-w-[1280px] px-4 py-16 md:py-20 lg:px-6">
          <span className="eyebrow">
            <span className="eyebrow-dot" />
            {event.category?.replace("_", " ")}
          </span>
          <h1 className="mt-5 text-3xl leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)] md:text-5xl" style={{ fontWeight: 500 }}>
            Register for Event
          </h1>
        </div>
      </section>
      <PageBand>
        <div className="mx-auto max-w-2xl">
          <div className="mb-8 rounded-[12px] border border-[var(--color-hairline)] bg-white p-6 shadow-[var(--shadow-l1)]">
            <h2 className="text-xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>{event.title}</h2>
            <div className="mt-3 space-y-1 text-sm text-[var(--color-ink-mute)]">
              <p><strong className="text-[var(--color-ink)]">Date:</strong> {formatDate(event.event_date)}</p>
              <p><strong className="text-[var(--color-ink)]">Venue:</strong> {event.venue}</p>
              {isPaid && <p><strong className="text-[var(--color-ink)]">Registration Fee:</strong> ₹{priceAmount.toLocaleString("en-IN")}</p>}
              {!isPaid && <p><strong className="text-[var(--color-ink)]">Registration:</strong> Free</p>}
              {event.capacity > 0 && <p><strong className="text-[var(--color-ink)]">Available Spots:</strong> {event.capacity - (event.registered_count || 0)} of {event.capacity}</p>}
            </div>
          </div>

          {formState === "success" ? (
            <div className="rounded-[12px] border border-[var(--color-hairline)] bg-white p-8 text-center shadow-[var(--shadow-l1)]">
              <div className="mx-auto mb-4 grid h-14 w-14 place-items-center rounded-full bg-[var(--color-primary)]/10 text-2xl">✅</div>
              <h2 className="text-2xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>Registration Successful!</h2>
              <p className="mt-2 text-sm text-[var(--color-ink-mute)]">You have been registered for this event. We look forward to seeing you!</p>
              <Link href="/events" className="btn mt-6 inline-block">Browse More Events</Link>
            </div>
          ) : (
            <form
              className="grid gap-4 rounded-[12px] border border-[var(--color-hairline)] bg-white p-6 shadow-[var(--shadow-l1)]"
              onSubmit={async (e) => {
                e.preventDefault();
                setFormState("loading");
                setErrorMessage("");
                const form = e.currentTarget;
                const body = {
                  eventId: event.id,
                  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_URL}/events/register`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(body),
                  });
                  const data = await res.json();
                  if (!res.ok) {
                    setErrorMessage(data.message || "Registration failed. Please try again.");
                    setFormState("idle");
                    return;
                  }
                  if (data.paymentRequired && data.paymentUrl) {
                    window.location.href = data.paymentUrl;
                  } else {
                    setFormState("success");
                  }
                } catch {
                  setErrorMessage("Network error. Please check your connection and try again.");
                  setFormState("idle");
                }
              }}
            >
              <h3 className="text-lg text-[var(--color-ink)]" style={{ fontWeight: 500 }}>Your Details</h3>

              <div>
                <label className="text-xs font-medium uppercase tracking-wider text-[var(--color-ink-mute)]">Full Name</label>
                <input name="name" required className="input mt-1" placeholder="Your full name" />
              </div>

              <div>
                <label className="text-xs font-medium uppercase tracking-wider text-[var(--color-ink-mute)]">Phone Number</label>
                <input name="phone" required className="input mt-1" placeholder="Your phone number" />
              </div>

              <div>
                <label className="text-xs font-medium uppercase tracking-wider text-[var(--color-ink-mute)]">Email (optional)</label>
                <input name="email" type="email" className="input mt-1" placeholder="Your email address" />
              </div>

              {errorMessage && (
                <div className="rounded-[6px] border border-[var(--color-hairline)] bg-[var(--color-canvas-soft)] p-3 text-sm font-medium text-[var(--color-ink)]">
                  {errorMessage}
                </div>
              )}

              <button
                className="btn w-full py-3 text-base"
                disabled={formState === "loading"}
              >
                {formState === "loading"
                  ? isPaid ? "Redirecting to payment..." : "Registering..."
                  : isPaid ? `Pay ₹${priceAmount.toLocaleString("en-IN")} & Register` : "Register Free"}
              </button>

              {isPaid && (
                <p className="text-center text-xs text-[var(--color-ink-mute)]">You will be redirected to the payment page to complete your registration.</p>
              )}
            </form>
          )}
        </div>
      </PageBand>
    </SiteShell>
  );
}

export default function EventRegisterPage() {
  return (
    <Suspense fallback={
      <SiteShell>
        <PageBand>
          <div className="flex min-h-[50vh] items-center justify-center">
            <p className="font-medium text-[var(--color-ink-mute)]">Loading...</p>
          </div>
        </PageBand>
      </SiteShell>
    }>
      <RegisterContent />
    </Suspense>
  );
}