{
  "id": "ifttt-rule",
  "name": "IFTTT-style Rule",
  "category": "automation",
  "tags": ["ifttt", "rule", "automation", "trigger", "if-this-then-that", "workflow"],
  "description": "Build a simple if-this-then-that rule. Pick a trigger (cron/webhook/sensor), pick an action (send msg/run skill/api call), save. Persists to localStorage and registers via /api/event-triggers.",
  "triggers": ["ifttt", "if this then that", "automation rule", "trigger rule", "when X do Y", "automation workflow"],
  "defaultSize": { "w": 5, "h": 5 },
  "source": "function IfThisThenThat() {\n  const [name, setName] = React.useState('My Rule');\n  const [triggerType, setTriggerType] = React.useState('cron');\n  const [triggerArg, setTriggerArg] = React.useState('0 9 * * *');\n  const [actionType, setActionType] = React.useState('agent');\n  const [actionArg, setActionArg] = React.useState('REPLACE_WITH_ACTION');\n  const [rules, setRules] = React.useState(()=>{ try { return JSON.parse(localStorage.getItem('titan-ifttt-rules')||'[]'); } catch { return []; } });\n  const [busy, setBusy] = React.useState(false);\n  const save = async () => {\n    setBusy(true);\n    const rule = { id: Date.now()+'', name, triggerType, triggerArg, actionType, actionArg, enabled:true };\n    const next = [...rules, rule];\n    setRules(next); localStorage.setItem('titan-ifttt-rules', JSON.stringify(next));\n    try { await titan.api.call('/api/event-triggers', { method: 'POST', body: rule }); } catch {}\n    setBusy(false);\n  };\n  const toggle = (id) => { const next = rules.map(r=>r.id===id?{...r,enabled:!r.enabled}:r); setRules(next); localStorage.setItem('titan-ifttt-rules', JSON.stringify(next)); };\n  const remove = (id) => { const next = rules.filter(r=>r.id!==id); setRules(next); localStorage.setItem('titan-ifttt-rules', JSON.stringify(next)); };\n  return (\n    <div style={{padding:14,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column',gap:8}}>\n      <input value={name} onChange={e=>setName(e.target.value)} placeholder=\"Rule name\" style={{padding:'6px 10px',border:'1px solid #ccc',borderRadius:6,fontSize:14,fontWeight:600}}/>\n      <div style={{display:'flex',gap:6,alignItems:'center'}}>\n        <span style={{fontSize:12,fontWeight:600,color:'#FF9500',width:30}}>IF</span>\n        <select value={triggerType} onChange={e=>setTriggerType(e.target.value)} style={{padding:'6px',border:'1px solid #ccc',borderRadius:6,fontSize:12}}>\n          <option value=\"cron\">cron</option><option value=\"webhook\">webhook</option><option value=\"sensor\">sensor</option><option value=\"price\">price</option>\n        </select>\n        <input value={triggerArg} onChange={e=>setTriggerArg(e.target.value)} style={{flex:1,padding:'6px 8px',border:'1px solid #ccc',borderRadius:6,fontSize:12,fontFamily:'monospace'}}/>\n      </div>\n      <div style={{display:'flex',gap:6,alignItems:'center'}}>\n        <span style={{fontSize:12,fontWeight:600,color:'#34C759',width:30}}>THEN</span>\n        <select value={actionType} onChange={e=>setActionType(e.target.value)} style={{padding:'6px',border:'1px solid #ccc',borderRadius:6,fontSize:12}}>\n          <option value=\"agent\">ask agent</option><option value=\"skill\">run skill</option><option value=\"api\">api call</option><option value=\"notify\">notify</option>\n        </select>\n        <input value={actionArg} onChange={e=>setActionArg(e.target.value)} style={{flex:1,padding:'6px 8px',border:'1px solid #ccc',borderRadius:6,fontSize:12}}/>\n      </div>\n      <button onClick={save} disabled={busy} style={{padding:'8px',border:'none',borderRadius:6,background:'#007AFF',color:'#fff',fontWeight:600,cursor:'pointer'}}>{busy?'Saving…':'+ Save Rule'}</button>\n      <div style={{flex:1,overflow:'auto',marginTop:6}}>\n        {rules.map(r => (\n          <div key={r.id} style={{padding:8,borderBottom:'1px solid #f0f0f0',display:'flex',gap:8,alignItems:'center'}}>\n            <input type=\"checkbox\" checked={r.enabled} onChange={()=>toggle(r.id)}/>\n            <div style={{flex:1,fontSize:12}}>\n              <div style={{fontWeight:600}}>{r.name}</div>\n              <div style={{color:'#888'}}>IF {r.triggerType}: <code>{r.triggerArg}</code> → {r.actionType}: {r.actionArg}</div>\n            </div>\n            <button onClick={()=>remove(r.id)} style={{padding:'2px 8px',border:'1px solid #ddd',background:'#fff',borderRadius:4,cursor:'pointer'}}>✕</button>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<IfThisThenThat/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_ACTION", "description": "Default action (e.g. 'send me a slack message')", "default": "send me a daily summary" }
  ]
}