Update web/src/components/Onboarding.tsx

web/src/components/Onboarding.tsx

@@ -1,11 +1,16 @@
-// web/src/components/Onboarding.tsx
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useRef, useState, useEffect, useMemo } from "react";
 import { Button } from "./ui/button";
-import { Textarea } from "./ui/textarea";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Dialog, DialogContent, DialogTitle } from "./ui/dialog";
+import type { User as UserType } from "../App";
 import { toast } from "sonner";
-import type { User } from "../App";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Textarea } from "./ui/textarea";
 
-type InitStatus = "idle" | "checking" | "not_needed" | "asking" | "submitting" | "done";
+// ✅ Add Bio step. Total steps: 5
+const TOTAL_STEPS = 5;
 
 type InitQ = {
   id: string;
@@ -57,105 +62,106 @@ const INIT_QUESTIONS: InitQ[] = [
 ];
 
 interface OnboardingProps {
-  user: User;
-  onComplete: (updatedUser: User) => void;
+  user: UserType;
+  onComplete: (user: UserType) => void;
   onSkip: () => void;
 }
 
 export function Onboarding({ user, onComplete, onSkip }: OnboardingProps) {
-  const [status, setStatus] = useState<InitStatus>("checking");
-  const [step, setStep] = useState(0);
-  const [answers, setAnswers] = useState<Record<string, string>>({});
-  const [input, setInput] = useState("");
-  const [generatedBio, setGeneratedBio] = useState("");
+  const [currentStep, setCurrentStep] = useState(1);
 
-  const currentQ = useMemo(() => INIT_QUESTIONS[step], [step]);
+  // Step 1: Basic
+  const [name, setName] = useState(user.name ?? "");
+  const [email, setEmail] = useState(user.email ?? "");
 
-  // 1) Check backend status: do we need init?
-  useEffect(() => {
-    let cancelled = false;
-
-    (async () => {
-      try {
-        setStatus("checking");
-        const r = await fetch(`/api/profile/status?user_id=${encodeURIComponent(user.email)}`);
-        if (!r.ok) throw new Error("status check failed");
-        const j = await r.json();
-        if (cancelled) return;
-
-        if (j?.need_init) {
-          setStatus("asking");
-          setStep(0);
-          setAnswers({});
-          setInput("");
-          setGeneratedBio("");
-        } else {
-          setStatus("not_needed");
-        }
-      } catch {
-        // 如果 status 拉取失败：为了不挡 onboarding，默认不需要 init
-        if (!cancelled) setStatus("not_needed");
-      }
-    })();
+  // Step 2: Academic
+  const [studentId, setStudentId] = useState(user.studentId ?? "");
+  const [department, setDepartment] = useState(user.department ?? "");
+  const [yearLevel, setYearLevel] = useState(user.yearLevel ?? "");
+  const [major, setMajor] = useState(user.major ?? "");
 
-    return () => {
-      cancelled = true;
-    };
-  }, [user.email]);
+  // Step 3: Preferences
+  const [learningStyle, setLearningStyle] = useState(user.learningStyle ?? "visual");
+  const [learningPace, setLearningPace] = useState(user.learningPace ?? "moderate");
+
+  // Step 4: Bio (8 questions -> generate bio)
+  const [bioQIndex, setBioQIndex] = useState(0);
+  const [bioInput, setBioInput] = useState("");
+  const [bioAnswers, setBioAnswers] = useState<Record<string, string>>({});
+  const [bioSubmitting, setBioSubmitting] = useState(false);
+  const [generatedBio, setGeneratedBio] = useState<string>(user.bio ?? "");
+  const [bioReady, setBioReady] = useState<boolean>(!!(user.bio && user.bio.trim().length > 0));
 
-  // 2) If not needed, just complete onboarding immediately (keep existing behavior)
+  const currentBioQ = useMemo(() => INIT_QUESTIONS[bioQIndex], [bioQIndex]);
+
+  // Optional: if user already has bio, mark ready.
   useEffect(() => {
-    if (status !== "not_needed") return;
+    if (user.bio && user.bio.trim().length > 0) {
+      setGeneratedBio(user.bio);
+      setBioReady(true);
+    }
+  }, [user.bio]);
 
-    // 这里不强行自动完成也可以；但你的 App 逻辑是 onboarding 不完成就进不去主界面
-    // 所以 not_needed -> 直接结束 onboarding
-    onComplete({ ...user, onboardingCompleted: true });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status]);
+  // Step 5: Photo
+  const [photoPreview, setPhotoPreview] = useState<string | null>(user.avatarUrl ?? null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const handleSkipBio = async () => {
-    // optional: dismiss for 7 days
-    try {
-      await fetch("/api/profile/dismiss", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ user_id: user.email, days: 7 }),
-      });
-    } catch {
-      // ignore
+  const handlePhotoSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please select an image file");
+      return;
+    }
+    if (file.size > 2 * 1024 * 1024) {
+      toast.error("File size must be less than 2MB");
+      return;
     }
 
