import React from "react";
import {
  auditSectionDisplayTitle,
  parseAuditSectionQuestions
} from "../../utils/auditSectionHelpers.js";

function readAnswer(answers, question) {
  if (!question) return "";
  const qid = question.question_id;
  return answers[qid] ?? answers[String(qid)] ?? "";
}

function AuditInput({ value, onChange, type = "text", rows = 1, placeholder = "" }) {
  if (rows > 1) {
    return (
      <textarea
        className="ptw-doc-input ptw-doc-input--area"
        rows={rows}
        value={value}
        placeholder={placeholder}
        onChange={(event) => onChange(event.target.value)}
      />
    );
  }
  return (
    <input
      className="ptw-doc-input"
      type={type}
      value={value}
      placeholder={placeholder}
      onChange={(event) => onChange(event.target.value)}
    />
  );
}

export default function PtwAuditSectionTable({
  section,
  questions = [],
  answers,
  onChange
}) {
  const { metaWho, metaDate, actionRows } = parseAuditSectionQuestions(questions);
  const title = auditSectionDisplayTitle(section);

  function setAnswer(question, value) {
    if (!question?.question_id) return;
    onChange?.(question.question_id, value);
  }

  return (
    <div className="ptw-audit-section">
      <div className="ptw-doc-section-title ptw-audit-section__banner">{title}</div>

      <table className="ptw-doc-job-table ptw-audit-section__table">
        <tbody>
          <tr>
            <td className="ptw-audit-section__meta-cell">
              <span className="ptw-audit-section__inline-label">WHO :</span>
              <AuditInput
                value={readAnswer(answers, metaWho)}
                onChange={(value) => setAnswer(metaWho, value)}
                placeholder="Name"
              />
            </td>
            <td className="ptw-audit-section__meta-cell">
              <span className="ptw-audit-section__inline-label">DATE :</span>
              <AuditInput
                type="date"
                value={readAnswer(answers, metaDate)}
                onChange={(value) => setAnswer(metaDate, value)}
              />
            </td>
          </tr>
        </tbody>
      </table>

      <table className="ptw-doc-job-table ptw-audit-section__table ptw-audit-section__actions">
        <colgroup>
          <col className="ptw-audit-section__col-action" />
          <col className="ptw-audit-section__col-who" />
          <col className="ptw-audit-section__col-when" />
        </colgroup>
        <thead>
          <tr>
            <th className="ptw-doc-job-table__label">ACTION TO BE IMPLEMENTED</th>
            <th className="ptw-doc-job-table__label">WHO</th>
            <th className="ptw-doc-job-table__label">WHEN</th>
          </tr>
        </thead>
        <tbody>
          {actionRows.map((row, index) => (
            <tr key={`audit-action-${index}`}>
              <td>
                <AuditInput
                  rows={2}
                  value={readAnswer(answers, row.description)}
                  onChange={(value) => setAnswer(row.description, value)}
                  placeholder="Describe the action"
                />
              </td>
              <td>
                <AuditInput
                  value={readAnswer(answers, row.who)}
                  onChange={(value) => setAnswer(row.who, value)}
                  placeholder="Responsible person"
                />
              </td>
              <td>
                <AuditInput
                  value={readAnswer(answers, row.when)}
                  onChange={(value) => setAnswer(row.when, value)}
                  placeholder="Due date / time"
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
