From ca5b2291e8eb85874200d5f5218cca76ce5e4e96 Mon Sep 17 00:00:00 2001
From: Vanna Feng <149204800+vannaFeng@users.noreply.github.com>
Date: Sun, 9 Nov 2025 10:18:06 +0000
Subject: [PATCH] Commiting Stylized formpage

---
 app/formfile/FormPage.tsx | 159 +++++++++++++++-------
 app/formfile/page.tsx     | 271 +++++++++++++++++---------------------
 package-lock.json         |  12 --
 3 files changed, 229 insertions(+), 213 deletions(-)

diff --git a/app/formfile/FormPage.tsx b/app/formfile/FormPage.tsx
index d9b8960..70363ca 100644
--- a/app/formfile/FormPage.tsx
+++ b/app/formfile/FormPage.tsx
@@ -2,9 +2,9 @@
 
 import React, { useState } from "react";
 
-import {
-  FormData,
-  PROFICIENCY_LEVELS
+import { 
+    FormData, 
+    PROFICIENCY_LEVELS 
 } from './formTypes'; // Ensure path is correct
 
 interface FormPageProps {
@@ -16,9 +16,9 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
     Hackathon: '',
     mainTheme: '',
     tracksStack: [''],
-    students: [{
-      studentName: '',
-      skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }]
+    students: [{ 
+      studentName: '', 
+      skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] 
     }],
   });
 
