// onboarding.jsx — Immersive, atmospheric onboarding flow for Herely.
// Uses the existing visual language: cinematic backgrounds, floating particles, and elegant motion.

const { useState, useEffect } = React;

const QUESTIONS = [
  {
    id: 2,
    question: "What kind of conversations are you hoping to have tonight?",
    options: [
      { label: "Deep and thoughtful", value: "deep" },
      { label: "Fast and energetic", value: "fast" },
      { label: "Creative and exploratory", value: "creative" },
      { label: "Quiet observations", value: "quiet" },
      { label: "Unexpected encounters", value: "unexpected" }
    ]
  },
  {
    id: 3,
    question: "What are you currently pulled toward?",
    options: [
      { label: "Building something", value: "building" },
      { label: "Learning", value: "learning" },
      { label: "Meeting aligned people", value: "people" },
      { label: "Looking for perspective", value: "perspective" },
      { label: "Taking a mental reset", value: "reset" }
    ]
  },
  {
    id: 4,
    question: "What usually creates a meaningful connection for you?",
    options: [
      { label: "Shared ambition", value: "ambition" },
      { label: "Similar curiosity", value: "curiosity" },
      { label: "Opposite perspectives", value: "opposite" },
      { label: "Humor", value: "humor" },
      { label: "Calm presence", value: "calm" }
    ]
  },
  {
    id: 5,
    question: "What feels most valuable right now?",
    options: [
      { label: "Finding collaborators", value: "collaborators" },
      { label: "Discovering ideas", value: "ideas" },
      { label: "Feeling understood", value: "understood" },
      { label: "Expanding perspective", value: "perspective" },
      { label: "Serendipity", value: "serendipity" }
    ]
  }
];

function Onboarding({ onComplete }) {
  const [step, setStep] = useState(0); // 0-4 for questions, 5 for transition, 6 for success
  const [answers, setAnswers] = useState([]);
  const [isExiting, setIsExiting] = useState(false);

  const currentQuestion = step > 0 && step < 5 ? QUESTIONS[step - 1] : null;

  const handleSelect = (option) => {
    const newAnswers = [...answers, option];
    setAnswers(newAnswers);
    
    setIsExiting(true);
    setTimeout(() => {
      setIsExiting(false);
      if (step < QUESTIONS.length - 1) {
        setStep(step + 1);
      } else {
        setStep(5);
        // Loading state
        setTimeout(() => {
          setStep(6);
          // Auto-finish after success state
          setTimeout(() => {
            onComplete(newAnswers);
          }, 2500);
        }, 3000);
      }
    }, 400);
  };

  return (
    <div className="onboarding-view midnight">
      <HeroAmbient midnight={true} />
      <div className="hero-vignette"></div>

      <div className="wrap onboarding-inner">
        <header className="onboarding-head rv in">
          <div className="mono progress">
            {step < 5 ? `${step + 1} of 5` : ""}
          </div>
        </header>

        <main className="onboarding-main">
          {step === 0 && (
            <div className={`question-container ${isExiting ? 'fade-out' : 'fade-in'}`} style={{ maxWidth: '420px' }}>
              <div className="mood-card">
                <div className="left" style={{ textAlign: 'left' }}>
                  <span className="eyebrow">Your signal</span>
                  <h3>Set your mood — quietly.</h3>
                  <p className="body">
                    This is the only thing others see before mutual interest. No name, no photo — just a soft texture of what you're open to right now.
                  </p>
                </div>
                <div className="mood-row">
                  {(window.MOODS || [
                    { key: "open", label: "Open", color: "#3A7FCC" },
                    { key: "building", label: "Building", color: "#00C49A" },
                    { key: "curious", label: "Curious", color: "#F5A623" },
                    { key: "focused", label: "Focused", color: "#A8A8A8" },
                    { key: "social", label: "Social", color: "#FF6B6B" }
                  ]).map((mood) => (
                    <button
                      key={mood.key}
                      className="mood-chip"
                      style={{ "--c": mood.color }}
                      onClick={() => handleSelect({ label: mood.label, value: mood.key, color: mood.color })}
                    >
                      <span className="swatch"></span>
                      {mood.label}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {step > 0 && step < 5 && (
            <div className={`question-container ${isExiting ? 'fade-out' : 'fade-in'}`}>
              <h2 className="question-text">{currentQuestion.question}</h2>
              <div className="options-grid">
                {currentQuestion.options.map((opt, i) => (
                  <button 
                    key={i} 
                    className="option-btn" 
                    onClick={() => handleSelect(opt)}
                    style={{ '--hover-color': opt.color || 'var(--m-blue)' }}
                  >
                    <span className="label">{opt.label}</span>
                    {opt.color && <span className="mood-dot" style={{ background: opt.color }}></span>}
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 5 && (
            <div className="onboarding-transition rv in">
              <div className="loading-visual">
                <div className="loading-rings">
                  <div className="l-ring r1"></div>
                  <div className="l-ring r2"></div>
                  <div className="l-ring r3"></div>
                </div>
                <div className="loading-dots">
                  <span className="l-dot blue"></span>
                  <span className="l-dot amber"></span>
                  <span className="l-dot teal"></span>
                </div>
              </div>
              <div className="loading-text" style={{ marginTop: '24px' }}>
                <div className="mono">Bridging spatial identities...</div>
                <div className="small-status" style={{ marginTop: '8px', opacity: 0.5 }}>Connecting presence nodes & algorithm mapping</div>
              </div>
            </div>
          )}

          {step === 6 && (
            <div className="onboarding-success rv in">
              <div className="presence-announcement">
                <div className="success-particles">
                    {[...Array(6)].map((_, i) => (
                        <div key={i} className={`s-particle p${i}`}></div>
                    ))}
                </div>
                <div className="mono success-eyebrow" style={{ marginBottom: '16px', color: 'var(--m-teal)', letterSpacing: '0.2em' }}>BRIDGE ESTABLISHED</div>
                <h1 className="ed">You are now present.</h1>
                <div className="mono small-status">Joining 24 others with shared alignment</div>
              </div>
            </div>
          )}
        </main>
      </div>

      <style>{`
        .onboarding-view {
          height: 100vh;
          height: 100svh;
          background: #0B0B0D;
          color: #F4F2EE;
          display: flex;
          flex-direction: column;
          position: relative;
          overflow: hidden;
        }

        /* Mood Selector copied from scanqr.jsx */
        .mood-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in oklab, #121217 92%, transparent); min-height: 280px; box-shadow: 0 14px 40px rgba(11,11,13,0.05); }
        .mood-card h3 { margin: 10px 0 0; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 400; }
        .mood-card .body { margin: 10px 0 0; color: var(--mute); max-width: 44ch; }
        .mood-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-start; margin-top: auto; }
        .mood-chip { appearance: none; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 10px 14px; font: 500 13px/1 var(--sans); cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
        .mood-chip:hover { transform: translateY(-1px); border-color: var(--ink); }
        .mood-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
        .mood-chip .swatch { width: 9px; height: 9px; border-radius: 50%; box-shadow: none; background: var(--c); }

        .onboarding-inner {
          z-index: 10;
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 40px 0;
        }

        .onboarding-head {
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .progress {
          opacity: 0.4;
          letter-spacing: 0.2em;
        }

        .onboarding-main {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .question-container {
          max-width: 800px;
          width: 100%;
          text-align: center;
          display: flex;
          flex-direction: column;
          gap: 48px;
        }

        .question-text {
          font-size: clamp(28px, 4vw, 48px);
          font-weight: 400;
          line-height: 1.1;
          letter-spacing: -0.02em;
        }

        .options-grid {
          display: flex;
          flex-direction: column;
          gap: 12px;
          align-items: center;
        }

        .option-btn {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 999px;
          padding: 18px 40px;
          font-family: var(--sans);
          font-size: 18px;
          color: #F4F2EE;
          cursor: pointer;
          transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          position: relative;
          overflow: hidden;
          width: 380px;
          max-width: 90vw;
        }

        .option-btn:hover {
          background: rgba(255, 255, 255, 0.06);
          border-color: var(--hover-color);
          transform: translateY(-2px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .mood-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          box-shadow: 0 0 10px currentColor;
        }

        .fade-in {
          animation: onboarding-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        .fade-out {
          animation: onboarding-out 0.4s ease-in forwards;
        }

        @keyframes onboarding-in {
          0% { opacity: 0; transform: translateY(20px); filter: blur(10px); }
          100% { opacity: 1; transform: translateY(0); filter: blur(0); }
        }

        @keyframes onboarding-out {
          0% { opacity: 1; transform: translateY(0); filter: blur(0); }
          100% { opacity: 0; transform: translateY(-10px); filter: blur(5px); }
        }

        .onboarding-success rv in {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Loading / Bridge Experience */
        .loading-visual {
          position: relative;
          width: 80px;
          height: 80px;
          margin-bottom: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .l-ring {
          position: absolute;
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          animation: ring-pulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        .r1 { inset: -10px; animation-delay: 0s; }
        .r2 { inset: -30px; animation-delay: 0.5s; }
        .r3 { inset: -50px; animation-delay: 1s; }

        @keyframes ring-pulse {
          0% { transform: scale(0.8); opacity: 0; }
          50% { opacity: 0.5; }
          100% { transform: scale(1.2); opacity: 0; }
        }

        .loading-dots {
          display: flex;
          gap: 8px;
        }

        .l-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          animation: dot-glow 2s ease-in-out infinite;
        }

        .l-dot.blue { background: var(--m-blue); box-shadow: 0 0 15px var(--m-blue); animation-delay: 0s; }
        .l-dot.amber { background: var(--m-amber); box-shadow: 0 0 15px var(--m-amber); animation-delay: 0.4s; }
        .l-dot.teal { background: var(--m-teal); box-shadow: 0 0 15px var(--m-teal); animation-delay: 0.8s; }

        @keyframes dot-glow {
          0%, 100% { opacity: 0.3; transform: scale(1); }
          50% { opacity: 1; transform: scale(1.3); }
        }

        .loading-text {
          text-align: center;
        }

        /* Tuning State */
        .tuning-visual {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto 32px;
        }

        .pulse-circle {
            position: absolute;
            inset: 0;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            animation: tuning-pulse 3s infinite linear;
        }

        .pulse-circle.d1 { animation-delay: 1s; }
        .pulse-circle.d2 { animation-delay: 2s; }

        @keyframes tuning-pulse {
            0% { transform: scale(0.5); opacity: 0; }
            50% { opacity: 0.4; }
            100% { transform: scale(2.5); opacity: 0; }
        }

        /* Success State */
        .presence-announcement {
            text-align: center;
            position: relative;
        }

        .presence-announcement h1 {
            font-size: clamp(40px, 6vw, 80px);
            margin-bottom: 16px;
        }

        .small-status {
            opacity: 0.5;
            letter-spacing: 0.1em;
        }

        .success-particles {
            position: absolute;
            inset: -40px;
            pointer-events: none;
        }

        .s-particle {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--m-teal);
            box-shadow: 0 0 15px var(--m-teal);
            opacity: 0;
        }

        .p0 { top: 0; left: 20%; animation: particle-float 3s infinite 0s; }
        .p1 { top: 20%; right: 10%; animation: particle-float 3s infinite 0.5s; }
        .p2 { bottom: 10%; left: 30%; animation: particle-float 3s infinite 1s; }
        .p3 { bottom: 20%; right: 20%; animation: particle-float 3s infinite 1.5s; }

        @keyframes particle-float {
            0% { transform: scale(0); opacity: 0; }
            50% { opacity: 0.8; transform: scale(1.5) translate(10px, -10px); }
            100% { transform: scale(0); opacity: 0; }
        }

        @media (max-width: 640px) {
            .option-btn {
                padding: 14px 30px;
                font-size: 16px;
                width: 90%;
                justify-content: center;
            }
            .question-text {
                padding: 0 20px;
            }
        }
      `}</style>
    </div>
  );
}