import React from "react";

function textInputRows(question) {
  const prompt = String(question?.question || "").trim();
  if (prompt.length > 120) return 5;
  if (prompt.length > 60) return 3;
  return 2;
}

function isWorkInfoPrompt(question) {
  const prompt = String(question?.question || "").trim();
  if (!prompt || prompt.endsWith(":")) return false;
  return prompt.length > 72 || /yes\s*\/\s*no/i.test(prompt);
}

function JobTableTextRow({ question, value, onChange }) {
  const prompt = String(question?.question || "").trim();
  const qid = question.question_id;

  if (isWorkInfoPrompt(question)) {
    return (
      <>
        <tr>
          <td colSpan={2} className="ptw-doc-job-table__work-info">
            {prompt}
          </td>
        </tr>
        <tr>
          <td colSpan={2}>
            <textarea
              className="ptw-doc-input ptw-doc-input--area"
              rows={textInputRows(question)}
              value={value}
              onChange={(event) => onChange?.(qid, event.target.value)}
              placeholder="Enter details"
            />
          </td>
        </tr>
      </>
    );
  }

  return (
    <tr>
      <td className="ptw-doc-job-table__label">{prompt}</td>
      <td>
        <textarea
          className="ptw-doc-input ptw-doc-input--area"
          rows={textInputRows(question)}
          value={value}
          onChange={(event) => onChange?.(qid, event.target.value)}
          placeholder="Enter details"
        />
      </td>
    </tr>
  );
}

export default function PtwTextAnswersBlock({
  questions = [],
  answers = {},
  onChange,
  showNumber = true,
  heading = "Please enter your answers below.",
  variant = "default"
}) {
  if (!questions.length) return null;

  if (variant === "job") {
    return (
      <table className="ptw-doc-job-table ptw-doc-job-table--general">
        <tbody>
          {questions.map((question) => {
            const qid = question.question_id;
            const value = answers[qid] ?? answers[String(qid)] ?? "";
            return (
              <JobTableTextRow
                key={qid}
                question={question}
                value={value}
                onChange={onChange}
              />
            );
          })}
        </tbody>
      </table>
    );
  }

  return (
    <div className="ptw-text-answers-block">
      {heading ? <p className="ptw-text-answers-block__heading">{heading}</p> : null}
      <div className="ptw-text-answers-block__list">
        {questions.map((question, index) => {
          const qid = question.question_id;
          const label = showNumber
            ? `${index + 1}. ${question.question}`
            : question.question;

          return (
            <label key={qid} className="ptw-text-answers-block__item">
              <span className="ptw-text-answers-block__label">{label}</span>
              <textarea
                className="ptw-text-answers-block__input"
                rows={textInputRows(question)}
                value={answers[qid] ?? answers[String(qid)] ?? ""}
                onChange={(event) => onChange?.(qid, event.target.value)}
                placeholder="Enter your answer"
              />
            </label>
          );
        })}
      </div>
    </div>
  );
}