@@ -61,6 +61,11 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
   };
 
   const handleAddStudent = () => {
+    console.log("Adding student...", formData.students.length);
+    if( formData.students.length >= 4 ) {
+      alert("Maxium of 4 teammates allowed.")
+      return;
+    }
     setFormData({
       ...formData,
       students: [...formData.students, { studentName: '', skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] }]
@@ -108,33 +113,39 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
-      <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
-        <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
-          Generate Project Idea
+    <div 
+      className="min-h-screen flex items-start justify-center p-4 sm:p-6 font-inter rounded-xl"
+      style={{
+        backgroundColor: "#FEEEDF"
+      }}
+    >
+      <div className="w-full max-w-2xl bg-[#FEEEDF] p-2 rounded-xl mt-8">
+        <h1 className="text-3xl font-extrabold text-center text-[#173C46] mb-8 tracking-tight">
+          New Project Idea
         </h1>
 
         <form className="space-y-8" onSubmit={handleSubmit}>
-          <div className="space-y-6 border-b pb-6 border-gray-200">
-            <h2 className="text-xl font-bold text-gray-700">Project Context</h2>
+          {/* <div className="space-y-6 border-b pb-6 border-gray-200"> */}
+            {/* <h2 className="text-xl font-bold text-gray-700">Project Context</h2> */}
             <div>
-              <label htmlFor="hackathonName" className="block text-sm font-medium text-gray-700 mb-1">
+              <label htmlFor="hackathonName" className="block text-xl font-bold text-[#173C46] mb-1">
                 Hackathon Name
               </label>
-              <input
+              <input 
                 id="hackathonName"
                 required
                 type="text"
                 placeholder="e.g., Google Code Jam"
-                name="Hackathon"
+                style = {{backgroundColor: "#DEE5D4"}}
+                name="Hackathon" 
                 value={formData.Hackathon}
                 onChange={handleChange}
-                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
+                className="mt-1 block w-full px-4 py-2 rounded-lg shadow-sm transition duration-150"
               />
             </div>
 
             <div>
-              <label htmlFor="mainTheme" className="block text-sm font-medium text-gray-700 mb-1">
+              <label htmlFor="mainTheme" className="block text-xl font-bold text-[#173C46] mb-1">
                 Main Theme
               </label>
               <input
@@ -142,17 +153,18 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
                 required
                 type="text"
                 placeholder="e.g., Sustainability or AI Ethics"
-                name="mainTheme"
+                style = {{backgroundColor: "#DEE5D4"}}
+                name="mainTheme" 
                 value={formData.mainTheme}
                 onChange={handleChange}
-                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
+                className="mt-1 block w-full px-4 py-2 rounded-lg shadow-sm transition duration-150"
               />
             </div>
-          </div>
+          {/* </div> */}
 
           <div className="space-y-4 border-b pb-6 border-gray-200">
-            <label className="block text-xl font-bold text-gray-700">
-              Tracks Stack
+            <label className="block text-xl font-bold text-[#173C46] mb-1">
+              Hackathon Track(s)
             </label>
             <div className="space-y-3">
               {formData.tracksStack.map((tracks, index) => (
@@ -161,10 +173,11 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
                     type="text"
                     required
                     placeholder={`Tracks #${index + 1}`}
-                    name={`tracksStack-${index}`}
+                    style = {{backgroundColor: "#DEE5D4"}}
+                    name={`tracksStack-${index}`} 
                     value={tracks}
                     onChange={(e) => handleTracksChange(e, index)}
-                    className="flex-grow px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 transition duration-150"
+                    className="flex-grow px-4 py-2 rounded-lg shadow-sm transition duration-150"
                   />
                   {formData.tracksStack.length > 1 && (
                     <button
@@ -183,7 +196,7 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
             <button
               type="button"
               onClick={handleAddTracks}
-              className="flex items-center justify-center gap-1 py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150"
+              className="flex items-center justify-center gap-1 py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-[#EA627F] hover:bg-[#d55370] focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150"
             >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
               Add Tracks
@@ -191,14 +204,33 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
           </div>
 
           <div className="space-y-4">
-            <h2 className="text-xl font-bold text-gray-700">Team Members and Skills</h2>
+            <h2 className="text-xl font-bold text-[#173C46]">Teammate(s) and Skills</h2>
 
             <div className="space-y-6">
               {formData.students.map((student, studentIndex) => (
-                <div key={studentIndex} className="p-4 border-2 border-indigo-200 rounded-lg bg-indigo-50 shadow-inner space-y-4">
+                <div key={studentIndex} className="p-4 rounded-lg bg-[#DEE5D4] shadow-inner space-y-4">
 
-                  <div className="flex justify-between items-center pb-2 border-b border-indigo-300">
-                    <h4 className="text-lg font-semibold text-indigo-700">Student #{studentIndex + 1}</h4>
+                  {/* <div className="flex justify-between items-center pb-2 border-b border-[#DEE5D4]"> */}
+                    {/* <h4 className="text-lg font-semibold text-[#173C46]">Teammate #{studentIndex + 1}:</h4>
+                    <input
+                      type="text"
+                      placeholder="Teammate Name"
+                      // value={student.studentName}
+                      style = {{backgroundColor: "#B8C0 AD"}}
+                      // onChange={(e) => handleStudentNameChange(e, studentIndex)}
+                      // className="w-full px-4 py-2 rounded-lg shadow-sm"
+                      className-="px-3 py-1 text-sm rounded-md"
+                    /> */}
+                    <div className="flex items-center gap-3">
+                      <h4 className="text-lg font-semibold text-[#173C46] whitespace-nowrap">
+                        Teammate #{studentIndex + 1}:
+                      </h4>
+                      <input
+                        type="text"
+                        placeholder="Teammate Name"
+                        className="px-3 py-1 text-sm rounded-md border border-[#B8C0AD] text-[#173C46] w-40"
+                      />
+                    </div>
                     {formData.students.length > 1 && (
                       <button
                         type="button"
@@ -208,22 +240,23 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
                         Remove Student
                       </button>
                     )}
-                  </div>
+                  {/* </div> */}
 
-                  <div>
-                    <label className="block text-sm font-medium text-indigo-700 mb-1">Student Name</label>
+                  {/* <div>
+                    <label className="block text-sm font-medium text-[#173C46] mb-1">Teammate Name</label>
                     <input
                       type="text"
                       required
-                      placeholder="Student Name"
+                      placeholder="Teammate Name"
                       value={student.studentName}
+                      style = {{backgroundColor: "#B8C0AD"}}
                       onChange={(e) => handleStudentNameChange(e, studentIndex)}
-                      className="w-full px-4 py-2 border border-indigo-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+                      className="w-full px-4 py-2 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                     />
-                  </div>
+                  </div> */}
 
-                  <div className="space-y-3 p-3 bg-white rounded-lg border border-indigo-100">
-                    <h5 className="text-md font-medium text-indigo-700">Skills</h5>
+                  <div className="space-y-3 p-3 bg-[#B8C0AD] rounded-lg ">
+                    <h5 className="text-md font-medium text-[#173C46]">Skills</h5>
                     {student.skills.map((skill, skillIndex) => (
                       <div key={skillIndex} className="flex gap-2 items-center">
                         <input
@@ -233,13 +266,13 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
                           placeholder="Skill (e.g., React, Python)"
                           value={skill.skillName}
                           onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
-                          className="flex-grow px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500"
+                          className="flex-grow px-3 py-2 bg-[#99A48A] rounded-lg text-sm"
                         />
                         <select
                           name="proficiency"
                           value={skill.proficiency}
                           onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
-                          className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500 w-1/3"
+                          className="px-3 py-2 bg-[#99A48A] rounded-lg text-sm w-1/3"
                         >
                           {PROFICIENCY_LEVELS.map(level => (
                             <option key={level} value={level}>{level}</option>
@@ -259,7 +292,7 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
                     <button
                       type="button"
                       onClick={() => handleAddSkill(studentIndex)}
-                      className="mt-2 text-xs flex items-center gap-1 py-1 px-3 border border-transparent rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition duration-150"
+                      className="mt-2 text-xs flex items-center gap-1 py-1 px-3 border border-transparent rounded-lg text-white bg-[#EA627F] hover:bg-[#d55370] transition duration-150"
                     >
                       + Add Skill
                     </button>
@@ -271,21 +304,49 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
             <button
               type="button"
               onClick={handleAddStudent}
-              className="mt-4 w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-lg shadow-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150"
+              disabled={formData.students.length >= 4}
+              // className="mt-4 w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-lg shadow-sm font-medium text-white bg-[#EA627F] hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150"
+              className={`mt-4 w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-lg shadow-sm font-medium text-white transition duration-150
+                ${formData.students.length >= 4 
+                  ? 'bg-gray-400 cursor-not-allowed' 
+                  : 'bg-[#EA627F] hover:bg-[#d55370] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'}
+           `}
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
-              Add Team Member
+              {/* <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
+              Add Team Member */}
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
+              </svg>
+              {formData.students.length >= 4 ? "Team Full (4 Max)" : "Add Team Member"}
             </button>
           </div>
 
           <button
-            type="submit"
-            className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 mt-6"
-          >
-            Generate Idea
-          </button>
-        </form>
+  type="submit"
+  className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-[#173C46] hover:bg-[#0F3237] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200 ease-in-out"
+>
+  Create Ideas
+</button>
 
+        </form>
+            {/* this is just removing the test */}
+        {/* <div className="mt-8 p-4 bg-gray-100 rounded-lg text-sm text-gray-600 border-l-4 border-blue-500">
+            <p className="font-bold mb-2 text-gray-800">Current Data:</p>
+            <p><strong>Hackathon:</strong> {formData.Hackathon || '—'}</p>
+            <p><strong>Main Theme:</strong> {formData.mainTheme || '—'}</p>
+            <p><strong>Tracks Stack:</strong> {formData.tracksStack.filter(t => t).join(', ') || '—'}</p>
+            <p className="font-bold mt-2 text-gray-800">Team Members ({formData.students.length}):</p>
+            <ul className="list-disc ml-5">
+              {formData.students.map((student, index) => (
+                <li key={index}>
+                  <strong>{student.studentName || `Student ${index + 1}`}:</strong> 
+                  <span className="ml-2">
+                    {student.skills.filter(s => s.skillName).map(s => `${s.skillName} (${s.proficiency})`).join('; ') || 'No skills added'}
+                  </span>
+                </li>
+              ))}
+            </ul>
+        </div> */}
       </div>
     </div>
   );
diff --git a/app/formfile/page.tsx b/app/formfile/page.tsx
index 614722c..20fd007 100644
--- a/app/formfile/page.tsx
+++ b/app/formfile/page.tsx
@@ -1,29 +1,27 @@
 "use client";
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import FormPage from './FormPage';
-import { CardData } from "../exportType/types";
-import SwipeCards from "../components/Cards";
 import { ChatSetting } from "../exportType/types";
 import { FormData, PROFICIENCY_LEVELS } from './formTypes';
-import { saveProject } from '../utils/storage';
-import { useRouter } from "next/navigation";
 
+// --- Helper function to get default form data ---
 const getDefaultFormData = (): FormData => ({
   Hackathon: '',
   mainTheme: '',
   tracksStack: [''],
-  students: [{
-    studentName: '',
-    skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }]
+  students: [{ 
+    studentName: '', 
+    skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] 
   }],
 });
 
+// --- New Initializer Function ---
 const getInitialState = () => {
   if (typeof window === 'undefined') {
-    return {
-      data: getDefaultFormData(),
-      showForm: true,
-      runEffect: false
+    return { 
+      data: getDefaultFormData(), 
+      showForm: true, 
+      runEffect: false 
     };
   }
   const storedFormData = localStorage.getItem('formData');
@@ -31,171 +29,140 @@ const getInitialState = () => {
     localStorage.removeItem('formData');
     return {
       data: JSON.parse(storedFormData) as FormData,
-      showForm: true,
-      runEffect: false,
+      showForm: false,
+      runEffect: true,
     };
   }
-  return {
-    data: getDefaultFormData(),
-    showForm: true,
-    runEffect: false
+  return { 
+    data: getDefaultFormData(), 
+    showForm: true, 
+    runEffect: false 
   };
 };
 
-export default function Home() {
-
-  const [formData, setFormData] = useState<FormData>(getDefaultFormData());
-  const [ideaResponse, setIdeaResponse] = useState<string>("");
-  const [generatedCards, setGeneratedCards] = useState<CardData[]>([]); // New state for parsed cards
-  const [initialState] = useState(getInitialState);
-  const [showForm, setShowForm] = useState(initialState.showForm);
-  const initialIdeaGenerationAttempted = useRef(false);
-
-  const router = useRouter();
-  const [settings] = useState<ChatSetting>({
-    temperature: 1,
-    model: "gemini-2.5-flash-lite",
-    systemInstructions: `You are an elite hackathon idea generator. Your task is to choose at lease two track and generate five different creative, feasible, and relevant project idea.
+// FIX 1 (Memoization): Moved settings OUTSIDE the component.
+// This makes it a true constant.
+const AI_SETTINGS: ChatSetting = {
+  temperature: 1,
+  model: "gemini-2.5-pro",
+  sysTemInstructions: `You are an elite hackathon idea generator. Your task is to generate five different creative, feasible, and relevant project idea. 
 The output MUST be in Markdown format and strictly follow this structure:
 ### Project Idea Title
-**Track** [print out the track you used]
-**Concept:** [A concise, single paragraph description of the product and its primary function.]`,
-  });
+**Relevance to Theme:** [Explain briefly]
+**Core Technology:** [List 3-5 primary technologies]
+**Team Fit:** [How the team's skills apply]
+**Concept:** [A concise, single paragraph description of the product and its primary function.]
+**Bonus Feature:** [A single, ambitious feature to impress judges.]`,
+};
 
-  const generateIdeas = useCallback(async (dataToProcess: FormData) => {
-    const parseAiResponse = (markdownString: string): CardData[] => {
-      console.log("Raw AI Response:", markdownString);
-      const ideas: CardData[] = [];
-      const ideaBlocks = markdownString.split("### ").filter(block => block.trim() !== "");
+// ------------------------------------------------
 
-      ideaBlocks.forEach((block, index) => {
-        const titleMatch = block.match(/^(.*?)(?=\n\*\*Track\*\*|$)/s);
-        const trackMatch = block.match(/\*\*Track\*\*\s*:\s*(.*?)(?=\n\*\*Concept\*\*|$)/s);
-        const conceptMatch = block.match(/\*\*Concept:\*\*\s*(.*)/s);
-
-        const title = titleMatch ? titleMatch[1].trim() : `Idea ${index + 1}`;
-        const summary = conceptMatch ? conceptMatch[1].trim() : "No concept provided.";
-        const tracksRaw = trackMatch ? trackMatch[1].trim() : "";
-        const tracks = tracksRaw.split(',').map(track => track.trim()).filter(track => track !== '');
-
-        ideas.push({
-          id: index + 1,
-          title,
-          tracks,
-          summary,
-        });
-      });
-      console.log("Parsed Cards:", ideas);
-      return ideas;
-    };
-
-    const submissionData: FormData = {
-      ...dataToProcess,
-      tracksStack: dataToProcess.tracksStack.filter(tracks => tracks.trim() !== ''),
-      students: dataToProcess.students
-        .map(student => ({
-          ...student,
-          skills: student.skills.filter(skill => skill.skillName.trim() !== ''),
-        }))
-        .filter(student => student.studentName.trim() !== '' || student.skills.length > 0),
-    };
-
-    const prompt = `
-    Hackathon: ${submissionData.Hackathon}
-    Main Theme: ${submissionData.mainTheme}
-    Required Tracks Stack: ${submissionData.tracksStack.join(', ')}
-    Team Members and Skills: ${submissionData.students.map(s =>
-      `${s.studentName || 'Unamed Member'} (Skills: ${s.skills.map(sk => `${sk.skillName} - ${sk.proficiency}`).join(', ')})`
-    ).join('; ')}
-    
-    Using the SYSTEM INSTRUCTIONS, generate 5 project ideas based on the data above.`;
-
-    try {
-      setIdeaResponse("Generating ideas... Please wait.");
-      setGeneratedCards([]);
-      const response = await fetch("/api/generate-idea", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          prompt: prompt,
-          settings: settings,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (data.error || !response.ok) {
-        console.error("AI Error:", data.error);
-        setIdeaResponse(`Error: Failed to generate idea. ${data.error || response.statusText}`);
-        return;
-      }
-      setIdeaResponse(data.response);
-
-      const projectId = data.projectId ?? `p-${Date.now()}`;
-
-      if (typeof window !== 'undefined') localStorage.setItem('temp_aiResponse', data.response);
-
-      router.push(`/cards?projectId=${projectId}&projectTitle=${encodeURIComponent(dataToProcess.Hackathon)}`);
-
-    } catch (error: unknown) {
-      console.error("Request Failed:", error);
-      let errorMessage = "A network error occurred. Please try again.";
-      if (error instanceof Error) {
-        errorMessage += ` Details: ${error.message}`;
-      }
-      setIdeaResponse(errorMessage);
-    }
-  }, [router]);
-
-  // Replaced useEffect
-  useEffect(() => {
-    if (initialState.runEffect) {
-      //generateIdeas(initialState.data, "some-resumed-id");
-    }
-  }, [initialState, generateIdeas]);
+export default function Home() {
+  
+  const [initialState] = useState(getInitialState);
+  const [showForm, setShowForm] = useState(initialState.showForm);
+  const [formData, setFormData] = useState<FormData>(initialState.data);
+  const [ideaResponse, setIdeaResponse] = useState<string>("");
+  
+  // The 'settings' state [useState] is now removed from here.
 
   const handleFormSubmitFromFormPage = (submittedData: FormData) => {
+    setFormData(submittedData);
     setShowForm(false);
     generateIdeas(submittedData);
   };
 
+  // Wrapped generateIdeas in useCallback
+  const generateIdeas = useCallback(async (dataToProcess: FormData) => {
+    // 1. Data Cleaning
+    const submissionData: FormData = {
+        ...dataToProcess,
+        tracksStack: dataToProcess.tracksStack.filter(tracks => tracks.trim() !== ''),
+        students: dataToProcess.students
+            .map(student => ({
+                ...student,
+                skills: student.skills.filter(skill => skill.skillName.trim() !== ''),
+            }))
+            .filter(student => student.studentName.trim() !== '' || student.skills.length > 0),
+    };
+
+    // 2. Prompt Construction
+    const prompt = `
+    Hackathon: ${submissionData.Hackathon}
+    Main Theme: ${submissionData.mainTheme}
+    Required Tracks Stack: ${submissionData.tracksStack.join(', ')}
+    Team Members and Skills: ${submissionData.students.map(s => 
+        `${s.studentName || 'Unamed Member'} (Skills: ${s.skills.map(sk => `${sk.skillName} - ${sk.proficiency}`).join(', ')})`
+    ).join('; ')}
+    
+    Using the SYSTEM INSTRUCTIONS, generate 5 project ideas based on the data above.`;
+
+    // 3. API Call
+    try {
+        setIdeaResponse("Generating ideas... Please wait.");
+        
+        const response = await fetch("/api/generate-idea", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+                prompt: prompt,
+                settings: AI_SETTINGS, // Use the constant
+            }),
+        });
+
+        const data = await response.json();
+        if (data.error || !response.ok) {
+            console.error("AI Error:", data.error);
+            setIdeaResponse(`Error: Failed to generate idea. ${data.error || response.statusText}`);
+            return;
+        }
+        setIdeaResponse(data.response);
+        
+    // FIX 2 (Unexpected any): Changed 'any' to 'unknown' and added a type check.
+    } catch (error: unknown) {
+        console.error("Request Failed:", error);
+        let errorMessage = "A network error occurred. Please try again.";
+        if (error instanceof Error) {
+            errorMessage += ` Details: ${error.message}`;
+        }
+        setIdeaResponse(errorMessage);
+    }
+    // FIX 3 (Linter): Disable the faulty memoization rule.
+    // The empty array is correct because setIdeaResponse is a stable state setter.
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
+  }, []);
+
+  // Replaced useEffect
+  useEffect(() => {
+    if (initialState.runEffect) {
+      generateIdeas(initialState.data);
+    }
+  }, [initialState, generateIdeas]);
+
   // --- JSX Rendering ---
   return (
-    <main className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
-      <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
+    <main className="min-h-screen flex items-start justify-center p-4 sm:p-6 font-inter" style={{ backgroundColor: "#DEE5D4"}}>
+      <div className="w-full max-w-2xl bg-white p-2 shadow-2xl rounded-xl mt-8" style={{ backgroundColor: "#EA627F"}}>
         {showForm ? (
           <FormPage onFormSubmit={handleFormSubmitFromFormPage} />
         ) : (
           <>
-            {generatedCards.length > 0 ? (
-              <SwipeCards initialCards={generatedCards} />
-            ) : (
-              <>
-                <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
-                  Generated Project Idea 💡
-                </h1>
-                <div className="mt-8 p-4 bg-yellow-50 rounded-lg border border-yellow-200">
-                  <h2 className="text-xl font-bold text-gray-700 mb-2">Generated Ideas:</h2>
-                  <div
-                    className="prose max-w-none"
+            <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
+              Generated Project Idea 💡
+            </h1>
+            <div className="mt-8 p-4 bg-yellow-50 rounded-lg border border-yellow-200">
+                <h2 className="text-xl font-bold text-gray-700 mb-2">Generated Ideas:</h2>
+                <div 
+                    className="prose max-w-none" 
                     dangerouslySetInnerHTML={{ __html: ideaResponse.replace(/\n/g, '<br/>') }}
-                  />
-                  {ideaResponse === "" && <p className="text-gray-500">Submit the form to generate project ideas.</p>}
-                </div>
-              </>
-            )}
+                />
+                {ideaResponse === "" && <p className="text-gray-500">Submit the form to generate project ideas.</p>}
+            </div>
             <button
-              onClick={() => {
-                setShowForm(true);
-                if(typeof window !== 'undefined') localStorage.removeItem('formData');
-                setFormData(getDefaultFormData());
-              }
-            }
+              onClick={() => setShowForm(true)}
               className="mt-6 w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 transition duration-150"
             >
-              Create New Project
+              Go Back to Form
             </button>
           </>
         )}
diff --git a/package-lock.json b/package-lock.json
index 299dff3..fa00b6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -66,7 +66,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -1471,7 +1470,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1528,7 +1526,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.3.tgz",
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -2026,7 +2023,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2345,7 +2341,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -2875,7 +2870,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3053,7 +3047,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5130,7 +5123,6 @@
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5139,7 +5131,6 @@
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5785,7 +5776,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5937,7 +5927,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6198,7 +6187,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "dev": true,
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }