import React from "react";

export type InterviewFeedbackPayload = {
  workStandard: number | null;
  errorFreeness: number | null;
  helpToImprove: number | null;
  communicationSkill: number | null;
  listeningSkill: number | null;
  informationSharing: number | null;
  remarks: string;
};

export const defaultInterviewFeedback: InterviewFeedbackPayload = {
  workStandard: null,
  errorFreeness: null,
  helpToImprove: null,
  communicationSkill: null,
  listeningSkill: null,
  informationSharing: null,
  remarks: "",
};

const scoreLabels = [
  "Strong Agree",
  "Agree",
  "Disagree",
  "Strongly Disagree",
  "Not Applicable",
];

const scoreValues = [4, 3, 2, 1, 0];

const fields: {
  key: keyof InterviewFeedbackPayload;
  category: string;
  label: string;
}[] = [
  {
    key: "workStandard",
    category: "Quality of Skill",
    label: "Maintains high standards of skill quality",
  },
  {
    key: "errorFreeness",
    category: "Quality of Skill",
    label: "Uses skills accurately with minimal errors",
  },
  {
    key: "helpToImprove",
    category: "Quality of Skill",
    label: "Contributes to overall skill improvement",
  },
  {
    key: "communicationSkill",
    category: "Communication",
    label: "Communicate well & in writing form",
  },
  {
    key: "listeningSkill",
    category: "Communication",
    label: "Displays good listening skills",
  },
  {
    key: "informationSharing",
    category: "Communication",
    label: "Share information freely with others",
  },
];

type InterviewFeedbackFormProps = {
  feedback: InterviewFeedbackPayload;
  mode: "company" | "candidate";
  title: string;
  subtitle: string;
  radioGroupPrefix: string;
  disabled?: boolean;
  loading?: boolean;
  message?: string;
  remarksPlaceholder?: string;
  onScoreChange?: (key: keyof InterviewFeedbackPayload, value: number) => void;
  onRemarksChange?: (value: string) => void;
};

const InterviewFeedbackForm: React.FC<InterviewFeedbackFormProps> = ({
  feedback,
  mode,
  title,
  subtitle,
  radioGroupPrefix,
  disabled = false,
  loading = false,
  message = "",
  remarksPlaceholder = "",
  onScoreChange,
  onRemarksChange,
}) => {
  const readOnly = mode === "candidate";

  const renderCategoryCell = (fieldIndex: number, category: string) => {
    const prev = fields[fieldIndex - 1];
    const next = fields[fieldIndex + 1];

    if (prev?.category === category) return null;

    const rowSpan = next?.category === category ? 3 : 1;
    return (
      <td rowSpan={rowSpan} className="feedback-category-cell">
        <div>
          <p>{category}</p>
        </div>
      </td>
    );
  };

  return (
    <div className="solutions_feedback">
      <div className="d-flex justify-content-between align-items-center">
        <div>
          <h3 className="mb-2">{title}</h3>
          <div className="polygon_wrapper">
            <h4>{subtitle}</h4>
          </div>
        </div>
      </div>

      <div className="table_wrapper_360 table-responsive">
        <table className="table">
          <thead>
            <tr>
              <td></td>
              <td></td>
              {scoreLabels.map((label) => (
                <td key={label}>
                  <h6>{label}</h6>
                </td>
              ))}
            </tr>
          </thead>
          <tbody>
            {fields.map((field, rowIdx) => (
              <tr key={field.key}>
                {renderCategoryCell(rowIdx, field.category)}
                <td className="feedback-question-cell">{field.label}</td>
                {scoreValues.map((scoreValue) => (
                  <td key={`${field.key}-${scoreValue}`}>
                    <label className="checkbox-wrapper">
                      <input
                        type="radio"
                        name={`${field.key}-${radioGroupPrefix}`}
                        checked={feedback[field.key] === scoreValue}
                        disabled={disabled}
                        readOnly={readOnly}
                        onChange={() =>
                          onScoreChange && onScoreChange(field.key, scoreValue)
                        }
                      />
                      <div className="checkmark"></div>
                    </label>
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="default-form mt-3">
        <div className="form-group">
          <label>Remarks :</label>
          <textarea
            className="feedback-remarks"
            placeholder={readOnly ? "" : remarksPlaceholder}
            value={feedback.remarks}
            disabled={disabled}
            readOnly={readOnly}
            onChange={(e) => onRemarksChange && onRemarksChange(e.target.value)}
          />
        </div>
      </div>

      {loading ? <p className="mt-2 mb-0">Loading feedback...</p> : null}
      {!loading && message ? <p className="mt-2 mb-0">{message}</p> : null}
    </div>
  );
};

export default InterviewFeedbackForm;