// Workflow demo embed ، drag-reorder, inline rename, color cycle, publish toast.
// + Task library sidebar with pre-built tasks and "Add custom task" modal.

const { useState: useStateW, useRef: useRefW } = React;

// ─── Task Library ─────────────────────────────────────────
const PF_TASK_LIBRARY = [
  { emoji:'💡', name:'فكرة',         color:'orange' },
  { emoji:'📝', name:'كتابة',        color:'blue' },
  { emoji:'📸', name:'تصوير',        color:'amber' },
  { emoji:'🎙️', name:'تعليق صوتي',   color:'amber' },
  { emoji:'✂️', name:'مونتاج',       color:'purple' },
  { emoji:'🎵', name:'موسيقى',       color:'pink' },
  { emoji:'👁️', name:'مراجعة',       color:'teal' },
  { emoji:'📤', name:'نشر',          color:'green' },
  { emoji:'📋', name:'تخطيط',        color:'indigo' },
  { emoji:'📐', name:'إعداد',        color:'gray' },
  { emoji:'🎨', name:'تنسيق',        color:'pink' },
  { emoji:'🔍', name:'تدقيق',        color:'teal' },
];

const PF_EMOJI_POOL = ['💡','📝','🎙️','🎵','🎬','✂️','🎨','🖼️','👁️','✅','📤','📣','🌐','📌','🔍','📸','📋','📐','📚','🎯','⭐','🚀','🔥','💎'];