-    // allow user to continue onboarding anyway
-    onComplete({ ...user, onboardingCompleted: true });
+    const reader = new FileReader();
+    reader.onload = (ev) => setPhotoPreview(ev.target?.result as string);
+    reader.readAsDataURL(file);
   };
 
-  const handleNext = async () => {
-    if (status !== "asking") return;
+  const handleChangePhotoClick = () => fileInputRef.current?.click();
 
-    const text = input.trim();
-    if (!text) return;
+  const handlePrevious = () => {
+    if (currentStep > 1) setCurrentStep((s) => s - 1);
+  };
+
+  const handleSkip = () => onSkip();
+
+  // --------------------------
+  // Step 4: Bio generation flow
+  // --------------------------
+  const handleBioNext = async () => {
+    const v = bioInput.trim();
+    if (!v) return;
 
-    const q = INIT_QUESTIONS[step];
-    const nextAnswers = { ...answers, [q.id]: text };
+    const q = INIT_QUESTIONS[bioQIndex];
+    const nextAnswers = { ...bioAnswers, [q.id]: v };
 
-    setAnswers(nextAnswers);
-    setInput("");
+    setBioAnswers(nextAnswers);
+    setBioInput("");
 
-    const nextStep = step + 1;
+    const nextIndex = bioQIndex + 1;
 
-    if (nextStep < INIT_QUESTIONS.length) {
-      setStep(nextStep);
+    // Continue questions
+    if (nextIndex < INIT_QUESTIONS.length) {
+      setBioQIndex(nextIndex);
       return;
     }
 
-    // last question -> submit
-    setStatus("submitting");
+    // Last question -> submit to backend and generate bio
+    // NOTE: use same backend logic as before; we do NOT touch parsing/storage logic.
+    setBioSubmitting(true);
     try {
       const r = await fetch("/api/profile/init_submit", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          user_id: user.email,
+          user_id: email.trim() || user.email, // prefer current email input
           answers: nextAnswers,
           language_preference: "English",
         }),
@@ -165,102 +171,401 @@ export function Onboarding({ user, onComplete, onSkip }: OnboardingProps) {
       const j = await r.json();
 
       const bio = (j?.bio || "").toString();
+      if (!bio.trim()) {
+        throw new Error("empty bio");
+      }
+
       setGeneratedBio(bio);
-      setStatus("done");
+      setBioReady(true);
+
+      toast.success("Bio generated!");
+    } catch (e) {
+      toast.error("Failed to generate bio. Please try again.");
+      // allow retry: keep last answer stored; user can edit generated flow by resetting if needed
+    } finally {
+      setBioSubmitting(false);
+    }
+  };
 
-      // finish onboarding, and persist bio into user
-      onComplete({
-        ...user,
-        bio,
-        onboardingCompleted: true,
-      });
-    } catch (e: any) {
-      toast.error("Sorry — I couldn’t generate your Bio. Please try again.");
-      setStatus("asking");
+  const handleBioReset = () => {
+    setBioQIndex(0);
+    setBioInput("");
+    setBioAnswers({});
+    setBioSubmitting(false);
+    setGeneratedBio("");
+    setBioReady(false);
+  };
+
+  // Main Next handler (respects Step 4 gating)
+  const handleNext = async () => {
+    // Step 1 validation (kept)
+    if (currentStep === 1) {
+      if (!name.trim() || !email.trim()) {
+        toast.error("Please fill in all required fields");
+        return;
+      }
+    }
+
+    // Step 4 gating: must finish + have bioReady before moving on
+    if (currentStep === 4) {
+      if (!bioReady) {
+        // If still answering questions, Next acts as “Next question”
+        if (bioQIndex < INIT_QUESTIONS.length) {
+          await handleBioNext();
+          return;
+        }
+        // Safety: should not happen, but block
+        toast.error("Please finish the Bio questions first.");
+        return;
+      }
+    }
+
+    if (currentStep < TOTAL_STEPS) setCurrentStep((s) => s + 1);
+    else handleComplete();
+  };
+
+  const handleComplete = () => {
+    if (!name.trim() || !email.trim()) {
+      toast.error("Please fill in all required fields");
+      return;
     }
+
+    // ✅ Bio now comes from Onboarding Step 4
+    const finalBio = (generatedBio || user.bio || "").trim() || undefined;
+
+    const next: UserType = {
+      ...user,
+      name: name.trim(),
+      email: email.trim(),
+
+      studentId: studentId.trim() || undefined,
+      department: department.trim() || undefined,
+      yearLevel: yearLevel || undefined,
+      major: major.trim() || undefined,
+
+      learningStyle: learningStyle || undefined,
+      learningPace: learningPace || undefined,
+
+      avatarUrl: photoPreview || undefined,
+
+      bio: finalBio, // ✅ sync to profile via your existing onComplete->save logic
+      onboardingCompleted: true,
+    };
+
+    onComplete(next);
+    toast.success("Profile setup completed!");
   };
 
-  // If checking/not_needed, we don’t render heavy UI.
-  if (status === "checking" || status === "not_needed") {
-    return (
-      <div className="min-h-screen w-full flex items-center justify-center bg-background">
-        <div className="w-full max-w-lg px-6 py-8 rounded-2xl border bg-card">
-          <div className="text-lg font-semibold">Setting up your workspace…</div>
-          <div className="text-sm text-muted-foreground mt-2">
-            One moment while we prepare your personalized experience.
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 1:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Basic Information</h3>
+            <p className="text-sm text-muted-foreground">Let's start with your basic information</p>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-name">Full Name *</Label>
+                <Input
+                  id="onboarding-name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Enter your full name"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-email">Email *</Label>
+                <Input
+                  id="onboarding-email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Enter your email"
+                />
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Main onboarding step: Bio questions
-  return (
-    <div className="min-h-screen w-full flex items-center justify-center bg-background">
-      <div className="w-full max-w-2xl px-6 py-8 rounded-2xl border bg-card">
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <div className="text-xl font-semibold">Quick intro to personalize Clare</div>
-            <div className="text-sm text-muted-foreground mt-1">
-              Answer a few short questions. We’ll summarize them into your Profile Bio and use it only inside this platform.
+        );
+
+      case 2:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Academic Background</h3>
+            <p className="text-sm text-muted-foreground">Tell us about your academic information</p>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-student-id">Student ID</Label>
+                <Input
+                  id="onboarding-student-id"
+                  value={studentId}
+                  onChange={(e) => setStudentId(e.target.value)}
+                  placeholder="Enter your student ID"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-department">Department</Label>
+                <Input
+                  id="onboarding-department"
+                  value={department}
+                  onChange={(e) => setDepartment(e.target.value)}
+                  placeholder="Enter your department"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="onboarding-year">Year Level</Label>
+                  <Select value={yearLevel} onValueChange={setYearLevel}>
+                    <SelectTrigger id="onboarding-year">
+                      <SelectValue placeholder="Select year level" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="1st Year">1st Year</SelectItem>
+                      <SelectItem value="2nd Year">2nd Year</SelectItem>
+                      <SelectItem value="3rd Year">3rd Year</SelectItem>
+                      <SelectItem value="4th Year">4th Year</SelectItem>
+                      <SelectItem value="Graduate">Graduate</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="onboarding-major">Major</Label>
+                  <Input
+                    id="onboarding-major"
+                    value={major}
+                    onChange={(e) => setMajor(e.target.value)}
+                    placeholder="Enter your major"
+                  />
+                </div>
+              </div>
             </div>
           </div>
-
-          <Button variant="outline" onClick={handleSkipBio} disabled={status === "submitting"}>
-            Skip
-          </Button>
-        </div>
-
-        <div className="mt-6 rounded-xl border bg-muted/30 p-4">
-          <div className="text-sm font-medium">{currentQ?.title}</div>
-          <div className="text-xs text-muted-foreground mt-1">
-            {currentQ?.placeholder || "Type your answer below."}
+        );
+
+      case 3:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Learning Preferences</h3>
+            <p className="text-sm text-muted-foreground">Help us personalize your learning experience</p>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-learning-style">Preferred Learning Style</Label>
+                <Select value={learningStyle} onValueChange={setLearningStyle}>
+                  <SelectTrigger id="onboarding-learning-style">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="visual">Visual</SelectItem>
+                    <SelectItem value="auditory">Auditory</SelectItem>
+                    <SelectItem value="reading">Reading/Writing</SelectItem>
+                    <SelectItem value="kinesthetic">Kinesthetic</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="onboarding-pace">Learning Pace</Label>
+                <Select value={learningPace} onValueChange={setLearningPace}>
+                  <SelectTrigger id="onboarding-pace">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="slow">Slow & Steady</SelectItem>
+                    <SelectItem value="moderate">Moderate</SelectItem>
+                    <SelectItem value="fast">Fast-paced</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
           </div>
-          <div className="text-xs text-muted-foreground mt-2">
-            Question {step + 1} of {INIT_QUESTIONS.length}
+        );
+
+      case 4:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Profile Bio</h3>
+            <p className="text-sm text-muted-foreground">
+              Answer a few quick questions and we’ll generate a Bio that syncs to your profile.
+            </p>
+
+            {!bioReady ? (
+              <div className="space-y-3">
+                <div className="rounded-lg border border-border bg-muted/30 p-4 space-y-2">
+                  <div className="text-sm font-medium">{currentBioQ.title}</div>
+                  {currentBioQ.placeholder && (
+                    <div className="text-xs text-muted-foreground">{currentBioQ.placeholder}</div>
+                  )}
+                  <div className="text-xs text-muted-foreground">
+                    Question {bioQIndex + 1} of {INIT_QUESTIONS.length}
+                  </div>
+
+                  <Textarea
+                    value={bioInput}
+                    onChange={(e) => setBioInput(e.target.value)}
+                    placeholder="Type your answer here..."
+                    className="min-h-[96px] mt-2"
+                    disabled={bioSubmitting}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        handleBioNext();
+                      }
+                    }}
+                  />
+
+                  <div className="flex items-center justify-between pt-2">
+                    <Button variant="outline" onClick={handleBioReset} disabled={bioSubmitting}>
+                      Reset
+                    </Button>
+
+                    <Button onClick={handleBioNext} disabled={bioSubmitting || !bioInput.trim()}>
+                      {bioQIndex === INIT_QUESTIONS.length - 1
+                        ? bioSubmitting
+                          ? "Generating…"
+                          : "Generate Bio"
+                        : "Next Question"}
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="text-xs text-muted-foreground">
+                  Tip: Press Enter to go next (Shift+Enter for a new line).
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                <div className="rounded-lg border border-border bg-background p-4 space-y-2">
+                  <div className="text-sm font-medium">Generated Bio</div>
+                  <div className="text-xs text-muted-foreground">
+                    You can edit it before continuing. This will be saved to your profile.
+                  </div>
+
+                  <Textarea
+                    value={generatedBio}
+                    onChange={(e) => setGeneratedBio(e.target.value)}
+                    className="min-h-[140px] mt-2"
+                  />
+
+                  <div className="flex items-center justify-between pt-2">
+                    <Button variant="outline" onClick={handleBioReset}>
+                      Regenerate
+                    </Button>
+                    <div className="text-xs text-muted-foreground">
+                      Click “Next Step” to continue.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
-
-          <Textarea
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            placeholder="Type your answer here..."
-            className="mt-3 min-h-[90px]"
-            disabled={status === "submitting"}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                handleNext();
-              }
-            }}
-          />
-
-          <div className="mt-3 flex justify-end gap-2">
-            <Button
-              onClick={handleNext}
-              disabled={status === "submitting" || !input.trim()}
-            >
-              {step === INIT_QUESTIONS.length - 1 ? (status === "submitting" ? "Saving…" : "Finish") : "Next"}
-            </Button>
+        );
+
+      case 5:
+        return (
+          <div className="space-y-4">
+            <h3 className="text-lg font-medium">Profile Picture</h3>
+            <p className="text-sm text-muted-foreground">Upload a photo to personalize your profile (optional)</p>
+
+            <div className="flex items-center gap-4">
+              <div className="w-24 h-24 rounded-full bg-gradient-to-br from-red-500 to-orange-500 flex items-center justify-center text-white text-3xl overflow-hidden">
+                {photoPreview ? (
+                  <img src={photoPreview} alt="Profile" className="w-full h-full object-cover" />
+                ) : (
+                  (name?.charAt(0) || "U").toUpperCase()
+                )}
+              </div>
+
+              <div>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif,image/webp"
+                  onChange={handlePhotoSelect}
+                  className="hidden"
+                />
+                <Button variant="outline" size="sm" onClick={handleChangePhotoClick}>
+                  Change Photo
+                </Button>
+                <p className="text-xs text-muted-foreground mt-1">JPG, PNG or GIF. Max size 2MB</p>
+              </div>
+            </div>
           </div>
-        </div>
+        );
 
