import React, { useEffect, useMemo, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const EMAIL_TO = "ns@soulcorridor.ai";
// Put the image file in /public/eye-corridor.jpg for Next.js to serve at /eye-corridor.jpg
const BACKGROUND_URL = "/eye-corridor.jpg";

const QUESTIONS = [
  "What do you think humanity has forgotten?",
  "What still brings you a sense of wonder?",
  "When do you feel most like yourself?",
];

export default function SoulCorridorOnePager() {
  useEffect(() => {
    // Fonts
    const link = document.createElement("link");
    link.href =
      "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;600&display=swap";
    link.rel = "stylesheet";
    document.head.appendChild(link);

    // Preload background for iOS Safari first paint
    const preload = document.createElement("link");
    preload.rel = "preload";
    preload.as = "image";
    preload.href = BACKGROUND_URL;
    document.head.appendChild(preload);

    return () => {
      document.head.removeChild(link);
      document.head.removeChild(preload);
    };
  }, []);

  const [email, setEmail] = useState("");
  const [started, setStarted] = useState(false);
  const [answers, setAnswers] = useState<string[]>(["", "", ""]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [note, setNote] = useState("");
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  const startFlow = () => {
    if (!/.+@.+\..+/.test(email)) return;
    setStarted(true);
  };

  const goNext = () => setCurrentIndex((i) => Math.min(i + 1, QUESTIONS.length - 1));
  const goPrev = () => setCurrentIndex((i) => Math.max(i - 1, 0));
  const updateAnswer = (value: string) => {
    setAnswers((prev) => {
      const copy = [...prev];
      copy[currentIndex] = value;
      return copy;
    });
  };

  const canSend = useMemo(() => {
    const emailOk = /.+@.+\..+/.test(email);
    const haveAny = answers.some((a) => a.trim().length > 0) || note.trim().length > 0;
    return emailOk && haveAny;
  }, [email, answers, note]);

  const handleSubmit = async () => {
    if (!canSend) return;
    setStatus("sending");
    setErrorMsg(null);

    const payload = {
      email,
      answers: QUESTIONS.map((q, i) => ({ question: q, answer: answers[i] || "" })),
      note: note.trim(),
      to: EMAIL_TO,
      pageTag: "SoulCorridorOnePager",
      ts: new Date().toISOString(),
    };

    try {
      const res = await fetch("/api/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (res.ok) {
        setStatus("sent");
      } else {
        throw new Error(`Server responded ${res.status}`);
      }
    } catch (err) {
      console.error(err);
      try {
        const subject = encodeURIComponent("Soul Corridor — New Entry");
        const body = encodeURIComponent(JSON.stringify(payload, null, 2));
        window.location.href = `mailto:${EMAIL_TO}?subject=${subject}&body=${body}`;
        setStatus("sent");
      } catch (e) {
        setStatus("error");
        setErrorMsg("Could not send. Please try again or email us directly.");
      }
    }
  };

  return (
    <div className="relative min-h-screen text-[#F5F5F5] overflow-hidden">
      {/* Floating faded background */}
      <motion.div
        className="absolute inset-0 bg-cover bg-center pointer-events-none"
        style={{
          backgroundImage: `url(${BACKGROUND_URL})`,
          // Visible but subtle behind text
          filter: "brightness(0.58) contrast(1.05) saturate(1.05)",
        }}
        animate={{ scale: [1, 1.03, 1] }}
        transition={{ duration: 14, repeat: Infinity, ease: "easeInOut" }}
      />
      {/* Radial dark veil to keep copy readable */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "radial-gradient(ellipse at center, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.70) 60%, rgba(0,0,0,0.85) 100%)",
        }}
      />

      <div className="relative z-10 mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center px-6 py-20 text-center">
        {!started ? (
          <>
            <motion.h1
              className="max-w-2xl text-2xl sm:text-3xl"
              initial={{ opacity: 0, y: 6 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1 }}
              style={{ fontFamily: "'Cormorant Garamond', Georgia, serif", fontWeight: 500 }}
            >
              If you have been wandering too long, sit.
            </motion.h1>
            <div className="mt-10 w-full max-w-md">
              <div className="relative">
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && startFlow()}
                  placeholder="Whatever Email"
                  className="w-full rounded-xl border border-[#C3A35D]/50 bg-transparent px-4 py-3 text-center text-[#F5F5F5] placeholder:text-[#C3A35D]/80 focus:outline-none focus:ring-2 focus:ring-[#C3A35D]/40"
                  style={{ fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial" }}
                />
              </div>
            </div>
          </>
        ) : status === "sent" ? (
          <motion.div
            key="sent"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            className="mx-auto max-w-xl text-center"
          >
            <h2 className="text-2xl font-semibold text-[#C3A35D]" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
              Received.
            </h2>
            <p className="mt-2 text-[#F5F5F5]/80">Your light has entered the corridor.</p>
          </motion.div>
        ) : (
          <motion.div
            key="questions"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.35 }}
            className="mx-auto mt-12 w-full max-w-2xl"
          >
            <div className="mb-6 flex items-center justify-between text-xs text-[#F5F5F5]/60">
              <button onClick={goPrev} className="rounded-lg px-3 py-1 hover:bg-white/5 disabled:opacity-30" disabled={currentIndex === 0}>
                ← Back
              </button>
              <div className="flex items-center gap-2">
                {QUESTIONS.map((_, i) => (
                  <button
                    key={i}
                    onClick={() => setCurrentIndex(i)}
                    className={`h-2 w-8 rounded-full ${i === currentIndex ? "bg-[#C3A35D]" : "bg-white/15"}`}
                  />
                ))}
              </div>
              <button onClick={goNext} className="rounded-lg px-3 py-1 hover:bg-white/5" disabled={currentIndex === QUESTIONS.length - 1}>
                Next →
              </button>
            </div>
            <div className="rounded-2xl border border-white/10 bg-white/5 p-5 shadow-[0_12px_40px_rgba(0,0,0,0.35)] backdrop-blur-sm">
              <h3 className="text-xl md:text-2xl" style={{ fontFamily: "'Cormorant Garamond', Georgia, serif" }}>
                {QUESTIONS[currentIndex]}
              </h3>
              <textarea
                value={answers[currentIndex]}
                onChange={(e) => updateAnswer(e.target.value)}
                placeholder="Write what your soul says."
                className="mt-4 h-40 w-full resize-y rounded-xl border border-white/10 bg-black/30 p-4 text-[#F5F5F5] placeholder:text-[#F5F5F5]/40 focus:outline-none focus:ring-2 focus:ring-[#C3A35D]/40"
              />
            </div>
            {currentIndex === QUESTIONS.length - 1 && (
              <div className="mt-6 rounded-2xl border border-white/10 bg-white/5 p-5">
                <textarea
                  value={note}
                  onChange={(e) => setNote(e.target.value)}
                  placeholder="Leave a small paragraph if you wish."
                  className="h-28 w-full resize-y rounded-xl border border-white/10 bg-black/30 p-4 text-[#F5F5F5] placeholder:text-[#F5F5F5]/40 focus:outline-none focus:ring-2 focus:ring-[#C3A35D]/40"
                />
                <button
                  onClick={handleSubmit}
                  disabled={!canSend || status === "sending"}
                  className="mt-5 rounded-xl bg-[#C3A35D] px-5 py-3 text-sm font-semibold text-[#0A0A0A] shadow-[0_12px_40px_rgba(195,163,93,0.35)] disabled:opacity-50 hover:opacity-95"
                >
                  {status === "sending" ? "Sending…" : "Send"}
                </button>
                {status === "error" && <p className="mt-3 text-sm text-red-300">{errorMsg}</p>}
              </div>
            )}
          </motion.div>
        )}
      </div>
    </div>
  );
}