function WorkflowDemo() {
  const [stages, setStages] = useStateW(window.PF_STAGES_INIT);
  const [editingId, setEditingId] = useStateW(null);
  const [draftName, setDraftName] = useStateW('');
  const [flashId, setFlashId] = useStateW(null);
  const [dragId, setDragId] = useStateW(null);
  const [overId, setOverId] = useStateW(null);
  const [toast, setToast] = useStateW(null);
  const [dirty, setDirty] = useStateW(false);
  const [showCustomModal, setShowCustomModal] = useStateW(false);
  const [customName, setCustomName] = useStateW('');
  const [customEmoji, setCustomEmoji] = useStateW('📌');

  const flashStage = (id) => {
    setFlashId(id);
    setTimeout(() => setFlashId(null), 700);
  };

  const cycleColor = (id) => {
    setStages(arr => arr.map(s => {
      if (s.id !== id) return s;
      const palette = window.PF_STAGE_COLORS;
      const k = (palette.indexOf(s.color) + 1) % palette.length;
      return { ...s, color: palette[k] };
    }));
    setDirty(true);
    flashStage(id);
  };

  const cycleEmoji = (id) => {
    setStages(arr => arr.map(s => {
      if (s.id !== id) return s;
      const k = (PF_EMOJI_POOL.indexOf(s.emoji) + 1) % PF_EMOJI_POOL.length;
      return { ...s, emoji: PF_EMOJI_POOL[k] };
    }));
    setDirty(true);
  };

  const remove = (id) => {
    setStages(arr => arr.filter(s => s.id !== id));
    setDirty(true);
  };

  const startEdit = (s) => { setEditingId(s.id); setDraftName(s.name); };
  const commitEdit = () => {
    if (editingId == null) return;
    setStages(arr => arr.map(s => s.id === editingId ? { ...s, name: draftName || s.name } : s));
    setEditingId(null);
    setDirty(true);
  };

  const onDragStart = (id) => setDragId(id);
  const onDragOver = (e, id) => { e.preventDefault(); setOverId(id); };
  const onDrop = (e, dropId) => {
    e.preventDefault();
    if (!dragId || dragId === dropId) { setDragId(null); setOverId(null); return; }
    setStages(arr => {
      const next = arr.slice();
      const from = next.findIndex(s => s.id === dragId);
      const to = next.findIndex(s => s.id === dropId);
      const [moved] = next.splice(from, 1);
      next.splice(to, 0, moved);
      return next;
    });
    flashStage(dragId);
    setDirty(true);
    setDragId(null); setOverId(null);
  };

  const addFromLibrary = (item) => {
    const id = 's' + Date.now();
    const newStage = { id, emoji: item.emoji, color: item.color, name: item.name };
    setStages(arr => [...arr, newStage]);
    flashStage(id);
    setDirty(true);
  };

  const openCustomModal = () => {
    setCustomName('');
    setCustomEmoji('📌');
    setShowCustomModal(true);
  };

  const saveCustomTask = () => {
    if (!customName.trim()) return;
    const id = 's' + Date.now();
    const palette = ['teal','pink','indigo','red','orange','blue'];
    const newStage = {
      id, emoji: customEmoji,
      color: palette[Math.floor(Math.random()*palette.length)],
      name: customName.trim(),
    };
    setStages(arr => [...arr, newStage]);
    flashStage(id);
    setDirty(true);
    setShowCustomModal(false);
  };

  const publish = () => {
    setDirty(false);
    setToast('محفوظ ✓');
    setTimeout(() => setToast(null), 1600);
  };

  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="wfd-layout">
        {/* Task library sidebar */}
        <aside className="wfd-library">
          <div className="wfd-library-h">
            <div className="wfd-library-title">📚 مكتبة المهام</div>
            <div className="wfd-library-sub">اضغط على المهمة لإضافتها لسير العمل</div>
          </div>
          <div className="wfd-library-list">
            {PF_TASK_LIBRARY.map((t, i) => {
              const c = window.pfChip(t.color);
              return (
                <button key={i} className="wfd-library-item" onClick={() => addFromLibrary(t)}>
                  <span className="wfd-library-emoji">{t.emoji}</span>
                  <span className="wfd-library-name">{t.name}</span>
                  <span className="wfd-library-dot" style={{background:c.mid}}/>
                </button>
              );
            })}
          </div>
          <button className="wfd-library-custom" onClick={openCustomModal}>
            <Plus size={14}/>
            <span>مهمة مخصصة</span>
          </button>
        </aside>

        {/* Canvas */}
        <div className="wfd-main">
          {toast && <div className="demo-toast"><Check size={14}/> {toast}</div>}
          <div className="wfd-canvas">
            {stages.map((s, i) => {
              const c = window.pfChip(s.color);
              return (
                <React.Fragment key={s.id}>
                  <div
                    className={'wfd-stage' + (flashId === s.id ? ' flash' : '') + (dragId === s.id ? ' dragging' : '')}
                    draggable
                    onDragStart={() => onDragStart(s.id)}
                    onDragOver={(e) => onDragOver(e, s.id)}
                    onDrop={(e) => onDrop(e, s.id)}
                    onDragEnd={() => { setDragId(null); setOverId(null); }}
                  >
                    <div className="wfd-bar" style={{background: c.bar}}/>
                    <div className="wfd-grip"><GripV/></div>
                    <button className="wfd-remove" onClick={() => remove(s.id)} title="إزالة"><X size={12}/></button>
                    <div className="wfd-body">
                      <button className="wfd-emoji" onClick={() => cycleEmoji(s.id)} title="تغيير الإيموجي">{s.emoji}</button>
                      <div style={{flex:1, minWidth:0}}>
                        {editingId === s.id ? (
                          <input
                            autoFocus
                            className="wfd-name editing"
                            value={draftName}
                            onChange={(e) => setDraftName(e.target.value)}
                            onBlur={commitEdit}
                            onKeyDown={(e) => { if (e.key === 'Enter') commitEdit(); }}
                          />
                        ) : (
                          <button className="wfd-name" onClick={() => startEdit(s)}>{s.name}</button>
                        )}
                        <button onClick={() => cycleColor(s.id)} title="تغيير اللون"
                                style={{
                                  marginTop: 8,
                                  width: 16, height: 16, borderRadius: 9999,
                                  background: c.mid, border: '2px solid white',
                                  boxShadow: '0 0 0 1px var(--border-default)',
                                  cursor: 'pointer',
                                }}/>
                      </div>
                    </div>
                  </div>
                  {i < stages.length - 1 && <span className="wfd-arrow">←</span>}
                </React.Fragment>
              );
            })}
            {stages.length === 0 && (
              <div className="wfd-empty">اختر مهمة من المكتبة لتبدأ</div>
            )}
          </div>
          <div className="wfd-toolbar">
            <span className={'wfd-status' + (dirty ? ' dirty' : '')}>
              <span className="dot"/>
              {dirty ? 'لم ينشر بعد' : 'محفوظ'}
            </span>
            <span style={{font:'500 12px/1 var(--font-arabic)', color:'var(--fg-4)'}}>
              {stages.length} مرحلة
            </span>
            <button className="wfd-publish" onClick={publish}>
              <Send size={14}/> اعتماد
            </button>
          </div>
        </div>
      </div>

      {/* Custom task modal */}
      {showCustomModal && (
        <div className="wfd-modal-backdrop" onClick={() => setShowCustomModal(false)}>
          <div className="wfd-modal" onClick={(e) => e.stopPropagation()}>
            <div className="wfd-modal-h">
              <h3 style={{margin:0, font:'700 16px/1 var(--font-arabic)', color:'var(--fg-1)'}}>مهمة مخصصة</h3>
              <button className="wfd-modal-x" onClick={() => setShowCustomModal(false)}><X size={14}/></button>
            </div>
            <div className="wfd-modal-body">
              <label className="wfd-field">
                <span className="wfd-field-label">اسم المهمة</span>
                <input
                  autoFocus
                  value={customName}
                  onChange={(e) => setCustomName(e.target.value)}
                  onKeyDown={(e) => { if (e.key === 'Enter') saveCustomTask(); }}
                  placeholder="مثال: ترجمة، تصميم thumbnail…"
                  className="wfd-input"
                />
              </label>
              <div className="wfd-field">
                <span className="wfd-field-label">الأيقونة</span>
                <div className="wfd-emoji-picker">
                  {PF_EMOJI_POOL.slice(0, 18).map(e => (
                    <button key={e}
                      onClick={() => setCustomEmoji(e)}
                      className={'wfd-emoji-opt' + (customEmoji === e ? ' active' : '')}
                    >{e}</button>
                  ))}
                </div>
              </div>
            </div>
            <div className="wfd-modal-foot">
              <button className="wfd-btn-secondary" onClick={() => setShowCustomModal(false)}>إلغاء</button>
              <button className="wfd-btn-primary" onClick={saveCustomTask} disabled={!customName.trim()}>
                <Plus size={12}/> أضف
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function WorkflowDemoSection() {
  return (
    <section className="section" style={{background:'var(--bg-app)'}}>
      <div className="container">
        <div className="eyebrow">الميزة الأولى · سير العمل</div>
        <h2 className="section-title">صمم سير العمل كما يناسب فريقك</h2>
        <p className="section-sub">
          أضف مراحل، رتبها بالسحب، فعل المراجعة على المراحل التي تحتاجها، واعتمدها بنقرة. كل تعديل يحفظ تلقائيا.
        </p>
        <WorkflowDemo/>
      </div>
    </section>
  );
}

window.WorkflowDemoSection = WorkflowDemoSection;