-        {status === "submitting" && (
-          <div className="mt-4 text-sm text-muted-foreground">
-            Generating your Profile Bio…
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onSkip();
+      }}
+    >
+      <DialogContent
+        className="sm:max-w-lg p-0 gap-0 max-h-[90vh] overflow-hidden"
+        style={{ zIndex: 1001 }}
+        overlayClassName="!inset-0 !z-[99]"
+        overlayStyle={{ top: 0, left: 0, right: 0, bottom: 0, zIndex: 99, position: "fixed" }}
+      >
+        <div className="flex flex-col max-h-[90vh]">
+          {/* Header */}
+          <div className="border-b border-border p-4 flex items-center justify-between flex-shrink-0">
+            <div className="flex-1">
+              <DialogTitle className="text-xl font-medium">Welcome! Let's set up your profile</DialogTitle>
+              <p className="text-sm text-muted-foreground mt-1">
+                Step {currentStep} of {TOTAL_STEPS}
+              </p>
+            </div>
+
+            {/* Progress indicator */}
+            <div className="flex gap-1">
+              {Array.from({ length: TOTAL_STEPS }).map((_, index) => (
+                <div
+                  key={index}
+                  className={`h-2 w-2 rounded-full transition-colors ${
+                    index + 1 <= currentStep ? "bg-primary" : "bg-muted"
+                  }`}
+                />
+              ))}
+            </div>
           </div>
