/* WPSiteBeam - Roadmap (v1.0)
   Native React component replacing IframeTab iframe.
   Customer view: kanban with voting + idea submission.
   SA view: full management, status control, promote from internal notes.
   React 18 compatible - no deprecated patterns.
*/
(function () {
  var useState = React.useState;
  var useEffect = React.useEffect;
  var useMemo = React.useMemo;
  var useCallback = React.useCallback;

  function sb() { return window.supabase_client; }

  /* ---- Constants ---- */
  var STATUSES = [
    { id:'all',          label:'All',          color:'var(--dim)'     },
    { id:'submitted',    label:'Submitted',    color:'var(--beam)'    },
    { id:'under_review', label:'Under Review', color:'var(--warn)'    },
    { id:'planned',      label:'Planned',      color:'var(--purple)'  },
    { id:'in_progress',  label:'In Progress',  color:'var(--orange)'  },
    { id:'done',         label:'Done',         color:'var(--green)'   },
    { id:'declined',     label:'Declined',     color:'var(--red)'     },
  ];

  var STATUS_COLOR = {
    submitted:    'var(--beam)',
    under_review: 'var(--warn)',
    planned:      'var(--purple)',
    in_progress:  'var(--orange)',
    done:         'var(--green)',
    declined:     'var(--red)',
  };

  var CATEGORIES = [
    { id:'all',         label:'All'         },
    { id:'scanner',     label:'Scanner'     },
    { id:'reporting',   label:'Reports'     },
    { id:'saas',        label:'Platform'    },
    { id:'integrations',label:'Integrations'},
    { id:'migration',   label:'Migration'   },
    { id:'tools',       label:'Tools'       },
    { id:'general',     label:'General'     },
  ];

  /* ---- Submit Idea Modal ---- */
  function SubmitModal(props) {
    var onClose = props.onClose;
    var onSubmit = props.onSubmit;
    var _t = useState(''); var title = _t[0]; var setTitle = _t[1];
    var _d = useState(''); var desc = _d[0]; var setDesc = _d[1];
    var _c = useState('general'); var cat = _c[0]; var setCat = _c[1];
    var _s = useState(false); var saving = _s[0]; var setSaving = _s[1];
    var _e = useState(''); var err = _e[0]; var setErr = _e[1];

    function handleSubmit() {
      if (!title.trim()) { setErr('Title is required'); return; }
      setSaving(true); setErr('');
      sb().auth.getUser().then(function(res) {
        var uid = res.data && res.data.user ? res.data.user.id : null;
        return sb().from('public_roadmap').insert([{
          title: title.trim(),
          description: desc.trim() || null,
          category: cat,
          status: 'submitted',
          is_official: false,
          submitted_by: uid,
        }]).select().single();
      }).then(function(res) {
        setSaving(false);
        if (res.error) { setErr(res.error.message); return; }
        onSubmit(res.data);
      });
    }

    var inp = {
      width:'100%', padding:'8px 11px', borderRadius:7, fontSize:13,
      background:'var(--surface-2)', border:'1px solid var(--border)',
      color:'var(--text)', outline:'none', fontFamily:'inherit'
    };

    return React.createElement('div', {
      style:{ position:'fixed', inset:0, background:'rgba(0,0,0,.55)', zIndex:200,
        display:'flex', alignItems:'center', justifyContent:'center', padding:20 }
    },
      React.createElement('div', {
        style:{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:12,
          padding:24, width:'100%', maxWidth:480 }
      },
        React.createElement('div', { style:{ fontSize:15, fontWeight:700, color:'var(--text)', marginBottom:16 } }, 'Submit a feature idea'),
        React.createElement('div', { style:{ display:'flex', flexDirection:'column', gap:12 } },
          React.createElement('div', null,
            React.createElement('label', { style:{ fontSize:11, color:'var(--dim)', display:'block', marginBottom:4 } }, 'Title *'),
            React.createElement('input', { style:inp, value:title, onChange:function(e){ setTitle(e.target.value); }, placeholder:'Brief description of the feature...' })
          ),
          React.createElement('div', null,
            React.createElement('label', { style:{ fontSize:11, color:'var(--dim)', display:'block', marginBottom:4 } }, 'Details (optional)'),
            React.createElement('textarea', { style:Object.assign({},inp,{minHeight:80,resize:'vertical',lineHeight:1.6}),
              value:desc, onChange:function(e){ setDesc(e.target.value); },
              placeholder:'Describe the use case and why it would help...' })
          ),
          React.createElement('div', null,
            React.createElement('label', { style:{ fontSize:11, color:'var(--dim)', display:'block', marginBottom:4 } }, 'Category'),
            React.createElement('select', { style:Object.assign({},inp,{cursor:'pointer'}),
              value:cat, onChange:function(e){ setCat(e.target.value); } },
              CATEGORIES.filter(function(c){ return c.id !== 'all'; }).map(function(c) {
                return React.createElement('option', { key:c.id, value:c.id }, c.label);
              })
            )
          )
        ),
        err && React.createElement('div', { style:{ fontSize:11, color:'var(--red)', marginTop:8 } }, err),
        React.createElement('div', { style:{ display:'flex', gap:8, justifyContent:'flex-end', marginTop:16 } },
          React.createElement('button', { onClick:onClose,
            style:{ padding:'7px 14px', borderRadius:6, fontSize:12, cursor:'pointer',
              background:'transparent', border:'1px solid var(--border)', color:'var(--dim)' }
          }, 'Cancel'),
          React.createElement('button', { onClick:handleSubmit, disabled:saving,
            style:{ padding:'7px 14px', borderRadius:6, fontSize:12, fontWeight:700, cursor:'pointer',
              background:'var(--orange)', border:'none', color:'#000', opacity:saving?0.6:1 }
          }, saving ? 'Submitting...' : 'Submit idea')
        )
      )
    );
  }

  /* ---- SA Edit Modal ---- */
  function EditModal(props) {
    var item = props.item;
    var onClose = props.onClose;
    var onSave = props.onSave;
    var _form = useState(Object.assign({}, item)); var form = _form[0]; var setForm = _form[1];
    var _s = useState(false); var saving = _s[0]; var setSaving = _s[1];

    function set(k, v) {
      setForm(function(f) { var n = Object.assign({}, f); n[k] = v; return n; });
    }

    function handleSave() {
      setSaving(true);
      sb().from('public_roadmap').update({
        title: form.title,
        description: form.description,
        category: form.category,
        status: form.status,
        is_pinned: form.is_pinned,
        target_quarter: form.target_quarter || null,
      }).eq('id', form.id).select().single().then(function(res) {
        setSaving(false);
        if (!res.error) onSave(res.data);
      });
    }

    var inp = {
      width:'100%', padding:'7px 10px', borderRadius:6, fontSize:12,
      background:'var(--surface-2)', border:'1px solid var(--border)',
      color:'var(--text)', outline:'none', fontFamily:'inherit'
    };

    return React.createElement('div', {
      style:{ position:'fixed', inset:0, background:'rgba(0,0,0,.55)', zIndex:200,
        display:'flex', alignItems:'center', justifyContent:'center', padding:20 }
    },
      React.createElement('div', {
        style:{ background:'var(--surface)', border:'1px solid var(--border-2)', borderRadius:12,
          padding:24, width:'100%', maxWidth:520 }
      },
        React.createElement('div', { style:{ fontSize:14, fontWeight:700, color:'var(--orange)', marginBottom:14 } }, 'Edit roadmap item'),
        React.createElement('div', { style:{ display:'flex', flexDirection:'column', gap:10 } },
          React.createElement('input', { style:inp, value:form.title, onChange:function(e){ set('title',e.target.value); }, placeholder:'Title' }),
          React.createElement('textarea', { style:Object.assign({},inp,{minHeight:80,resize:'vertical',lineHeight:1.6}),
            value:form.description||'', onChange:function(e){ set('description',e.target.value); }, placeholder:'Description' }),
          React.createElement('div', { style:{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 } },
            React.createElement('select', { style:Object.assign({},inp,{cursor:'pointer'}),
              value:form.status, onChange:function(e){ set('status',e.target.value); } },
              STATUSES.filter(function(s){ return s.id !== 'all'; }).map(function(s) {
                return React.createElement('option', { key:s.id, value:s.id }, s.label);
              })
            ),
            React.createElement('select', { style:Object.assign({},inp,{cursor:'pointer'}),
              value:form.category, onChange:function(e){ set('category',e.target.value); } },
              CATEGORIES.filter(function(c){ return c.id !== 'all'; }).map(function(c) {
                return React.createElement('option', { key:c.id, value:c.id }, c.label);
              })
            ),
            React.createElement('input', { style:inp, value:form.target_quarter||'',
              onChange:function(e){ set('target_quarter',e.target.value); }, placeholder:'Q3 2026' })
          ),
          React.createElement('label', { style:{ display:'flex', alignItems:'center', gap:6, fontSize:12, color:'var(--dim)', cursor:'pointer' } },
            React.createElement('input', { type:'checkbox', checked:form.is_pinned||false,
              onChange:function(){ set('is_pinned',!form.is_pinned); }, style:{ accentColor:'var(--orange)' } }),
            'Pin to top of roadmap'
          )
        ),
        React.createElement('div', { style:{ display:'flex', gap:8, justifyContent:'flex-end', marginTop:14 } },
          React.createElement('button', { onClick:onClose,
            style:{ padding:'7px 14px', borderRadius:6, fontSize:12, cursor:'pointer',
              background:'transparent', border:'1px solid var(--border)', color:'var(--dim)' }
          }, 'Cancel'),
          React.createElement('button', { onClick:handleSave, disabled:saving,
            style:{ padding:'7px 14px', borderRadius:6, fontSize:12, fontWeight:700, cursor:'pointer',
              background:'var(--orange)', border:'none', color:'#000', opacity:saving?0.6:1 }
          }, saving ? 'Saving...' : 'Save changes')
        )
      )
    );
  }

  /* ---- Roadmap Item Card ---- */
  function RoadmapCard(props) {
    var item = props.item;
    var isSA = props.isSA;
    var userVoted = props.userVoted;
    var onVote = props.onVote;
    var onEdit = props.onEdit;
    var onDecline = props.onDecline;

    var statusColor = STATUS_COLOR[item.status] || 'var(--dim)';
    var statusLabel = STATUSES.find(function(s){ return s.id === item.status; });
    statusLabel = statusLabel ? statusLabel.label : item.status;

    var catLabel = CATEGORIES.find(function(c){ return c.id === item.category; });
    catLabel = catLabel ? catLabel.label : item.category;

    return React.createElement('div', {
      style:{
        background:'var(--surface)', border:'1px solid var(--border)',
        borderRadius:10, padding:'14px 16px', display:'flex', gap:14,
        alignItems:'flex-start', position:'relative',
        borderLeft: item.is_pinned ? '3px solid var(--orange)' : '3px solid transparent',
      }
    },
      /* Vote button */
      React.createElement('button', {
        onClick:function(){ onVote(item.id, userVoted); },
        title: userVoted ? 'Remove vote' : 'Vote for this feature',
        style:{
          display:'flex', flexDirection:'column', alignItems:'center', gap:3,
          padding:'8px 10px', borderRadius:8, flexShrink:0,
          background: userVoted ? 'var(--orange-dim)' : 'var(--surface-2)',
          border: '1px solid ' + (userVoted ? 'var(--orange-soft)' : 'var(--border)'),
          color: userVoted ? 'var(--orange)' : 'var(--dim)',
          cursor:'pointer', minWidth:46, transition:'all .15s'
        }
      },
        React.createElement('span', { style:{ fontSize:14, lineHeight:1 } }, userVoted ? '▲' : '△'),
        React.createElement('span', { style:{ fontSize:12, fontWeight:700, lineHeight:1 } }, item.vote_count || 0)
      ),
      /* Content */
      React.createElement('div', { style:{ flex:1, minWidth:0 } },
        React.createElement('div', { style:{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:8, marginBottom:6 } },
          React.createElement('div', { style:{ fontWeight:600, fontSize:13, color:'var(--text)', lineHeight:1.4 } },
            item.is_pinned ? React.createElement('span', { style:{ color:'var(--orange)', marginRight:5 } }, '★') : null,
            item.title
          ),
          React.createElement('div', { style:{ display:'flex', gap:5, flexShrink:0 } },
            React.createElement('span', { style:{
              fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:4,
              background: statusColor + '20', color: statusColor,
              border: '1px solid ' + statusColor + '40', whiteSpace:'nowrap'
            } }, statusLabel),
            item.target_quarter && React.createElement('span', { style:{
              fontSize:10, color:'var(--dim)', padding:'2px 7px', borderRadius:4,
              background:'var(--surface-2)', border:'1px solid var(--border)'
            } }, item.target_quarter)
          )
        ),
        item.description && React.createElement('div', { style:{ fontSize:12, color:'var(--dim)', lineHeight:1.6, marginBottom:8 } },
          item.description
        ),
        React.createElement('div', { style:{ display:'flex', gap:6, alignItems:'center' } },
          React.createElement('span', { style:{
            fontSize:10, fontWeight:500, padding:'2px 7px', borderRadius:4,
            background:'var(--surface-2)', color:'var(--muted)', border:'1px solid var(--border)'
          } }, catLabel),
          !item.is_official && React.createElement('span', { style:{ fontSize:10, color:'var(--dim)' } }, 'Community idea'),
          isSA && React.createElement('div', { style:{ marginLeft:'auto', display:'flex', gap:6 } },
            React.createElement('button', { onClick:function(){ onEdit(item); },
              style:{ fontSize:10, padding:'3px 9px', borderRadius:4, cursor:'pointer', fontWeight:600,
                background:'var(--orange-dim)', border:'1px solid var(--orange-soft)', color:'var(--orange)' }
            }, 'Edit'),
            item.status !== 'declined' && React.createElement('button', { onClick:function(){ onDecline(item.id); },
              style:{ fontSize:10, padding:'3px 9px', borderRadius:4, cursor:'pointer',
                background:'transparent', border:'1px solid var(--border)', color:'var(--muted)' }
            }, 'Decline')
          )
        )
      )
    );
  }

  /* ---- Main Roadmap Component ---- */
  function Roadmap(props) {
    var role = props.role || 'customer';
    var isSA = role === 'sa';

    var _items = useState([]); var items = _items[0]; var setItems = _items[1];
    var _loading = useState(true); var loading = _loading[0]; var setLoading = _loading[1];
    var _votes = useState({}); var votes = _votes[0]; var setVotes = _votes[1];
    var _catFilter = useState('all'); var catFilter = _catFilter[0]; var setCat = _catFilter[1];
    var _statusFilter = useState('all'); var statusFilter = _statusFilter[0]; var setStatus = _statusFilter[1];
    var _search = useState(''); var search = _search[0]; var setSearch = _search[1];
    var _showSubmit = useState(false); var showSubmit = _showSubmit[0]; var setShowSubmit = _showSubmit[1];
    var _editItem = useState(null); var editItem = _editItem[0]; var setEditItem = _editItem[1];
    var _uid = useState(null); var uid = _uid[0]; var setUid = _uid[1];

    /* Load data */
    useEffect(function() {
      setLoading(true);

      /* Get current user */
      sb().auth.getUser().then(function(res) {
        if (res.data && res.data.user) setUid(res.data.user.id);
      });

      /* Load roadmap items */
      sb().from('public_roadmap').select('*')
        .order('is_pinned', { ascending:false })
        .order('vote_count',  { ascending:false })
        .order('created_at',  { ascending:false })
        .then(function(res) {
          setLoading(false);
          if (!res.error) setItems(res.data || []);
        });
    }, []);

    /* Load user votes after uid is known */
    useEffect(function() {
      if (!uid) return;
      sb().from('roadmap_votes').select('roadmap_id').eq('user_id', uid)
        .then(function(res) {
          if (!res.error) {
            var vMap = {};
            (res.data || []).forEach(function(v) { vMap[v.roadmap_id] = true; });
            setVotes(vMap);
          }
        });
    }, [uid]);

    /* Vote toggle */
    function handleVote(id, alreadyVoted) {
      if (!uid) { alert('Please log in to vote.'); return; }
      if (alreadyVoted) {
        sb().from('roadmap_votes').delete()
          .eq('roadmap_id', id).eq('user_id', uid)
          .then(function(res) {
            if (!res.error) {
              setVotes(function(v) { var n = Object.assign({},v); delete n[id]; return n; });
              setItems(function(prev) {
                return prev.map(function(it) {
                  return it.id === id ? Object.assign({},it,{vote_count:Math.max(0,(it.vote_count||1)-1)}) : it;
                });
              });
            }
          });
      } else {
        sb().from('roadmap_votes').insert([{roadmap_id:id, user_id:uid}])
          .then(function(res) {
            if (!res.error) {
              setVotes(function(v) { var n = Object.assign({},v); n[id] = true; return n; });
              setItems(function(prev) {
                return prev.map(function(it) {
                  return it.id === id ? Object.assign({},it,{vote_count:(it.vote_count||0)+1}) : it;
                });
              });
            }
          });
      }
    }

    /* Decline item (SA) */
    function handleDecline(id) {
      sb().from('public_roadmap').update({status:'declined'}).eq('id', id)
        .then(function(res) {
          if (!res.error) {
            setItems(function(prev) {
              return prev.map(function(it) {
                return it.id === id ? Object.assign({},it,{status:'declined'}) : it;
              });
            });
          }
        });
    }

    /* After edit save */
    function handleSaved(updated) {
      setItems(function(prev) {
        return prev.map(function(it) { return it.id === updated.id ? updated : it; });
      });
      setEditItem(null);
    }

    /* After new submission */
    function handleNewIdea(item) {
      setItems(function(prev) { return [item].concat(prev); });
      setShowSubmit(false);
    }

    /* Filter */
    var filtered = useMemo(function() {
      return items.filter(function(it) {
        if (catFilter !== 'all' && it.category !== catFilter) return false;
        if (statusFilter !== 'all') {
          if (statusFilter === 'all' ) return true;
          if (it.status !== statusFilter) return false;
        }
        if (search) {
          var q = search.toLowerCase();
          return (it.title||'').toLowerCase().indexOf(q) >= 0 ||
                 (it.description||'').toLowerCase().indexOf(q) >= 0;
        }
        return true;
      });
    }, [items, catFilter, statusFilter, search]);

    /* Status counts */
    var counts = useMemo(function() {
      var c = {};
      items.forEach(function(it) { c[it.status] = (c[it.status]||0) + 1; });
      return c;
    }, [items]);

    /* Width fix 2026-05-18 — removed `maxWidth:1100, margin:'0 auto'`
       to match Brand Profile / Account / Billing standard width (full content area).
       The .main grid container in shell.css handles overall width. */
    return React.createElement('div', null,
      /* Header */
      React.createElement('div', { style:{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:16 } },
        React.createElement('div', null,
          React.createElement('div', { style:{ fontSize:18, fontWeight:700, color:'var(--text)', marginBottom:3 } }, 'Product Roadmap'),
          React.createElement('div', { style:{ fontSize:12, color:'var(--dim)' } },
            'Vote on features and submit ideas. ' + items.length + ' items across ' + Object.keys(counts).length + ' stages.'
          )
        ),
        React.createElement('div', { style:{ display:'flex', gap:8 } },
          React.createElement('button', { onClick:function(){ setShowSubmit(true); },
            style:{ padding:'7px 14px', borderRadius:7, fontSize:12, fontWeight:600, cursor:'pointer',
              background:'var(--surface)', border:'1px solid var(--border)', color:'var(--text)' }
          }, '+ Submit idea'),
          isSA && React.createElement('button', { onClick:function(){
            setEditItem({ id:null, title:'', description:'', category:'general', status:'planned',
              is_official:true, is_pinned:false, target_quarter:'' });
          }, style:{ padding:'7px 14px', borderRadius:7, fontSize:12, fontWeight:600, cursor:'pointer',
              background:'var(--orange)', border:'none', color:'#000' }
          }, '+ Add official item')
        )
      ),

      /* Status summary pills */
      React.createElement('div', { style:{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:14 } },
        STATUSES.filter(function(s){ return s.id !== 'all' && counts[s.id]; }).map(function(s) {
          var on = statusFilter === s.id;
          return React.createElement('button', { key:s.id, onClick:function(){ setStatus(on ? 'all' : s.id); },
            style:{ padding:'4px 10px', borderRadius:5, fontSize:11, fontWeight:on?700:500, cursor:'pointer',
              background: on ? s.color + '20' : 'var(--surface)',
              border: '1px solid ' + (on ? s.color : 'var(--border)'),
              color: on ? s.color : 'var(--dim)' }
          }, s.label + ' (' + counts[s.id] + ')');
        }),
        React.createElement('span', { style:{ marginLeft:'auto', fontSize:11, color:'var(--dim)', alignSelf:'center' } },
          filtered.length + ' of ' + items.length
        )
      ),

      /* Search + category filters */
      React.createElement('div', { style:{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:16, alignItems:'center' } },
        React.createElement('input', {
          value:search, onChange:function(e){ setSearch(e.target.value); },
          placeholder:'Search roadmap...',
          style:{ flex:1, minWidth:180, padding:'7px 11px', borderRadius:7, fontSize:12,
            background:'var(--surface)', border:'1px solid var(--border)',
            color:'var(--text)', outline:'none', fontFamily:'inherit' }
        }),
        CATEGORIES.map(function(c) {
          var on = catFilter === c.id;
          return React.createElement('button', { key:c.id, onClick:function(){ setCat(c.id); },
            style:{ padding:'5px 11px', borderRadius:5, fontSize:11, cursor:'pointer', whiteSpace:'nowrap',
              fontWeight:on?700:400,
              background: on ? 'var(--orange-dim)' : 'var(--surface)',
              border: '1px solid ' + (on ? 'var(--orange-soft)' : 'var(--border)'),
              color: on ? 'var(--orange)' : 'var(--dim)' }
          }, c.label);
        })
      ),

      /* Items list */
      loading && React.createElement('div', { style:{ padding:'40px 0', textAlign:'center', color:'var(--dim)', fontSize:12 } }, 'Loading roadmap...'),
      !loading && filtered.length === 0 && React.createElement('div', {
        style:{ padding:'40px 0', textAlign:'center', color:'var(--dim)', fontSize:12 }
      }, items.length === 0 ? 'No roadmap items yet.' : 'No items match current filters.'),
      !loading && React.createElement('div', { style:{ display:'flex', flexDirection:'column', gap:8 } },
        filtered.map(function(item) {
          return React.createElement(RoadmapCard, {
            key: item.id, item: item, isSA: isSA,
            userVoted: votes[item.id] || false,
            onVote: handleVote,
            onEdit: setEditItem,
            onDecline: handleDecline,
          });
        })
      ),

      /* Modals */
      showSubmit && React.createElement(SubmitModal, {
        onClose:function(){ setShowSubmit(false); },
        onSubmit: handleNewIdea,
      }),
      editItem && React.createElement(EditModal, {
        item: editItem,
        onClose:function(){ setEditItem(null); },
        onSave: handleSaved,
      })
    );
  }

  window.Roadmap = Roadmap;
  console.log('[WPSB] Roadmap v1.0 loaded');
})();