// Step5Poc — POC goals and decision context.

function Step5Poc({ data, update, onNext, onBack }) {
  const { React } = window;
  const { useState } = React;

  const [errors, setErrors] = useState({});
  const [toolInput, setToolInput] = useState('');

  function handleNext() {
    const errs = window.IntakeSchema.validateStep5(data);
    setErrors(errs);
    if (Object.keys(errs).length === 0) onNext();
  }

  function addTool(val) {
    const v = val.trim();
    if (!v) return;
    const cur = data.existingTools || [];
    if (!cur.includes(v)) update({ existingTools: [...cur, v] });
    setToolInput('');
  }

  function removeTool(val) {
    update({ existingTools: (data.existingTools || []).filter(x => x !== val) });
  }

  const charCount = (data.successCriteria || '').length;
  const charClass = charCount > 500 ? 'is-over' : charCount > 420 ? 'is-near' : '';

  const TIMELINE = [
    { value: 'asap', label: 'ASAP' },
    { value: 'within_30_days', label: 'within 30 days' },
    { value: 'next_quarter', label: 'next quarter' },
    { value: 'exploring_no_timeline', label: 'exploring — no timeline' },
  ];

  const DECISION = [
    {
      value: 'i_approve',
      label: 'i can approve',
      desc: "i'm the decision-maker — can sign off unilaterally",
    },
    {
      value: 'technical_evaluator',
      label: 'technical evaluator',
      desc: "i evaluate, someone else signs — but i drive the call",
    },
    {
      value: 'gathering_for_leadership',
      label: 'gathering for leadership',
      desc: "putting together a shortlist for a committee or exec",
    },
    {
      value: 'research_only',
      label: 'research only',
      desc: "exploring the space — no active buying process",
    },
  ];

  const BUDGET = [
    { value: 'budgeted', label: 'budgeted' },
    { value: 'need_to_secure', label: 'need to secure budget' },
    { value: 'no_budget_discussion', label: 'no budget discussion yet' },
    { value: 'prefer_not_to_say', label: 'prefer not to say' },
  ];

  return (
    <div className="form-step">
      <div className="form-step-heading">step 5 of 6 — POC</div>

      <div className="form-group">
        <label className="form-label">success criteria</label>
        <textarea
          className="form-field"
          rows={5}
          placeholder="what does a successful POC look like for you? e.g. 'find at least one high-severity issue in our API that our current scanner misses, demonstrate low false-positive rate, run within our air-gapped environment'"
          value={data.successCriteria || ''}
          onChange={e => update({ successCriteria: e.target.value })}
        />
        <div className={`char-count ${charClass}`}>{charCount} / 500</div>
        {errors.successCriteria && <div className="form-error">{errors.successCriteria}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">timeline</label>
        <div className="radio-group is-pills">
          {TIMELINE.map(t => (
            <div
              key={t.value}
              className={`radio-opt${data.timeline === t.value ? ' is-active' : ''}`}
              onClick={() => update({ timeline: t.value })}
            >
              {t.label}
            </div>
          ))}
        </div>
        {errors.timeline && <div className="form-error">{errors.timeline}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">decision process</label>
        <div className="radio-group is-vertical">
          {DECISION.map(d => (
            <div
              key={d.value}
              className={`radio-opt${data.decisionProcess === d.value ? ' is-active' : ''}`}
              onClick={() => update({ decisionProcess: d.value })}
            >
              <div>
                <div>{d.label}</div>
                <div className="radio-opt-desc">{d.desc}</div>
              </div>
            </div>
          ))}
        </div>
        {errors.decisionProcess && <div className="form-error">{errors.decisionProcess}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">
          budget status <span className="form-label-optional">optional</span>
        </label>
        <div className="radio-group is-pills">
          {BUDGET.map(b => (
            <div
              key={b.value}
              className={`radio-opt${data.budgetStatus === b.value ? ' is-active' : ''}`}
              onClick={() => update({ budgetStatus: b.value })}
            >
              {b.label}
            </div>
          ))}
        </div>
      </div>

      <div className="form-group">
        <label className="form-label">
          existing security tools <span className="form-label-optional">optional — type and press Enter</span>
        </label>
        <div className="tag-input-wrap">
          {(data.existingTools || []).map(t => (
            <span key={t} className="tag-chip">
              {t}
              <span className="tag-chip-remove" onClick={() => removeTool(t)}>×</span>
            </span>
          ))}
          <input
            className="tag-field"
            type="text"
            placeholder="e.g. Burp Suite, Veracode, Snyk..."
            value={toolInput}
            onChange={e => setToolInput(e.target.value)}
            onKeyDown={e => {
              if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); addTool(toolInput); }
              if (e.key === 'Backspace' && !toolInput && data.existingTools && data.existingTools.length > 0) {
                const tools = data.existingTools;
                removeTool(tools[tools.length - 1]);
              }
            }}
            onBlur={() => addTool(toolInput)}
          />
        </div>
      </div>

      <div className="form-actions">
        <button className="btn-back" onClick={onBack}>← back</button>
        <button className="btn-next" onClick={handleNext}>next →</button>
      </div>
    </div>
  );
}

window.Step5Poc = Step5Poc;