/* Track & Train — Session editor + Type creator (shared) */

// Emoji feeling rating
function FeelingPicker({ value, onChange }) {
  const cur = feelingOf(value);
  return (
    <div className="field">
      <label>{t('f_feeling')}</label>
      <div className="feel-row">
        {FEELINGS.map(f => (
          <button
            key={f.v}
            type="button"
            className={'feel-btn ' + (value === f.v ? 'on' : '')}
            onClick={() => onChange(value === f.v ? null : f.v)}
            aria-label={t(f.key)}
          >{f.emoji}</button>
        ))}
      </div>
      <div className="feel-label">{cur ? t(cur.key) : t('f_feeling_hint')}</div>
    </div>
  );
}

// Type color swatch picker (for new types)
function ColorPicker({ value, onChange }) {
  return (
    <div className="color-grid">
      {TYPE_COLORS.map(c => (
        <button
          key={c}
          type="button"
          className={'color-swatch ' + (value === c ? 'on' : '')}
          style={{ background: c }}
          onClick={() => onChange(c)}
          aria-label={c}
        >{value === c && <Icon.check/>}</button>
      ))}
    </div>
  );
}

// Inline "new type" mini-sheet content
function NewTypeForm({ existingColors, onCreate, onCancel }) {
  const firstFree = TYPE_COLORS.find(c => !existingColors.includes(c)) || TYPE_COLORS[0];
  const [name, setName] = useState('');
  const [color, setColor] = useState(firstFree);
  const ref = useRef(null);
  useEffect(() => { const t = setTimeout(() => ref.current && ref.current.focus(), 280); return () => clearTimeout(t); }, []);
  const canSave = name.trim().length > 0;
  return (
    <div className="field" style={{ gap: 14 }}>
      <div className="field">
        <label>{t('nt_name')}</label>
        <input ref={ref} className="input" value={name} placeholder={t('nt_name_ph')}
          onChange={e => setName(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter' && canSave) onCreate(name.trim(), color); }} />
      </div>
      <div className="field">
        <label>{t('nt_color')}</label>
        <ColorPicker value={color} onChange={setColor} />
      </div>
      <div className="flex gap-8" style={{ marginTop: 4 }}>
        <button className="btn secondary flex-1" onClick={onCancel}>{t('cancel')}</button>
        <button className="btn accent flex-1" disabled={!canSave} onClick={() => onCreate(name.trim(), color)}>{t('nt_create')}</button>
      </div>
    </div>
  );
}

// Full session editor — used for both new + edit
function SessionForm({ types, draft, onChange, onAddType }) {
  const [adding, setAdding] = useState(false);

  if (adding) {
    return (
      <NewTypeForm
        existingColors={types.map(t => t.color)}
        onCancel={() => setAdding(false)}
        onCreate={(name, color) => {
          const t = onAddType(name, color);
          onChange({ ...draft, typeId: t.id });
          setAdding(false);
        }}
      />
    );
  }

  return (
    <div className="flex" style={{ flexDirection: 'column', gap: 18 }}>
      <div className="field">
        <label>{t('f_type')}</label>
        <div className="type-grid">
          {types.map(t2 => (
            <button
              key={t2.id}
              type="button"
              className={'type-chip ' + (draft.typeId === t2.id ? 'on' : '')}
              onClick={() => onChange({ ...draft, typeId: t2.id })}
            >
              <span className="type-dot" style={{ background: draft.typeId === t2.id ? '#fff' : t2.color }}></span>
              {t2.name}
            </button>
          ))}
          <button type="button" className="type-chip add" onClick={() => setAdding(true)}>
            <Icon.plusSm/> {t('f_newtype')}
          </button>
        </div>
      </div>

      <FeelingPicker value={draft.feeling} onChange={(v) => onChange({ ...draft, feeling: v })} />

      <div className="field">
        <label>{t('f_notes')}</label>
        <textarea
          className="textarea"
          placeholder={t('f_notes_ph')}
          value={draft.notes}
          onChange={e => onChange({ ...draft, notes: e.target.value })}
        ></textarea>
      </div>
    </div>
  );
}

Object.assign(window, { FeelingPicker, ColorPicker, NewTypeForm, SessionForm });