// Fluentra Editor — reusable RuleBuilder for Diagram Settings acceptance criteria
// Loads AFTER editor-utils.jsx and editor-panels.jsx

const FE = window.FE;
const {
  DARK_SEL, CfgHead, AdvancedToggle, VariablePicker, ValueInput, ComparisonRule,
  OP_GROUPS, VALUE_TYPE_OPTS, discoverDiagramVariables,
  exprToValue, valueToExpr, buildComparisonExpr, parseCompoundExpr, parseComparisonExpr
} = FE;

function RuleBuilder({ expr, onChange, extraVars }) {
  const parsed = parseCompoundExpr(expr || '');
  const canBuilder = parsed !== null;
  const [showAdvanced, setShowAdvanced] = React.useState(false);
  const [rules, setRules] = React.useState(
    canBuilder && parsed.rules.length
      ? parsed.rules
      : [{variable:'event.source', operator:'==', valueType:'text', value:'samsara'}]
  );
  const [joiners, setJoiners] = React.useState(canBuilder ? parsed.joiners : []);
  const [exprVal, setExprVal] = React.useState(expr || '');

  React.useEffect(() => {
    const p = parseCompoundExpr(expr || '');
    setRules(p && p.rules.length ? p.rules : [{variable:'event.source', operator:'==', valueType:'text', value:'samsara'}]);
    setJoiners(p ? p.joiners : []);
    setExprVal(expr || '');
    setShowAdvanced(false);
  }, [expr]);

  const updateRule = (i, patch) => setRules(rs => rs.map((r, j) => j === i ? { ...r, ...patch } : r));
  const addRule = () => {
    setRules(rs => [...rs, {variable:'event.type', operator:'==', valueType:'text', value:''}]);
    setJoiners(js => [...js, 'and']);
  };
  const removeRule = i => {
    setRules(rs => rs.filter((_, j) => j !== i));
    setJoiners(js => js.filter((_, j) => j !== i - 1));
  };

  const buildExpr = () => {
    if (rules.length === 0) return '';
    return rules.map(buildComparisonExpr).reduce((expr, r, i) => {
      if (i === 0) return r;
      return expr + ' ' + (joiners[i-1] || 'and') + ' ' + r;
    }, '');
  };

  const apply = () => {
    const built = buildExpr();
    onChange(showAdvanced ? exprVal : built);
  };

  return (
    <div style={{display:'flex',flexDirection:'column',gap:10}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
        <span style={{fontSize:10,fontFamily:'Geist Mono,monospace',letterSpacing:'.06em',
          textTransform:'uppercase',color:'var(--ink-faint)'}}>
          {showAdvanced ? 'Advanced Python' : 'Rules'}
        </span>
        <AdvancedToggle active={showAdvanced} onClick={()=>setShowAdvanced(!showAdvanced)} color="#6366F1"/>
      </div>

      {!canBuilder && !showAdvanced && expr && (
        <div style={{padding:'7px 10px',background:'rgba(99,102,241,.06)',
          border:'1px solid rgba(99,102,241,.2)',borderRadius:7,
          fontSize:11,color:'#818CF8',lineHeight:1.5}}>
          This expression uses advanced Python. Open <b>Advanced</b> to edit it, or rebuild it here with simple rules.
        </div>
      )}

      {showAdvanced ? (
        <>
          <textarea className="textarea mono" rows={3} value={exprVal}
            onChange={e=>setExprVal(e.target.value)} style={{fontSize:11.5,lineHeight:1.6}}
            placeholder={"event.get('type') == 'alert'\nint(variables.get('count', 0)) > 0"}/>
          <div className="hint">
            Available: <code>event</code>, <code>variables</code> (dict-like)
          </div>
        </>
      ) : (
        <>
          {rules.map((rule, i) => (
            <div key={i} style={{display:'flex',flexDirection:'column',gap:6}}>
              {i > 0 && (
                <div style={{display:'flex',alignItems:'center',gap:10}}>
                  <div style={{flex:1,height:1,background:'rgba(255,255,255,.08)'}}/>
                  <select value={joiners[i-1]||'and'} onChange={e=>{
                    const newJoiners = [...joiners];
                    newJoiners[i-1] = e.target.value;
                    setJoiners(newJoiners);
                  }}
                    style={{...DARK_SEL,flex:'0 0 70px',fontSize:10.5,padding:'3px 6px'}}>
                    <option value="and" style={{background:'#0d0f1c'}}>AND</option>
                    <option value="or"  style={{background:'#0d0f1c'}}>OR</option>
                  </select>
                  <div style={{flex:1,height:1,background:'rgba(255,255,255,.08)'}}/>
                </div>
              )}
              <div style={{display:'flex',gap:5,alignItems:'flex-start'}}>
                <div style={{flex:1}}>
                  <ComparisonRule rule={rule} onChange={patch=>updateRule(i, patch)} extraVars={extraVars} />
                </div>
                {rules.length > 1 && (
                  <button className="icon-btn" style={{width:22,height:22,fontSize:12,marginTop:8}} aria-label="Remove rule"
                    onClick={()=>removeRule(i)}>×</button>
                )}
              </div>
            </div>
          ))}
          <button className="btn btn-ghost btn-sm" onClick={addRule}
            style={{fontSize:11,padding:'4px 0'}}>+ Add rule</button>
        </>
      )}

      <button className="btn btn-sm" onClick={apply}
        style={{width:'100%',background:'rgba(99,102,241,.1)',
          border:'1px solid rgba(99,102,241,.3)',color:'#818CF8'}}>
        ✓ Apply
      </button>
    </div>
  );
}

window.FE.RuleBuilder = RuleBuilder;