Iframe fallback (optional)

set('h5pEmbed', e.target.value)}
          placeholder="<iframe src=... />"
          disabled={hasSelection}
        />
        <p className={HINT}>
          {hasSelection
            ? 'Disabled while H5P content is selected — clear the picker to paste a fallback iframe.'
            : 'Sanitized at save time: only iframe + structural tags are kept (no scripts).'}
        </p>
      </div>

<ProInteractiveLaunchModeField value={values.launchMode} onChange={(v) => set('launchMode', v)} />
    </ProCard>
  );
}

/**
 * Shared launch-mode select used by the SCORM and H5P attach wizards.
 */
function ProInteractiveLaunchModeField(props: {
  value: InteractiveLaunchMode;
  onChange: (v: InteractiveLaunchMode) => void;
}) {
  const { value, onChange } = props;
  const helpText = LAUNCH_MODE_OPTIONS.find((o) => o.value === value)?.help ?? '';
  return (
    <div>
      <label className={LABEL} htmlFor="sik-pro-launch-mode">Player display</label>
      <select
        id="sik-pro-launch-mode"
        className={FIELD}
        value={value}
        onChange={(e) => onChange(e.target.value as InteractiveLaunchMode)}
      >
        {LAUNCH_MODE_OPTIONS.map((o) => (
          <option key={o.value || 'inherit'} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
      {helpText ? <p className={HINT}>{helpText}</p> : null}
    </div>
  );
}

/**
 * @deprecated Pre-split combined renderer. The lesson editor now renders the
 *             kind-specific blocks ({@link ProLessonLiveBlock},
 *             {@link ProLessonScormBlock}, {@link ProLessonH5pBlock}) based on
 *             the selected `_sikshya_lesson_type`. Kept temporarily for any
 *             external consumer that imported it.
 */
export function ProLessonFields(props: { values: ProLessonValues; onChange: (v: ProLessonValues) => void }) {
  const { values, onChange } = props;
  const live = useAddonEnabled('live_classes');
  const scorm = useAddonEnabled('scorm_h5p_pro');
  const liveOn = Boolean(live.enabled && live.licenseOk);
  const scormOn = Boolean(scorm.enabled && scorm.licenseOk);
  if (!liveOn && !scormOn) return null;
  return (
    <div className="space-y-4">
      {liveOn ? <ProLessonLiveBlock values={values} onChange={onChange} /> : null}
      {scormOn ? <ProLessonScormBlock values={values} onChange={onChange} /> : null}
      {scormOn ? <ProLessonH5pBlock values={values} onChange={onChange} /> : null}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Quiz — quiz_advanced
// ---------------------------------------------------------------------------

/** Upper bound from `QuizAdvancedAddonSettings` PHP schema (`max` on `max_random_draw_per_quiz`). */
export const QUIZ_ADVANCED_BANK_DRAW_HARD_MAX = 200;

/** Positive draw counts are clamped to this ceiling (aligns with global Advanced quiz setting). */
export function effectiveQuizBankDrawCap(maxRandomDrawPerQuiz: number): number {
  return Math.max(1, Math.min(QUIZ_ADVANCED_BANK_DRAW_HARD_MAX, Math.floor(maxRandomDrawPerQuiz)));
}

/**
 * Caps stored draw count: 0 = unlimited matching pool; otherwise 1..min(hard max, global addon cap).
 */
export function clampQuizBankCount(raw: number, maxRandomDrawPerQuiz: number): number {
  const cap = effectiveQuizBankDrawCap(maxRandomDrawPerQuiz);
  const n = Number(raw) || 0;
  if (n <= 0) {
    return 0;
  }
  return Math.min(cap, n);
}

function parseGradebookItemWeight(raw: unknown): number {
  const n = typeof raw === 'number' ? raw : Number(raw);
  if (!Number.isFinite(n) || n <= 0) {
    return 1;
  }
  return Math.min(1000, Math.max(0.01, n));
}

export type ProQuizValues = {
  shuffle: boolean;
  onePerPage: boolean;
  bankTag: string;
  bankCount: number;
  /** Relative weight within quiz component for gradebook averages (`_sikshya_grade_weight`). */
  gradeWeight: number;
};

export const PRO_QUIZ_DEFAULTS: ProQuizValues = {
  shuffle: false,
  onePerPage: false,
  bankTag: '',
  bankCount: 0,
  gradeWeight: 1,
};

export function readProQuizFromMeta(meta: Record<string, unknown> | undefined): ProQuizValues {
  const m = meta ?? {};
  return {
    shuffle: String(m['_sikshya_quiz_shuffle'] ?? '') === '1',
    onePerPage: String(m['_sikshya_quiz_one_per_page'] ?? '') === '1',
    bankTag: String(m['_sikshya_quiz_bank_tag'] ?? ''),
    bankCount: Number(m['_sikshya_quiz_bank_count'] ?? 0) || 0,
    gradeWeight: parseGradebookItemWeight(m['_sikshya_grade_weight']),
  };
}

export function buildProQuizMeta(v: ProQuizValues, maxRandomDrawPerQuiz = QUIZ_ADVANCED_BANK_DRAW_HARD_MAX): Record<string, unknown> {
  return {
    _sikshya_quiz_shuffle: v.shuffle ? '1' : '',
    _sikshya_quiz_one_per_page: v.onePerPage ? '1' : '',
    _sikshya_quiz_bank_tag: v.bankTag.trim(),
    _sikshya_quiz_bank_count: clampQuizBankCount(Number(v.bankCount) || 0, maxRandomDrawPerQuiz),
    _sikshya_grade_weight: parseGradebookItemWeight(v.gradeWeight),
  };
}

/** Gradebook per-item weight; shown when Gradebook addon is on (independent of quiz advanced). */
export function ProGradebookQuizWeightFields(props: {
  gradeWeight: number;
  onGradeWeightChange: (v: number) => void;
}) {
  const gb = useAddonEnabled('gradebook');
  if (!gb.enabled || !gb.licenseOk) return null;
  const { gradeWeight, onGradeWeightChange } = props;
  return (
    <ProCard
      title="Gradebook weight"
      badge="Pro"
      description="How much this quiz counts relative to other quizzes in the same course when computing the quiz portion of the overall grade."
    >
      <div>
        <label className={LABEL} htmlFor="sik-pro-quiz-grade-weight">
          Weight
        </label>
        <input
          id="sik-pro-quiz-grade-weight"
          type="number"
          min={0.01}
          max={1000}
          step="any"
          className={FIELD}
          value={String(gradeWeight)}
          onChange={(e) => onGradeWeightChange(parseGradebookItemWeight(e.target.value))}
        />
        <p className={HINT}>Default 1. Higher values increase this quiz’s influence within the quiz average.</p>
      </div>
    </ProCard>
  );
}

/** Gradebook per-item weight for assignments. */
export function ProGradebookAssignmentWeightFields(props: {
  gradeWeight: number;
  onGradeWeightChange: (v: number) => void;
}) {
  const gb = useAddonEnabled('gradebook');
  if (!gb.enabled || !gb.licenseOk) return null;
  const { gradeWeight, onGradeWeightChange } = props;
  return (
    <ProCard
      title="Gradebook weight"
      badge="Pro"
      description="How much this assignment counts relative to other graded assignments in the same course."
    >
      <div>
        <label className={LABEL} htmlFor="sik-pro-asg-grade-weight">
          Weight
        </label>
        <input
          id="sik-pro-asg-grade-weight"
          type="number"
          min={0.01}
          max={1000}
          step="any"
          className={FIELD}
          value={String(gradeWeight)}
          onChange={(e) => onGradeWeightChange(parseGradebookItemWeight(e.target.value))}
        />
        <p className={HINT}>Default 1. Higher values increase this assignment’s influence within the assignment average.</p>
      </div>
    </ProCard>
  );
}

export function ProQuizFields(props: {
  values: ProQuizValues;
  onChange: (v: ProQuizValues) => void;
  /** Global addon cap; must match {@link buildProQuizMeta} / {@link clampQuizBankCount}. */
  maxRandomDrawPerQuiz?: number;
}) {
  const { values, onChange, maxRandomDrawPerQuiz = QUIZ_ADVANCED_BANK_DRAW_HARD_MAX } = props;
  const adv = useAddonEnabled('quiz_advanced');
  if (!adv.enabled || !adv.licenseOk) return null;

const drawCap = effectiveQuizBankDrawCap(maxRandomDrawPerQuiz);

const set = <K extends keyof ProQuizValues>(k: K, val: ProQuizValues[K]) => onChange({ ...values, [k]: val });

return (
    <ProCard title="Advanced quiz behaviour" badge="Pro" description="Shuffle, paginate, or draw random questions from a pool.">
      <div className="space-y-3">
        <label className="flex items-start gap-2 text-sm text-slate-800 dark:text-slate-100">
          <input
            type="checkbox"
            className="mt-1 h-4 w-4 rounded border-slate-300"
            checked={values.shuffle}
            onChange={(e) => set('shuffle', e.target.checked)}
          />
          <span>
            <span className="font-medium">Shuffle questions</span>
            <span className="block text-xs text-slate-500 dark:text-slate-400">Random order on each attempt.</span>
          </span>
        </label>
        <label className="flex items-start gap-2 text-sm text-slate-800 dark:text-slate-100">
          <input
            type="checkbox"
            className="mt-1 h-4 w-4 rounded border-slate-300"
            checked={values.onePerPage}
            onChange={(e) => set('onePerPage', e.target.checked)}
          />
          <span>
            <span className="font-medium">One question per page</span>
            <span className="block text-xs text-slate-500 dark:text-slate-400">Show Next / Previous controls between questions.</span>
          </span>
        </label>
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className={LABEL} htmlFor="sik-pro-quiz-bank-tag">Question pool tag</label>
          <input
            id="sik-pro-quiz-bank-tag"
            className={FIELD}
            value={values.bankTag}
            onChange={(e) => set('bankTag', e.target.value)}
            placeholder="unit-1"
          />
          <p className={HINT}>When set, draws random questions whose pool tag matches, instead of attached questions.</p>
        </div>
        <div>
          <label className={LABEL} htmlFor="sik-pro-quiz-bank-count">Random questions to draw</label>
          <input
            id="sik-pro-quiz-bank-count"
            type="number"
            min={0}
            max={drawCap}
            className={FIELD}
            value={String(values.bankCount || '')}
            onChange={(e) => set('bankCount', Number(e.target.value) || 0)}
          />
          <p className={HINT}>
            0 means use all matching questions. Per-quiz draw is capped at {drawCap} (global setting under Advanced quiz).
          </p>
        </div>
      </div>
    </ProCard>
  );
}

// ---------------------------------------------------------------------------
// Question — quiz_advanced (pool tag)
// ---------------------------------------------------------------------------

export type ProQuestionValues = { poolTag: string };
export const PRO_QUESTION_DEFAULTS: ProQuestionValues = { poolTag: '' };

export function readProQuestionFromMeta(meta: Record<string, unknown> | undefined): ProQuestionValues {
  return { poolTag: String((meta ?? {})['_sikshya_question_pool_tag'] ?? '') };
}
export function buildProQuestionMeta(v: ProQuestionValues): Record<string, unknown> {
  return { _sikshya_question_pool_tag: v.poolTag.trim() };
}

export function ProQuestionFields(props: { values: ProQuestionValues; onChange: (v: ProQuestionValues) => void }) {
  const { values, onChange } = props;
  const adv = useAddonEnabled('quiz_advanced');
  if (!adv.enabled || !adv.licenseOk) return null;

return (
    <ProCard title="Question pool" badge="Pro" description="Tag this question so quizzes drawing from this pool can pick it up at random.">
      <div>
        <label className={LABEL} htmlFor="sik-pro-question-pool-tag">Pool tag</label>
        <input
          id="sik-pro-question-pool-tag"
          className={FIELD}
          value={values.poolTag}
          onChange={(e) => onChange({ poolTag: e.target.value })}
          placeholder="e.g. unit-1"
        />
      </div>
    </ProCard>
  );
}

// ---------------------------------------------------------------------------
// Assignment — assignments_advanced
// ---------------------------------------------------------------------------

export type ProAssignmentRubricRow = {
  id: string;
  title: string;
  weight: number;
  description: string;
  /** One checklist line per row (shown to learners under the criterion). */
  checks: string;
};

export type ProAssignmentValues = {
  rubricRows: ProAssignmentRubricRow[];
  allowedExts: string;
  allowLate: boolean;
  requireText: boolean;
  /** When true, learners may submit again after the submission is marked graded. */
  allowResubmit: boolean;
  minFiles: number;
  maxFiles: number;
  /** Relative weight within assignment component (`_sikshya_grade_weight`). */
  gradeWeight: number;
};

export const PRO_ASSIGNMENT_DEFAULTS: ProAssignmentValues = {
  rubricRows: [],
  allowedExts: '',
  allowLate: false,
  requireText: false,
  allowResubmit: false,
  minFiles: 0,
  maxFiles: 0,
  gradeWeight: 1,
};

function newRubricRow(): ProAssignmentRubricRow {
  return {
    id: `r_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
    title: '',
    weight: 0,
    description: '',
    checks: '',
  };
}

export function readProAssignmentFromMeta(meta: Record<string, unknown> | undefined): ProAssignmentValues {
  const m = meta ?? {};
  const rubricRows = parseRubricMeta(String(m['_sikshya_rubric_json'] ?? ''));
  return {
    rubricRows,
    allowedExts: String(m['_sikshya_allowed_file_extensions'] ?? ''),
    allowLate: String(m['_sikshya_allow_late'] ?? '') === '1',
    requireText: String(m['_sikshya_require_text'] ?? '') === '1',
    allowResubmit: String(m['_sikshya_assignment_allow_resubmit'] ?? '') === '1',
    minFiles: Math.max(0, Math.min(50, Number(m['_sikshya_assignment_min_files'] ?? 0) || 0)),
    maxFiles: Math.max(0, Math.min(50, Number(m['_sikshya_assignment_max_files'] ?? 0) || 0)),
    gradeWeight: parseGradebookItemWeight(m['_sikshya_grade_weight']),
  };
}

export function buildProAssignmentMeta(v: ProAssignmentValues): Record<string, unknown> {
  const rubricClean = buildRubricJson(v.rubricRows);
  const exts = v.allowedExts
    .split(',')
    .map((x) => x.trim().toLowerCase())
    .filter(Boolean)
    .join(',');
  return {
    _sikshya_rubric_json: rubricClean,
    _sikshya_allowed_file_extensions: exts,
    _sikshya_allow_late: v.allowLate ? '1' : '',
    _sikshya_require_text: v.requireText ? '1' : '',
    _sikshya_assignment_allow_resubmit: v.allowResubmit ? '1' : '',
    _sikshya_assignment_min_files: Math.max(0, Math.min(50, Math.floor(v.minFiles))),
    _sikshya_assignment_max_files: Math.max(0, Math.min(50, Math.floor(v.maxFiles))),
    _sikshya_grade_weight: parseGradebookItemWeight(v.gradeWeight),
  };
}

export function ProAssignmentFields(props: {
  values: ProAssignmentValues;
  onChange: (v: ProAssignmentValues) => void;
}) {
  const { values, onChange } = props;
  const adv = useAddonEnabled('assignments_advanced');
  if (!adv.enabled || !adv.licenseOk) return null;

const set = <K extends keyof ProAssignmentValues>(k: K, val: ProAssignmentValues[K]) =>
    onChange({ ...values, [k]: val });

const updateRow = (id: string, patch: Partial<ProAssignmentRubricRow>) => {
    onChange({
      ...values,
      rubricRows: values.rubricRows.map((r) => (r.id === id ? { ...r, ...patch } : r)),
    });
  };

const removeRow = (id: string) => {
    onChange({ ...values, rubricRows: values.rubricRows.filter((r) => r.id !== id) });
  };

const addRow = () => {
    onChange({ ...values, rubricRows: [...values.rubricRows, newRubricRow()] });
  };

return (
    <ProCard
      title="Advanced assignment options"
      badge="Pro"
      description="Rubric criteria (with optional learner checklist lines), file rules, and submission behaviour."
    >
      <div>
        <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
          <span className={LABEL}>Rubric criteria</span>
          <button type="button" className="text-xs font-semibold text-brand-600 hover:underline" onClick={addRow}>
            + Add criterion
          </button>
        </div>
        <p className={HINT}>
          Each row is one grading dimension. Weight is shown to learners as points or share of the rubric. Checklist lines
          appear as a short bullet list under that row.
        </p>
        {values.rubricRows.length === 0 ? (
          <p className="rounded-lg border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-300">
            No rubric rows yet. Add a row for each criterion (e.g. Structure, Accuracy) or leave empty for instructions-only
            assignments.
          </p>
        ) : (
          <ul className="space-y-3">
            {values.rubricRows.map((row) => (
              <li
                key={row.id}
                className="rounded-lg border border-slate-200 bg-white p-3 dark:border-slate-700 dark:bg-slate-900/50"
              >
                <div className="mb-2 flex flex-wrap items-center justify-end gap-2">
                  <button
                    type="button"
                    className="text-xs font-medium text-red-600 hover:underline"
                    onClick={() => removeRow(row.id)}
                  >
                    Remove
                  </button>
                </div>
                <div className="grid gap-3 sm:grid-cols-2">
                  <div>
                    <label className={LABEL} htmlFor={`sik-pro-r-${row.id}-t`}>
                      Criterion title
                    </label>
                    <input
                      id={`sik-pro-r-${row.id}-t`}
                      className={FIELD}
                      value={row.title}
                      onChange={(e) => updateRow(row.id, { title: e.target.value })}
                      placeholder="e.g. Clear thesis"
                    />
                  </div>
                  <div>
                    <label className={LABEL} htmlFor={`sik-pro-r-${row.id}-w`}>
                      Weight / points
                    </label>
                    <input
                      id={`sik-pro-r-${row.id}-w`}
                      type="number"
                      min={0}
                      className={FIELD}
                      value={row.weight}
                      onChange={(e) => updateRow(row.id, { weight: Number(e.target.value) })}
                    />
                  </div>
                </div>
                <div className="mt-2">
                  <label className={LABEL} htmlFor={`sik-pro-r-${row.id}-d`}>
                    Learner description (optional)
                  </label>
                  <textarea
                    id={`sik-pro-r-${row.id}-d`}
                    rows={2}
                    className={FIELD}
                    value={row.description}
                    onChange={(e) => updateRow(row.id, { description: e.target.value })}
                    placeholder="What you expect in this area…"
                  />
                </div>
                <div className="mt-2">
                  <label className={LABEL} htmlFor={`sik-pro-r-${row.id}-c`}>
                    Checklist lines (optional)
                  </label>
                  <textarea
                    id={`sik-pro-r-${row.id}-c`}
                    rows={3}
                    className={`${FIELD} font-mono text-[12px]`}
                    value={row.checks}
                    onChange={(e) => updateRow(row.id, { checks: e.target.value })}
                    placeholder={'One line per checklist item\ne.g. Uses at least two sources'}
                  />
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <label className={LABEL} htmlFor="sik-pro-exts">
          Allowed file extensions
        </label>
        <input
          id="sik-pro-exts"
          className={FIELD}
          value={values.allowedExts}
          onChange={(e) => set('allowedExts', e.target.value)}
          placeholder="pdf,docx,zip"
        />
        <p className={HINT}>Comma separated, lower-case, no dots. Leave empty to use the global default from add-on settings.</p>
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className={LABEL} htmlFor="sik-pro-minf">
            Minimum files
          </label>
          <input
            id="sik-pro-minf"
            type="number"
            min={0}
            max={50}
            className={FIELD}
            value={values.minFiles}
            onChange={(e) => set('minFiles', Number(e.target.value))}
          />
          <p className={HINT}>0 = no minimum.</p>
        </div>
        <div>
          <label className={LABEL} htmlFor="sik-pro-maxf">
            Maximum files (0 = global cap only)
          </label>
          <input
            id="sik-pro-maxf"
            type="number"
            min={0}
            max={50}
            className={FIELD}
            value={values.maxFiles}
            onChange={(e) => set('maxFiles', Number(e.target.value))}
          />
        </div>
      </div>
      <div className="space-y-2">
        <label className="flex items-start gap-2 text-sm text-slate-800 dark:text-slate-100">
          <input
            type="checkbox"
            className="mt-1 h-4 w-4 rounded border-slate-300"
            checked={values.allowLate}
            onChange={(e) => set('allowLate', e.target.checked)}
          />
          <span>Allow late submissions</span>
        </label>
        <label className="flex items-start gap-2 text-sm text-slate-800 dark:text-slate-100">
          <input
            type="checkbox"
            className="mt-1 h-4 w-4 rounded border-slate-300"
            checked={values.requireText}
            onChange={(e) => set('requireText', e.target.checked)}
          />
          <span>Require written response in addition to file uploads</span>
        </label>
        <label className="flex items-start gap-2 text-sm text-slate-800 dark:text-slate-100">
          <input
            type="checkbox"
            className="mt-1 h-4 w-4 rounded border-slate-300"
            checked={values.allowResubmit}
            onChange={(e) => set('allowResubmit', e.target.checked)}
          />
          <span>Allow resubmission after grading</span>
        </label>
      </div>
    </ProCard>
  );
}