// Brook Consultancy — field renderers

function AutofillBadge({ meta, fieldId, onAccept, onClear }) {
  if (!meta) return null;
  const conf = (meta.confidence || 'med').toUpperCase();
  return (
    <div style={{ marginTop: 4, display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between' }}>
      <span className="autofill-badge">
        AI auto-filled <span className="conf">{conf}</span>
        {meta.accepted && <span style={{ marginLeft: 4 }}>✓</span>}
      </span>
      <div className="autofill-actions">
        {!meta.accepted && <button className="accept" onClick={() => onAccept(fieldId)}>Accept</button>}
        <button className="clear" onClick={() => onClear(fieldId)}>Clear</button>
      </div>
    </div>
  );
}

function FieldLabel({ field, children }) {
  return (
    <label className="field-label">
      {field.label}
      {field.help && <span className="help">— {field.help}</span>}
      {children}
    </label>
  );
}

function FieldWrap({ field, meta, children, onAccept, onClear }) {
  const cls = `field${meta ? ' autofilled' : ''}`;
  return (
    <div className={cls}>
      <FieldLabel field={field} />
      {field.help && !field.label.includes('—') && <div className="field-help">{field.help}</div>}
      {children}
      {meta && <AutofillBadge meta={meta} fieldId={field.id} onAccept={onAccept} onClear={onClear} />}
    </div>
  );
}

// ---------------------------------------------------------------
// Field types
// ---------------------------------------------------------------
function Field({ field, value, onChange, meta, onAccept, onClear, allFields }) {
  // showIf logic
  if (field.showIf) {
    if (allFields[field.showIf.field] !== field.showIf.equals) return null;
  }

  const v = value === undefined || value === null ? '' : value;

  switch (field.type) {
    case 'text':
    case 'email':
    case 'tel':
    case 'date':
    case 'number':
      return (
        <FieldWrap field={field} meta={meta} onAccept={onAccept} onClear={onClear}>
          <input
            className="input"
            type={field.type === 'number' ? 'number' : (field.type === 'date' ? 'date' : (field.type === 'email' ? 'email' : (field.type === 'tel' ? 'tel' : 'text')))}
            value={v}
            placeholder={field.placeholder || ''}
            onChange={e => onChange(field.id, e.target.value)}
          />
        </FieldWrap>
      );

    case 'textarea':
      return (
        <FieldWrap field={field} meta={meta} onAccept={onAccept} onClear={onClear}>
          <textarea
            className={`textarea${field.hero ? ' hero' : ''}`}
            rows={field.rows || 4}
            value={v}
            placeholder={field.placeholder || ''}
            onChange={e => onChange(field.id, e.target.value)}
          />
        </FieldWrap>
      );

    case 'select': {
      return (
        <FieldWrap field={field} meta={meta} onAccept={onAccept} onClear={onClear}>
          <select className="select" value={v} onChange={e => onChange(field.id, e.target.value)}>
            <option value="">— Select —</option>
            {field.options.map(opt => <option key={opt} value={opt}>{opt}</option>)}
          </select>
        </FieldWrap>
      );
    }

    case 'multitag': {
      const opts = window.BROOK_SCHEMA[field.optionsKey] || [];
      const selected = Array.isArray(v) ? v : [];
      const toggle = (opt) => {
        const next = selected.includes(opt) ? selected.filter(x => x !== opt) : [...selected, opt];
        onChange(field.id, next);
      };
      return (
        <FieldWrap field={field} meta={meta} onAccept={onAccept} onClear={onClear}>
          <div className="multitag-grid">
            {opts.map(opt => (
              <button
                key={opt}
                type="button"
                className={`tag-chip${selected.includes(opt) ? ' active' : ''}`}
                onClick={() => toggle(opt)}
              >{opt}</button>
            ))}
          </div>
        </FieldWrap>
      );
    }

    case 'flagselect': {
      return (
        <FieldWrap field={field} meta={meta} onAccept={onAccept} onClear={onClear}>
          <div className="flag-grid">
            {field.options.map(opt => (
              <button
                key={opt}
                type="button"
                className={`flag-chip${v === opt ? ' active' : ''}`}
                onClick={() => onChange(field.id, v === opt ? '' : opt)}
              >
                <span className="flag-icon">⚑</span>{opt}
              </button>
            ))}
          </div>
        </FieldWrap>
      );
    }

    case 'urgency': {
      return (
        <FieldWrap field={field} meta={meta} onAccept={onAccept} onClear={onClear}>
          <div className="urgency-grid">
            {field.options.map(opt => (
              <div
                key={opt.value}
                className={`urgency-option${v === opt.value ? ' active' : ''}`}
                style={v === opt.value ? { borderColor: opt.color, backgroundColor: opt.color + '0d' } : {}}
                onClick={() => onChange(field.id, v === opt.value ? '' : opt.value)}
              >
                <span className="dot" style={{ background: opt.color }}></span>
                <span className="label">{opt.label}</span>
              </div>
            ))}
          </div>
        </FieldWrap>
      );
    }

    case 'leadpriority': {
      return (
        <FieldWrap field={field} meta={meta} onAccept={onAccept} onClear={onClear}>
          <div className="leadpriority-grid">
            {field.options.map(opt => (
              <div
                key={opt.value}
                className={`leadpriority-option${v === opt.value ? ' active' : ''}`}
                style={v === opt.value ? { borderColor: opt.color, backgroundColor: opt.color + '0d' } : {}}
                onClick={() => onChange(field.id, v === opt.value ? '' : opt.value)}
              >
                <span className="dot" style={{ background: opt.color }}></span>
                <span className="label">{opt.label}</span>
              </div>
            ))}
          </div>
        </FieldWrap>
      );
    }

    case 'checklist': {
      const selected = Array.isArray(v) ? v : [];
      const toggle = (opt) => {
        const next = selected.includes(opt) ? selected.filter(x => x !== opt) : [...selected, opt];
        onChange(field.id, next);
      };
      return (
        <FieldWrap field={field} meta={meta} onAccept={onAccept} onClear={onClear}>
          <div className="checklist">
            {field.options.map(opt => (
              <label key={opt}>
                <input type="checkbox" checked={selected.includes(opt)} onChange={() => toggle(opt)} />
                <span>{opt}</span>
              </label>
            ))}
          </div>
        </FieldWrap>
      );
    }

    default:
      return null;
  }
}

// ---------------------------------------------------------------
// Repeaters
// ---------------------------------------------------------------
function QuoteRepeater({ items, onChange }) {
  const sectionTags = ['Leadership','Finance','Compliance','People','Systems','Culture','Goals','Risk','Other'];
  const add = () => onChange([...items, { id: window.brookUid(), quote: '', context: '', tag: '' }]);
  const update = (i, field, val) => {
    const next = [...items];
    next[i] = { ...next[i], [field]: val };
    onChange(next);
  };
  const remove = (i) => onChange(items.filter((_, idx) => idx !== i));

  return (
    <div className="repeater-list">
      {items.length === 0 && <div className="empty-state"><strong>No quotes yet</strong>Capture direct quotes that bring the report to life.</div>}
      {items.map((item, i) => (
        <div key={item.id} className="repeater-item">
          <div className="item-num">QUOTE {i + 1}</div>
          <button className="remove" title="Remove" onClick={() => remove(i)}>×</button>
          <div className="field" style={{ marginTop: 18 }}>
            <label className="field-label">The quote</label>
            <textarea className="textarea" rows={3} value={item.quote} placeholder="What the client said..." onChange={e => update(i, 'quote', e.target.value)} />
          </div>
          <div className="field-row">
            <div className="field">
              <label className="field-label">Context</label>
              <input className="input" value={item.context} placeholder="What prompted this" onChange={e => update(i, 'context', e.target.value)} />
            </div>
            <div className="field">
              <label className="field-label">Section tag</label>
              <select className="select" value={item.tag} onChange={e => update(i, 'tag', e.target.value)}>
                <option value="">— Tag —</option>
                {sectionTags.map(t => <option key={t} value={t}>{t}</option>)}
              </select>
            </div>
          </div>
        </div>
      ))}
      <button className="repeater-add" onClick={add}>+ Add quote</button>
    </div>
  );
}

function EvidenceRepeater({ items, onChange }) {
  const cats = ['Financial','Regulatory','Operational','People','Strategic','Risk','Other'];
  const sources = ['Stated by client','Document shared','Observed by consultant','Inferred'];
  const placeholders = [
    'e.g. "Last CQC inspection was 14 months ago, rated Requires Improvement"',
    'e.g. "Current deficit is approximately £60k against a £900k budget"',
    'e.g. "Three managers have left in the last four months"',
    'e.g. "No management accounts produced in the last six months"'
  ];
  const add = () => onChange([...items, { id: window.brookUid(), text: '', category: '', source: '' }]);
  const update = (i, field, val) => {
    const next = [...items];
    next[i] = { ...next[i], [field]: val };
    onChange(next);
  };
  const remove = (i) => onChange(items.filter((_, idx) => idx !== i));

  return (
    <div className="repeater-list">
      {items.length === 0 && <div className="empty-state"><strong>No evidence captured yet</strong>Record specific facts, figures, dates, or observations from the call.</div>}
      {items.map((item, i) => (
        <div key={item.id} className="repeater-item">
          <div className="item-num">EVIDENCE {i + 1}</div>
          <button className="remove" onClick={() => remove(i)}>×</button>
          <div className="field" style={{ marginTop: 18 }}>
            <label className="field-label">Evidence or fact</label>
            <textarea className="textarea" rows={2} value={item.text} placeholder={placeholders[i % placeholders.length]} onChange={e => update(i, 'text', e.target.value)} />
          </div>
          <div className="field-row">
            <div className="field">
              <label className="field-label">Category</label>
              <select className="select" value={item.category} onChange={e => update(i, 'category', e.target.value)}>
                <option value="">— Category —</option>
                {cats.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>
            <div className="field">
              <label className="field-label">Source</label>
              <select className="select" value={item.source} onChange={e => update(i, 'source', e.target.value)}>
                <option value="">— Source —</option>
                {sources.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
            </div>
          </div>
        </div>
      ))}
      <button className="repeater-add" onClick={add}>+ Add evidence</button>
    </div>
  );
}

function WorkstreamRepeater({ items, onChange }) {
  const timeframes = ['1–4 weeks','1–3 months','3–6 months','6–12 months','Ongoing'];
  const priorities = ['Immediate','Phase 2','Phase 3'];
  const add = () => onChange([...items, { id: window.brookUid(), title: '', description: '', timeframe: '', priority: '' }]);
  const update = (i, field, val) => {
    const next = [...items];
    next[i] = { ...next[i], [field]: val };
    onChange(next);
  };
  const remove = (i) => onChange(items.filter((_, idx) => idx !== i));

  return (
    <div className="repeater-list">
      {items.length === 0 && <div className="empty-state"><strong>No workstreams drafted yet</strong>Sketch out the workstreams you might propose.</div>}
      {items.map((item, i) => (
        <div key={item.id} className="repeater-item">
          <div className="item-num">WORKSTREAM {i + 1}</div>
          <button className="remove" onClick={() => remove(i)}>×</button>
          <div className="field" style={{ marginTop: 18 }}>
            <label className="field-label">Workstream title</label>
            <input className="input" value={item.title} placeholder="e.g. Financial Recovery Plan" onChange={e => update(i, 'title', e.target.value)} />
          </div>
          <div className="field">
            <label className="field-label">Brief description</label>
            <textarea className="textarea" rows={2} value={item.description} placeholder="What this involves..." onChange={e => update(i, 'description', e.target.value)} />
          </div>
          <div className="field-row">
            <div className="field">
              <label className="field-label">Estimated timeframe</label>
              <select className="select" value={item.timeframe} onChange={e => update(i, 'timeframe', e.target.value)}>
                <option value="">— Timeframe —</option>
                {timeframes.map(t => <option key={t} value={t}>{t}</option>)}
              </select>
            </div>
            <div className="field">
              <label className="field-label">Priority</label>
              <select className="select" value={item.priority} onChange={e => update(i, 'priority', e.target.value)}>
                <option value="">— Priority —</option>
                {priorities.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>
          </div>
        </div>
      ))}
      <button className="repeater-add" onClick={add}>+ Add workstream</button>
    </div>
  );
}

Object.assign(window, { Field, QuoteRepeater, EvidenceRepeater, WorkstreamRepeater, AutofillBadge });