// Ideas demo embed ، composer + voting + Inbox/Kanban toggle + 4-column status flow.

const { useState: useStateI, useMemo: useMemoI } = React;

const PF_KANBAN_COLS = [
  { id:'pool',        label:'هامش الأفكار', dot:'#94a3b8', next:'approved',   nextLabel:'اعتمد' },
  { id:'approved',    label:'المعتمدة',      dot:'#4f46e5', next:'in_progress',nextLabel:'ابدأ التنفيذ' },
  { id:'in_progress', label:'قيد التنفيذ',   dot:'#d97706', next:'done',       nextLabel:'أنجز' },
  { id:'done',        label:'منجزة',         dot:'#059669', next:null,         nextLabel:null },
];

function IdeasDemo() {
  const [tab, setTab] = useStateI('kanban');
  const [ideas, setIdeas] = useStateI(window.PF_IDEAS_INIT);
  const [draft, setDraft] = useStateI('');
  const [draftAccount, setDraftAccount] = useStateI('ch1');
  const [toast, setToast] = useStateI(null);
  const [dragId, setDragId] = useStateI(null);
  const [votingOn, setVotingOn] = useStateI(true);

  const flash = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 1600);
  };

  const onVote = (id, dir) => {
    setIdeas(arr => arr.map(i => {
      if (i.id !== id) return i;
      const wasUp = i.myVote === 1;
      const wasDown = i.myVote === -1;
      let votes = i.votes;
      if (wasUp) votes -= 1;
      if (wasDown) votes += 1;
      if (dir === 1) votes += 1;
      if (dir === -1) votes -= 1;
      return { ...i, votes, myVote: dir };
    }));
  };

  const addIdea = () => {
    if (!draft.trim()) return;
    const id = 'i' + Date.now();
    const acct = window.PF_ACCOUNTS.find(a => a.id === draftAccount);
    const newIdea = {
      id, cat:'video', emoji:'💡', title: draft, desc: '',
      author:'أنت', votes:1, myVote:1,
      platform: acct ? acct.platform : 'youtube',
      account: draftAccount, publish_date: null, status:'pool',
    };
    setIdeas(arr => [newIdea, ...arr]);
    setDraft('');
    flash('أضيفت إلى هامش الأفكار');
  };

  const removeIdea = (id) => setIdeas(arr => arr.filter(i => i.id !== id));

  const setStatus = (id, status, msg) => {
    setIdeas(arr => arr.map(i => i.id === id ? { ...i, status } : i));
    if (msg) flash(msg);
  };

  const sorted = useMemoI(() => [...ideas].sort((a,b) => b.votes - a.votes), [ideas]);

  const VoteStack = ({ idea }) => votingOn ? (
    <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:2, flex:'0 0 auto'}}>
      <button
        onClick={(e) => { e.stopPropagation(); onVote(idea.id, idea.myVote === 1 ? 0 : 1); }}
        style={{
          width:28, height:22, borderRadius:6, border:0,
          background: idea.myVote === 1 ? 'var(--indigo-50)' : 'transparent',
          color: idea.myVote === 1 ? 'var(--indigo-700)' : 'var(--fg-3)',
          cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'center',
        }}><ChevronUp size={14}/></button>
      <span style={{
        fontWeight:700, fontSize:13, lineHeight:1,
        color: idea.myVote === 1 ? 'var(--indigo-700)' : 'var(--fg-2)',
        fontVariantNumeric:'tabular-nums', minWidth:22, textAlign:'center',
      }}>{idea.votes}</span>
      <button
        onClick={(e) => { e.stopPropagation(); onVote(idea.id, idea.myVote === -1 ? 0 : -1); }}
        style={{
          width:28, height:22, borderRadius:6, border:0,
          background: idea.myVote === -1 ? 'var(--status-danger-bg)' : 'transparent',
          color: idea.myVote === -1 ? 'var(--status-danger-fg)' : 'var(--fg-4)',
          cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'center',
        }}><ChevronDown size={14}/></button>
    </div>
  ) : null;

  const accountOf = (id) => window.PF_ACCOUNTS.find(a => a.id === id);
  const platformOf = (id) => window.PF_PLATFORMS.find(p => p.id === id);

  const IdeaTile = ({ idea }) => {
    const col = PF_KANBAN_COLS.find(c => c.id === idea.status);
    const acct = accountOf(idea.account);
    const plat = platformOf(idea.platform);
    return (
      <div
        draggable
        onDragStart={() => setDragId(idea.id)}
        onDragEnd={() => setDragId(null)}
        style={{
          background:'var(--white)',
          border:'1px solid var(--border-default)',
          borderRadius:'var(--radius-10)',
          padding:'10px 12px',
          display:'flex', flexDirection:'column', gap:8,
          cursor:'grab',
          opacity: dragId === idea.id ? 0.5 : 1,
          boxShadow:'var(--shadow-sm)',
        }}>
        <div style={{display:'flex', alignItems:'flex-start', gap:8}}>
          <span style={{fontSize:15, marginTop:1}}>{idea.emoji}</span>
          <div style={{flex:1, minWidth:0}}>
            <div style={{font:'600 13px/1.35 var(--font-arabic)', color:'var(--fg-1)'}}>{idea.title}</div>
            <div style={{marginTop:4, display:'flex', alignItems:'center', gap:6, flexWrap:'wrap'}}>
              {plat && <span style={{font:'600 10.5px/1 var(--font-sans)', color:'var(--fg-3)'}}>{plat.emoji} {plat.label}</span>}
              {acct && <span style={{font:'500 10.5px/1 var(--font-arabic)', color:'var(--fg-4)'}}>· {acct.label}</span>}
            </div>
          </div>
          <VoteStack idea={idea}/>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:6}}>
          <span style={{font:'500 10.5px/1 var(--font-arabic)', color:'var(--fg-4)'}}>بقلم {idea.author}</span>
          <span style={{flex:1}}/>
          {col && col.next && (
            <button
              onClick={(e) => { e.stopPropagation(); setStatus(idea.id, col.next, `نقلت إلى "${PF_KANBAN_COLS.find(c=>c.id===col.next).label}"`); }}
              style={{
                padding:'4px 9px', borderRadius:6, border:'1px solid var(--indigo-200)',
                background:'var(--indigo-50)', color:'var(--indigo-700)',
                font:'600 11px/1 var(--font-arabic)', cursor:'pointer',
              }}>{col.nextLabel}</button>
          )}
          <button onClick={(e) => { e.stopPropagation(); removeIdea(idea.id); }}
            style={{width:22, height:22, borderRadius:5, border:0, background:'transparent',
              color:'var(--fg-4)', cursor:'pointer', display:'inline-flex', alignItems:'center', justifyContent:'center'}}>
            <Trash2 size={11}/>
          </button>
        </div>
      </div>
    );
  };

  const IdeaRow = ({ idea }) => {
    const col = PF_KANBAN_COLS.find(c => c.id === idea.status);
    return (
      <div style={{
        background:'var(--white)', border:'1px solid var(--border-default)',
        borderRadius:'var(--radius-10)', padding:'12px 14px',
        display:'flex', alignItems:'flex-start', gap:12,
      }}>
        <VoteStack idea={idea}/>
        <div style={{flex:1, minWidth:0}}>
          <div style={{display:'flex', alignItems:'flex-start', gap:8}}>
            <span style={{fontSize:15, marginTop:1}}>{idea.emoji}</span>
            <div style={{flex:1, minWidth:0}}>
              <div style={{font:'600 14px/1.35 var(--font-arabic)', color:'var(--fg-1)'}}>{idea.title}</div>
              {idea.desc && (
                <div style={{font:'500 12.5px/1.5 var(--font-arabic)', color:'var(--fg-2)', marginTop:4,
                  display:'-webkit-box', WebkitLineClamp:1, WebkitBoxOrient:'vertical', overflow:'hidden'}}>
                  {idea.desc}
                </div>
              )}
              <div style={{marginTop:6, display:'flex', alignItems:'center', gap:6, font:'500 11.5px/1 var(--font-arabic)', color:'var(--fg-3)'}}>
                <span style={{color:'var(--fg-4)'}}>بقلم</span>
                <span style={{color:'var(--fg-2)', fontWeight:600}}>{idea.author}</span>
                <span style={{color:'var(--fg-4)'}}>·</span>
                <span style={{
                  padding:'2px 7px', borderRadius:9999, background: col ? `color-mix(in oklab, ${col.dot} 15%, white)` : 'var(--bg-subtle)',
                  color: col ? col.dot : 'var(--fg-3)', font:'700 10.5px/1 var(--font-arabic)',
                }}>{col ? col.label : '،'}</span>
              </div>
            </div>
          </div>
        </div>
        {col && col.next && (
          <button
            onClick={() => setStatus(idea.id, col.next, `نقلت إلى "${PF_KANBAN_COLS.find(c=>c.id===col.next).label}"`)}
            style={{
              padding:'6px 11px', borderRadius:7, border:'1px solid var(--indigo-200)',
              background:'var(--indigo-50)', color:'var(--indigo-700)',
              font:'600 12px/1 var(--font-arabic)', cursor:'pointer', flex:'0 0 auto',
            }}>{col.nextLabel}</button>
        )}
      </div>
    );
  };

  const onDropCol = (status) => {
    if (!dragId) return;
    setStatus(dragId, status, `نقلت إلى "${PF_KANBAN_COLS.find(c=>c.id===status).label}"`);
    setDragId(null);
  };

  return (
    <div className="demo-shell">
      <div className="demo-chrome">
        <span className="dots"><i/><i/><i/></span>
        <span className="label">mazbat.app · الأفكار</span>
        <span className="demo-tag">تجربة حية</span>
      </div>
      <div className="demo-flex">
        <div className="demo-body" style={{padding:'24px', minHeight:'520px'}}>
          {toast && <div className="demo-toast"><Check size={14}/> {toast}</div>}
          {/* Composer */}
          <div style={{
            background:'var(--white)', border:'1px solid var(--border-default)',
            borderRadius:'var(--radius-xl)', padding:'10px 14px',
            display:'flex', alignItems:'center', gap:10, marginBottom:14, flexWrap:'wrap',
          }}>
            <span style={{
              width:30, height:30, borderRadius:8,
              background:'var(--indigo-50)', color:'var(--indigo-600)',
              display:'inline-flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto',
            }}><Sparkles size={15}/></span>
            <input
              value={draft}
              onChange={(e) => setDraft(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter') addIdea(); }}
              placeholder="أضف فكرة ، ماذا سننتج بعد؟"
              style={{flex:'1 1 220px', fontWeight:500, fontSize:14, lineHeight:1.4, color:'var(--fg-1)',
                border:0, background:'transparent', outline:'none', fontFamily:'inherit', padding:'8px 0'}}
            />
            <select value={draftAccount} onChange={(e) => setDraftAccount(e.target.value)}
              style={{
                font:'500 12.5px/1 var(--font-arabic)', color:'var(--fg-2)',
                border:'1px solid var(--border-default)', background:'var(--white)',
                borderRadius:7, padding:'7px 10px', cursor:'pointer', outline:'none',
              }}>
              {window.PF_ACCOUNTS.map(a => <option key={a.id} value={a.id}>{a.label}</option>)}
            </select>
            <button onClick={addIdea} disabled={!draft.trim()}
              style={{
                padding:'7px 12px', borderRadius:8, border:0,
                background: draft.trim() ? 'var(--indigo-600)' : 'var(--slate-200)',
                color: draft.trim() ? 'white' : 'var(--fg-3)',
                font:'600 12.5px/1 var(--font-arabic)',
                cursor: draft.trim() ? 'pointer' : 'not-allowed',
                display:'inline-flex', alignItems:'center', gap:5,
              }}><Plus size={12}/> إضافة</button>
          </div>

          {/* Tabs */}
          <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:14}}>
            <div style={{
              display:'inline-flex', gap:2, padding:3,
              background:'var(--slate-100)', borderRadius:'var(--radius-10)',
            }}>
              {[
                { id:'kanban', label:'كانبان', icon:<Columns size={12}/> },
                { id:'inbox',  label:'قائمة',  icon:<Inbox   size={12}/> },
              ].map(t => {
                const active = tab === t.id;
                return (
                  <button key={t.id} onClick={() => setTab(t.id)}
                    style={{
                      display:'inline-flex', alignItems:'center', gap:6,
                      padding:'7px 12px', borderRadius:'var(--radius-10)',
                      border: active ? '1px solid var(--indigo-200)' : '1px solid transparent',
                      background: active ? 'var(--white)' : 'transparent',
                      color: active ? 'var(--indigo-700)' : 'var(--fg-2)',
                      font: active ? '700 12.5px/1 var(--font-arabic)' : '600 12.5px/1 var(--font-arabic)',
                      cursor:'pointer', boxShadow: active ? 'var(--shadow-tab-active)' : 'none',
                    }}>
                    {t.icon} {t.label}
                  </button>
                );
              })}
            </div>
            <span style={{flex:1}}/>
            {/* Voting toggle */}
            <button
              onClick={() => setVotingOn(v => !v)}
              style={{
                display:'inline-flex', alignItems:'center', gap:7,
                padding:'7px 11px', borderRadius:8,
                border: votingOn ? '1px solid var(--indigo-200)' : '1px solid var(--border-default)',
                background: votingOn ? 'var(--indigo-50)' : 'var(--white)',
                color: votingOn ? 'var(--indigo-700)' : 'var(--fg-3)',
                font:'600 12px/1 var(--font-arabic)', cursor:'pointer',
              }}>
              <span style={{
                width:28, height:16, borderRadius:9999, padding:2,
                background: votingOn ? 'var(--indigo-600)' : 'var(--slate-300)',
                position:'relative', display:'inline-block', flex:'0 0 auto',
                transition:'background 150ms',
              }}>
                <span style={{
                  width:12, height:12, borderRadius:9999, background:'white',
                  display:'block',
                  transform: votingOn ? 'translateX(-12px)' : 'translateX(0)',
                  transition:'transform 150ms',
                  boxShadow:'0 1px 2px rgba(0,0,0,0.2)',
                }}/>
              </span>
              تفعيل التصويت 👍
            </button>
            <span style={{font:'500 12px/1 var(--font-arabic)', color:'var(--fg-4)'}}>
              {ideas.length} فكرة
            </span>
          </div>

          {tab === 'inbox' ? (
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {sorted.map(i => <IdeaRow key={i.id} idea={i}/>)}
            </div>
          ) : (
            <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10}}>
              {PF_KANBAN_COLS.map(col => {
                const items = sorted.filter(i => i.status === col.id);
                return (
                  <div key={col.id}
                    onDragOver={(e) => e.preventDefault()}
                    onDrop={() => onDropCol(col.id)}
                    style={{
                      background:'var(--slate-50)',
                      border:'1px solid var(--border-default)',
                      borderRadius:'var(--radius-xl)',
                      padding:8, display:'flex', flexDirection:'column', gap:8, minHeight:240,
                    }}>
                    <div style={{display:'flex', alignItems:'center', gap:6, padding:'4px 4px 0'}}>
                      <span style={{width:7, height:7, borderRadius:9999, background: col.dot}}/>
                      <span style={{font:'700 11.5px/1 var(--font-arabic)', color:'var(--fg-1)'}}>{col.label}</span>
                      <span style={{
                        font:'600 10.5px/1 var(--font-sans)', color:'var(--fg-3)',
                        background:'var(--white)', border:'1px solid var(--border-default)',
                        padding:'2px 6px', borderRadius:9999,
                      }}>{items.length}</span>
                    </div>
                    {items.map(i => <IdeaTile key={i.id} idea={i}/>)}
                    {items.length === 0 && (
                      <div style={{font:'500 11px/1.4 var(--font-arabic)', color:'var(--fg-4)', textAlign:'center', padding:'14px 0'}}>
                        اسحب الأفكار هنا
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>
        <aside className="demo-side">
          <div>
            <div className="demo-side-title">جربها بنفسك</div>
            <p style={{font:'500 13px/1.5 var(--font-arabic)', color:'var(--fg-3)', margin:'4px 0 0'}}>
              اكتب فكرة، صوت بالأسهم، اعتمدها، ثم انقلها إلى التنفيذ ، أو اسحب البطاقات بين الأعمدة.
            </p>
          </div>
          <ul className="demo-side-points" style={{padding:0, margin:0}}>
            <li>أربع مراحل واضحة: من الهامش حتى الإنجاز</li>
            <li>كل فكرة مرتبطة بحساب ، يوتيوب، تيك توك، إنستغرام، بودكاست</li>
            <li>ما تعتمده يصبح خطة تنفيذ في الجدول التالي</li>
          </ul>
        </aside>
      </div>
    </div>
  );
}

function IdeasDemoSection() {
  return (
    <section className="section" style={{background:'var(--white)'}}>
      <div className="container">
        <div className="eyebrow">الميزة الثانية · الأفكار</div>
        <h2 className="section-title">نسهل عليك كتابة أفكارك</h2>
        <p className="section-sub">
          كل فكرة تبدأ في «هامش الأفكار»، وبإمكانك تفعيل التصويت على الأفكار بين فريقك، اعتمد ما يستحق، وحتى ما تضيع أفكارك الرهيبة.
        </p>
        <IdeasDemo/>
      </div>
    </section>
  );
}

window.IdeasDemoSection = IdeasDemoSection;