SBU-Hackathon/app/formfile/FormPage.tsx

"use client";

import React, { useState } from "react";

import {
  FormData,
  PROFICIENCY_LEVELS
} from './formTypes'; // Ensure path is correct

interface FormPageProps {
  onFormSubmit: (data: FormData) => void;
}

const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
  const [formData, setFormData] = useState<FormData>({
    Hackathon: '',
    mainTheme: '',
    tracksStack: [''],
    students: [{
      studentName: '',
      skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }]
    }],
  });

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    });
  };

  const handleTracksChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
    const newTracksStack = [...formData.tracksStack];
    newTracksStack[index] = event.target.value;

    setFormData({
      ...formData,
      tracksStack: newTracksStack,
    });
  };

  const handleAddTracks = () => {
    setFormData({
      ...formData,
      tracksStack: [...formData.tracksStack, ''],
    });
  };

  const handleRemoveTracks = (index: number) => {
    const newTracksStack = formData.tracksStack.filter((_, i) => i !== index);
    setFormData({
      ...formData,
      tracksStack: newTracksStack,
    });
  };

  const handleStudentNameChange = (e: React.ChangeEvent<HTMLInputElement>, studentIndex: number) => {
    const newStudents = [...formData.students];
    newStudents[studentIndex].studentName = e.target.value;
    setFormData({ ...formData, students: newStudents });
  };

  const handleAddStudent = () => {
    setFormData({
      ...formData,
      students: [...formData.students, { studentName: '', skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] }]
    });
  };

  const handleRemoveStudent = (studentIndex: number) => {
    const newStudents = formData.students.filter((_, i) => i !== studentIndex);
    setFormData({ ...formData, students: newStudents });
  };

  const handleSkillChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
    studentIndex: number,
    skillIndex: number
  ) => {
    const newStudents = [...formData.students];
    const targetName = e.target.name;
    const targetValue = e.target.value;

    if (targetName === 'skillName') {
      newStudents[studentIndex].skills[skillIndex].skillName = targetValue;
    } else if (targetName === 'proficiency') {
      newStudents[studentIndex].skills[skillIndex].proficiency = targetValue;
    }

    setFormData({ ...formData, students: newStudents });
  };

  const handleAddSkill = (studentIndex: number) => {
    const newStudents = [...formData.students];
    newStudents[studentIndex].skills.push({ skillName: '', proficiency: PROFICIENCY_LEVELS[1] });
    setFormData({ ...formData, students: newStudents });
  };

  const handleRemoveSkill = (studentIndex: number, skillIndex: number) => {
    const newStudents = [...formData.students];
    newStudents[studentIndex].skills = newStudents[studentIndex].skills.filter((_, i) => i !== skillIndex);
    setFormData({ ...formData, students: newStudents });
  };

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onFormSubmit(formData); // Call the prop function with formData
  };

  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
        </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>
              <label htmlFor="hackathonName" className="block text-sm font-medium text-gray-700 mb-1">
                Hackathon Name
              </label>
              <input
                id="hackathonName"
                required
                type="text"
                placeholder="e.g., Google Code Jam"
                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"
              />
            </div>

            <div>
              <label htmlFor="mainTheme" className="block text-sm font-medium text-gray-700 mb-1">
                Main Theme
              </label>
              <input
                id="mainTheme"
                required
                type="text"
                placeholder="e.g., Sustainability or AI Ethics"
                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"
              />
            </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>
            <div className="space-y-3">
              {formData.tracksStack.map((tracks, index) => (
                <div key={index} className="flex gap-2 items-center">
                  <input
                    type="text"
                    required
                    placeholder={`Tracks #${index + 1}`}
                    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"
                  />
                  {formData.tracksStack.length > 1 && (
                    <button
                      type="button"
                      onClick={() => handleRemoveTracks(index)}
                      className="text-sm px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition duration-150 flex-shrink-0"
                      aria-label={`Remove tracks ${index + 1}`}
                    >
                      Remove
                    </button>
                  )}
                </div>
              ))}
            </div>

            <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"
            >
              <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
            </button>
          </div>

          <div className="space-y-4">
            <h2 className="text-xl font-bold text-gray-700">Team Members 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 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>
                    {formData.students.length > 1 && (
                      <button
                        type="button"
                        onClick={() => handleRemoveStudent(studentIndex)}
                        className="text-xs px-2 py-1 bg-red-400 text-white rounded-md hover:bg-red-500 transition duration-150"
                      >
                        Remove Student
                      </button>
                    )}
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-indigo-700 mb-1">Student Name</label>
                    <input
                      type="text"
                      required
                      placeholder="Student Name"
                      value={student.studentName}
                      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"
                    />
                  </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>
                    {student.skills.map((skill, skillIndex) => (
                      <div key={skillIndex} className="flex gap-2 items-center">
                        <input
                          type="text"
                          required
                          name="skillName"
                          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"
                        />
                        <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"
                        >
                          {PROFICIENCY_LEVELS.map(level => (
                            <option key={level} value={level}>{level}</option>
                          ))}
                        </select>
                        {student.skills.length > 1 && (
                          <button
                            type="button"
                            onClick={() => handleRemoveSkill(studentIndex, skillIndex)}
                            className="text-xs px-2 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition duration-150 flex-shrink-0"
                          >
                            X
                          </button>
                        )}
                      </div>
                    ))}
                    <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"
                    >
                      + Add Skill
                    </button>
                  </div>
                </div>
              ))}
            </div>

            <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"
            >
              <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
            </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>

      </div>
    </div>
  );
};

export default FormPage;