"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import Link from "next/link";
import Script from "next/script";

type EventItem = {
  slug: string;
  name: string;
  headline: string;
  tagline: string;
  accent: string;
  theme: string;
  photoMode: "required" | "optional" | "disabled";
  submissionMethod: "google-form" | "fillout";
  messageLength: string;
  guestInstructions: string;
  nameMode: "required" | "optional" | "anonymous";
  approvalMode: "review" | "automatic";
  showNames: boolean;
  askConsent: boolean;
  status: "active" | "deactivated";
};

export default function ContributionPage() {
  const { slug } = useParams<{ slug: string }>();
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");
  const [consent, setConsent] = useState(false);
  const [sending, setSending] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState("");
  const [event, setEvent] = useState<EventItem>({
    slug,
    name: "Garden of Thanks",
    headline: "Garden of Thanks",
    tagline: "Small moments. Big gratitude.",
    accent: "#f15a3b",
    theme: "garden",
    photoMode: "optional",
    submissionMethod: "fillout",
    messageLength: "240",
    guestInstructions: "Add a short message or memory for everyone at the event.",
    nameMode: "optional",
    approvalMode: "review",
    showNames: true,
    askConsent: true,
    status: "active",
  });
  useEffect(() => {
    fetch(`/api/events/${slug}`)
      .then((response) => response.json())
      .then((data) => {
        if (!data.event) return;
        setEvent(data.event);
      })
      .catch(() => undefined);
  }, [slug]);

  async function submitMessage(formEvent: React.FormEvent<HTMLFormElement>) {
    formEvent.preventDefault();
    setSending(true);
    setError("");

    try {
      const response = await fetch(`/api/events/${slug}/google-form-submit`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ name, message, consent }),
      });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || "We couldn’t share your moment.");
      setSent(true);
    } catch (caught) {
      setError(caught instanceof Error ? caught.message : "We couldn’t share your moment.");
    } finally {
      setSending(false);
    }
  }

  const usesGoogleForm = event.submissionMethod === "google-form";
  const messageLimit = Math.max(120, Math.min(500, Number(event.messageLength) || 240));
  const unavailable = event.status === "deactivated";
  const photoDescription = usesGoogleForm
    ? "Share a few meaningful words."
    : event.photoMode === "required"
      ? "Share a photo and a few words."
      : event.photoMode === "disabled"
        ? "Share a few meaningful words."
        : "Share a photo if you like, and add a few words.";

  return (
    <main className={`contribution-page theme-${event.theme}`} style={{ "--event-accent": event.accent } as React.CSSProperties}>
      <header className="contribution-nav">
        <div className="brand-lockup">
          <Link className="brand" href="/"><span className="brand-mark" aria-hidden="true"><span>F</span><i /></span><span>FlowMoments</span></Link>
          <a className="by-flowlab" href="https://www.flowlab.works" target="_blank" rel="noreferrer">by flowlab</a>
        </div>
        <span className="page-purpose"><i /> Guest contribution page</span>
      </header>

      <section className="contribution-layout">
        <aside className="contribution-story">
          <Link href="/" className="back-link">← FlowMoments home</Link>
          <span className="eyebrow">YOU’RE INVITED</span>
          <h1>Add your moment<br />to <em>{event.headline}</em>.</h1>
          <p>{event.tagline} {event.guestInstructions || photoDescription} Your memory can become part of the venue’s live wall.</p>
          <div className="story-shape">
            <span className="story-sun" />
            <span className="story-leaf leaf-a" />
            <span className="story-leaf leaf-b" />
            <blockquote>“The best events are made of everyone’s little moments.”</blockquote>
          </div>
        </aside>

        <section className="contribution-form-card fillout-card">
          <div className="form-intro">
            <span className="form-number">01</span>
            <div>
              <h2>Share your moment</h2>
              <p>{usesGoogleForm ? "Add your message in the customised form below." : event.photoMode === "required" ? "Add your message and photo below." : event.photoMode === "disabled" ? "Add your message below." : "Photos are optional. Kind words are essential."}</p>
            </div>
          </div>
          {unavailable ? (
            <div className="event-unavailable" role="status">
              <span>Event closed</span>
              <h2>This event is no longer accepting contributions.</h2>
              <p>Please contact the organiser if you think this is a mistake.</p>
            </div>
          ) : (
            <>
              {sent ? (
                <div className="success-state" role="status">
                  <span className="success-burst">✓</span>
                  <span className="eyebrow">MOMENT RECEIVED</span>
                  <h2>Thank you for sharing your moment.</h2>
                  <p>{event.approvalMode === "automatic"
                    ? "Your message is now part of the live wall."
                    : "We’ve received your message for the organiser to review."}</p>
                </div>
              ) : !usesGoogleForm ? (
                <>
                  <div
                    key={slug}
                    className="fillout-embed"
                    data-fillout-id="pKZG85FAikus"
                    data-fillout-embed-type="standard"
                    data-fillout-inherit-parameters
                    data-fillout-dynamic-resize
                    data-event={slug}
                    aria-label={`Submit a moment to ${event.name}`}
                  />
                  <Script src="https://server.fillout.com/embed/v1/" strategy="afterInteractive" />
                </>
              ) : (
                <form className="message-only-form" onSubmit={submitMessage}>
                  <div className="message-form-note">
                    <span>Message submission</span>
                    <p>{event.guestInstructions || "Share your message directly here. No photo is needed."}</p>
                  </div>
                  {event.nameMode !== "anonymous" && (
                    <label>
                      Your name {event.nameMode === "optional" && <small>Optional</small>}
                      <input
                        type="text"
                        value={name}
                        onChange={(input) => setName(input.target.value)}
                        maxLength={40}
                        autoComplete="name"
                        required={event.nameMode === "required"}
                      />
                    </label>
                  )}
                  <label>
                    Your message
                    <textarea
                      value={message}
                      onChange={(input) => setMessage(input.target.value)}
                      maxLength={messageLimit}
                      rows={6}
                      required
                    />
                    <small>{message.length}/{messageLimit}</small>
                  </label>
                  {event.askConsent && (
                    <label className="consent-row">
                      <input
                        type="checkbox"
                        checked={consent}
                        onChange={(input) => setConsent(input.target.checked)}
                        required
                      />
                      I agree that this message may be displayed on the event wall.
                    </label>
                  )}
                  {error && <p className="form-error" role="alert">{error}</p>}
                  <button className="submit-moment" type="submit" disabled={sending}>
                    <span>{sending ? "Sending…" : "Submit my message"}</span>
                    <b>→</b>
                  </button>
                </form>
              )}
              {!sent && (
                <p className="privacy-note">
                  {event.approvalMode === "automatic"
                    ? "Your contribution will appear on the wall after it is received."
                    : "Your contribution is reviewed by the event organiser before it appears."}{" "}
                  {event.showNames !== false && event.nameMode !== "anonymous" ? "Your name may be shown with your message. " : ""}
                  <a href="/privacy" target="_blank" rel="noreferrer">Read the privacy notice ↗</a>
                </p>
              )}
            </>
          )}
        </section>
      </section>
    </main>
  );
}