-        )}
-
-        {/* In practice, onComplete() already exits onboarding.
-            This is just a safety UI fallback if your app keeps it visible. */}
-        {status === "done" && generatedBio && (
-          <div className="mt-6 rounded-xl border bg-background p-4">
-            <div className="text-sm font-medium">Saved to your Profile Bio</div>
-            <div className="text-sm text-muted-foreground mt-2 whitespace-pre-wrap">
-              {generatedBio}
+
+          {/* Content */}
+          <div className="p-6 overflow-y-auto flex-1">{renderStepContent()}</div>
+
+          {/* Footer */}
+          <div className="border-t border-border p-4 flex justify-between gap-2 flex-shrink-0">
+            <div className="flex gap-2">
+              {currentStep > 1 && (
+                <Button variant="outline" onClick={handlePrevious} disabled={bioSubmitting}>
+                  <ChevronLeft className="h-4 w-4 mr-1" />
+                  Previous
+                </Button>
+              )}
+            </div>
+
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={handleSkip} disabled={bioSubmitting}>
+                Skip all
+              </Button>
+
+              <Button onClick={handleNext} disabled={bioSubmitting}>
+                {currentStep === TOTAL_STEPS ? "Complete" : "Next Step"}
+                {currentStep < TOTAL_STEPS && <ChevronRight className="h-4 w-4 ml-1" />}
+              </Button>
             </div>
           </div>
-        )}
-      </div>
-    </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }