`app/auth/profile-setup/page.tsx`

189 lines
'use client';

import { useState } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';

const questions = [
  {
    id: 'age',
    question: "First things first - how old are you, bubbeleh?",
    type: 'number',
    placeholder: "Don't lie, I'll know!",
    followUp: "Oy vey, at that age and still..."
  },
  {
    id: 'relationship',
    question: "Are you married, dating, or breaking my heart?",
    type: 'select',
    options: [
      { value: 'married', label: 'Married (finally!)' },
      { value: 'dating', label: "Dating (when's the wedding?)" },
      { value: 'single', label: 'Single (oy gevalt!)' },
      { value: 'complicated', label: "It's complicated (meshugana!)" }
    ]
  },
  {
    id: 'job',
    question: "What do you do for work? And don't say 'influencer'!",
    type: 'text',
    placeholder: "Your mother would be so proud...",
  },
  {
    id: 'location',
    question: "Where do you live? Still with your parents?",
    type: 'text',
    placeholder: "City, State (or your mother's basement)",
  },
  {
    id: 'kids',
    question: "Do you have kids? When do I get great-grandchildren?",
    type: 'select',
    options: [
      { value: 'yes', label: 'Yes (about time!)' },
      { value: 'no', label: 'No (what are you waiting for?)' },
      { value: 'someday', label: 'Someday (tick tock!)' },
      { value: 'never', label: "Never (you're killing me!)" }
    ]
  },
  {
    id: 'lastMeal',
    question: "When did you last eat a proper meal?",
    type: 'select',
    options: [
      { value: 'today', label: 'Today (doubt it was proper)' },
      { value: 'yesterday', label: 'Yesterday (you look thin)' },
      { value: 'cant-remember', label: "Can't remember (oy vey!)" },
      { value: 'just-now', label: 'Just now (sure, sure)' }
    ]
  }
];

export default function ProfileSetupPage() {
  const { data: session } = useSession();
  const router = useRouter();
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState<any>({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleAnswer = (value: string) => {
    const newAnswers = { ...answers, [questions[currentQuestion].id]: value };
    setAnswers(newAnswers);

    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      submitProfile(newAnswers);
    }
  };

  const submitProfile = async (finalAnswers: any) => {
    setIsSubmitting(true);
    try {
      // Save profile to localStorage for now
      const profile = {
        ...finalAnswers,
        email: session?.user?.email,
        name: session?.user?.name,
        setupComplete: true,
        timestamp: new Date().toISOString()
      };
      
      localStorage.setItem('bubbeProfile', JSON.stringify(profile));
      
      // Redirect to main chat
      router.push('/');
    } catch (error) {
      console.error('Error saving profile:', error);
      setIsSubmitting(false);
    }
  };

  const currentQ = questions[currentQuestion];

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-pink-800 to-orange-700 flex items-center justify-center p-4">
      <div className="bg-white/95 backdrop-blur-sm rounded-3xl shadow-2xl p-8 max-w-md w-full">
        <div className="text-center mb-6">
          {/* Using the favicon as logo */}
          <div className="mx-auto w-20 h-20 mb-4 relative">
            <Image
              src="/favicon.ico"
              alt="Dear Bubbe"
              width={80}
              height={80}
              className="rounded-full shadow-lg"
            />
          </div>
          
          <div className="mb-4">
            <div className="text-sm text-gray-500 mb-2">
              Question {currentQuestion + 1} of {questions.length}
            </div>
            <div className="w-full bg-gray-200 rounded-full h-2">
              <div 
                className="bg-gradient-to-r from-purple-600 to-pink-600 h-2 rounded-full transition-all"
                style={{ width: `${((currentQuestion + 1) / questions.length) * 100}%` }}
              />
            </div>
          </div>
        </div>

        <div className="space-y-6">
          <h2 className="text-xl font-bold text-gray-800 text-center">
            {currentQ.question}
          </h2>

          {currentQ.type === 'select' ? (
            <div className="space-y-3">
              {currentQ.options?.map((option) => (
                <button
                  key={option.value}
                  onClick={() => handleAnswer(option.value)}
                  disabled={isSubmitting}
                  className="w-full text-left p-4 border-2 border-gray-300 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition-all disabled:opacity-50"
                >
                  {option.label}
                </button>
              ))}
            </div>
          ) : (
            <form onSubmit={(e) => {
              e.preventDefault();
              const formData = new FormData(e.currentTarget);
              const value = formData.get('answer') as string;
              if (value) handleAnswer(value);
            }}>
              <input
                type={currentQ.type}
                name="answer"
                placeholder={currentQ.placeholder}
                required
                disabled={isSubmitting}
                className="w-full p-4 border-2 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-lg"
                autoFocus
              />
              <button
                type="submit"
                disabled={isSubmitting}
                className="mt-4 w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold py-3 rounded-lg hover:from-purple-700 hover:to-pink-700 transition-all disabled:opacity-50"
              >
                {currentQuestion === questions.length - 1 ? "Let's talk!" : "Next"}
              </button>
            </form>
          )}

          {currentQuestion > 0 && !isSubmitting && (
            <button
              onClick={() => setCurrentQuestion(currentQuestion - 1)}
              className="text-gray-500 text-sm hover:text-gray-700 transition-colors"
            >
              ← Go back
            </button>
          )}
        </div>
      </div>
    </div>
  );
}