/* eslint-disable @next/next/no-img-element */
import PreLoginLayout from '@/components/Layouts/PreLoginLayout';
import { useGetpersonalizedQuery } from '@/lib/redux/services/Organizorflow/Dashboard.api';
import { useCreateAnswersMutation } from '@/lib/redux/services/Userflow/UserDashboard.api';
import Cookies from 'js-cookie';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { Col, Row, Spinner } from 'react-bootstrap';
import { useState } from 'react';

export default function CreateProfile() {
  const { data: session }: any = useSession();
  const token = session?.user?.token;
  const router = useRouter();
  const flowtype = Cookies.get('flowtype');
  const [CreateAnswer, { isLoading: CreateLoading }] = useCreateAnswersMutation();

  const { data: Questions, isLoading } = useGetpersonalizedQuery({
    userType: flowtype === 'Organization' ? 'organization' : 'user',
    token,
  });

  const [answers, setAnswers] = useState<{ questionId: string; givenAnswer: string[] }[]>([]);
  const [errors, setErrors] = useState<string[]>([]); 

  const handleOptionChange = (questionId: string, value: string, isMultiple: boolean) => {
    setAnswers((prev) => {
      const existing = prev.find((ans) => ans.questionId === questionId);
      if (existing) {
        if (isMultiple) {
          const updatedAnswers = existing.givenAnswer.includes(value)
            ? existing.givenAnswer.filter((v) => v !== value)
            : [...existing.givenAnswer, value];
          return prev.map((ans) =>
            ans.questionId === questionId ? { ...ans, givenAnswer: updatedAnswers } : ans
          );
        } else {
          return prev.map((ans) =>
            ans.questionId === questionId ? { ...ans, givenAnswer: [value] } : ans
          );
        }
      } else {
        return [...prev, { questionId, givenAnswer: [value] }];
      }
    });
  };

  const handleTextChange = (questionId: string, value: string) => {
    setAnswers((prev) => {
      const existing = prev.find((ans) => ans.questionId === questionId);
      if (existing) {
        return prev.map((ans) =>
          ans.questionId === questionId ? { ...ans, givenAnswer: [value] } : ans
        );
      } else {
        return [...prev, { questionId, givenAnswer: [value] }];
      }
    });
  };

  const validateAnswers = () => {
    let validationErrors: string[] = [];

    Questions?.data?.forEach((question: any) => {
      if (question.answerSelectionType === 'multiple') {
        const selected = answers.find((a) => a.questionId === question._id);
        if (!selected || selected.givenAnswer.length < 2) {
          validationErrors.push(question._id);
        }
      }
    });

    setErrors(validationErrors);
    return validationErrors.length === 0;
  };

  const handleSubmit = async () => {
    if (!validateAnswers()) {
      alert('Please select at least two options for multiple-choice questions.');
      return;
    }

    try {
      const payload = { answers };
      console.log('Submitting payload:', payload);

      const res = await CreateAnswer({
        body: payload,
        token,
      }).unwrap();

      console.log('✅ Response:', res);
      router.push('/auth/login');
    } catch (error) {
      console.error('❌ Error creating answers:', error);
    }
  };

  return (
    <>
      <PreLoginLayout>
        <div className="persnal-price">
          <h1 className="headings fz-20">Personalized Questions</h1>
          <Row>
            {Questions?.data?.map((data: any, index: any) => {
              const isMultiple = data?.answerSelectionType === 'multiple';
              const isError = errors.includes(data?._id);
              const selectedAnswers =
                answers.find((a) => a.questionId === data?._id)?.givenAnswer || [];

              return (
                <Col lg="12" key={index}>
                  <div className="persnalize">
                    <h4>{data?.questiontext}</h4>
                    {isError && (
                      <p style={{ color: 'red', fontSize: '14px' }}>
                        Please select at least two options.
                      </p>
                    )}

                    <div className="form-group">
                      {data?.questiontype === 'radio' ? (
                        <>
                          {data?.options?.map((option: string, idx: number) => {
                            return (
                              <div className="form-group" key={idx}>
                                <input
                                  type={isMultiple ? 'checkbox' : 'radio'}
                                  id={`option-${index}-${idx}`}
                                  name={`question-${index}`}
                                  value={option}
                                  checked={selectedAnswers.includes(option)}
                                  onChange={(e) =>
                                    handleOptionChange(data?._id, e.target.value, isMultiple)
                                  }
                                />
                                <label>{option}</label>
                              </div>
                            );
                          })}
                        </>
                      ) : (
                        <div className="icon-field">
                          <label htmlFor="">Answer</label>
                          <textarea
                            className="form-control"
                            placeholder="Enter Your Answer here"
                            onChange={(e) => handleTextChange(data?._id, e.target.value)}
                          />
                        </div>
                      )}
                    </div>
                  </div>
                </Col>
              );
            })}
          </Row>

          {/* SUBMIT */}
          <div className="form-group mt-4">
            <button type="button" className="btn btn-primary" onClick={handleSubmit}>
              {CreateLoading ? <Spinner size="sm" /> : 'Create'}
            </button>
          </div>
        </div>
      </PreLoginLayout>
    </>
  );
}