/* ctor-connections.jsx — Tab «Связи» между задачами (HANDOFF / INSPECTION / BLOCKING) */
const { useState: cnUseState } = React;

const PATTERN_META = {
  HANDOFF:    { label:'Передача',    color:'#e8793a', bg:'#fff0e6', desc:'Завершение задачи A → старт задачи B у другой роли' },
  INSPECTION: { label:'Проверка',    color:'#92620a', bg:'#fff7ea', desc:'Завершение A → инспекционная задача для прораба/менеджера' },
  BLOCKING:   { label:'Блокировка',  color:'#f04e62', bg:'#fdecec', desc:'Задача A блокирует старт B до approve' },
  PARALLEL:   { label:'Параллельно', color:'#5aad6e', bg:'#e7f6ed', desc:'Задачи A и B идут параллельно, роли могут пересекаться' },
};

const CN_SEED = [
  { id:'con-1', pattern:'HANDOFF',    fromName:'Прокладка труб',    spawnName:'Согласовать схему с плиточником', blocksName:'Укладка плитки',      audience:'screeder',    note:'Сантехник передаёт работу плиточнику' },
  { id:'con-2', pattern:'BLOCKING',   fromName:'Стяжка пола',       spawnName:null,                              blocksName:'Чистовая отделка',     audience:'foreman',     note:'Сушка стяжки 28 дн; без approve не начинать' },
  { id:'con-3', pattern:'INSPECTION', fromName:'Разводка электрики', spawnName:'Замер СУЭ (скрытые работы)',    blocksName:'Закрытие электрики',   audience:'foreman',     note:'Акт скрытых работ перед закрытием' },
  { id:'con-4', pattern:'HANDOFF',    fromName:'Демонтаж',           spawnName:'Вывоз мусора',                   blocksName:null,                   audience:'demolisher',  note:'' },
];

const CN_LS = 'ctor_connections_v1';
function loadConnections() {
  try { const r = localStorage.getItem(CN_LS); if (r) return JSON.parse(r); } catch(e) {}
  return CN_SEED.map(c => ({...c}));
}
function saveConnections(cs) { try { localStorage.setItem(CN_LS, JSON.stringify(cs)); } catch(e) {} }

const cnStyles = {
  table: { background:'var(--card)', borderRadius:'var(--radius-md, 10px)', border:'1px solid var(--border-subtle)', overflow:'hidden' },
  th: { textAlign:'left', padding:'12px 20px', fontSize:11, fontWeight:700, color:'var(--text-tertiary)', textTransform:'uppercase', letterSpacing:'.06em', background:'color-mix(in srgb, var(--secondary) 55%, var(--card))', borderBottom:'1px solid var(--border-subtle)' },
  td: { padding:'14px 20px', fontSize:13.5, verticalAlign:'middle', borderBottom:'1px solid var(--border-subtle)' },
  ov: { position:'fixed', inset:0, background:'rgba(0,0,0,.18)', zIndex:199 },
  drawer: { position:'fixed', top:0, right:0, bottom:0, width:520, background:'var(--card)', boxShadow:'var(--shadow-modal)', zIndex:200, display:'flex', flexDirection:'column', borderLeft:'1px solid var(--border-subtle)' },
};

function PatternBadge({ pattern }) {
  const m = PATTERN_META[pattern] || PATTERN_META.HANDOFF;
  return (
    <span style={{ display:'inline-flex', alignItems:'center', padding:'3px 10px', borderRadius:980, background:m.bg, color:m.color, fontSize:12, fontWeight:700 }}>
      {m.label}
    </span>
  );
}

function ConnectionArrow({ from, spawn, blocks }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:6, flexWrap:'wrap', fontSize:13 }}>
      <span style={{ fontWeight:600, color:'#1a1714', background:'#f0ece5', padding:'3px 10px', borderRadius:7 }}>{from}</span>
      {spawn && <>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#e8793a" strokeWidth="2.5"><polyline points="9 18 15 12 9 6"></polyline></svg>
        <span style={{ fontWeight:500, color:'#e8793a', background:'#fff0e6', padding:'3px 10px', borderRadius:7 }}>{spawn}</span>
      </>}
      {blocks && <>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#f04e62" strokeWidth="2.5"><line x1="19" y1="5" x2="5" y2="19"></line><circle cx="6.5" cy="6.5" r="2.5"></circle><circle cx="17.5" cy="17.5" r="2.5"></circle></svg>
        <span style={{ fontWeight:500, color:'#f04e62', background:'#fdecec', padding:'3px 10px', borderRadius:7 }}>блок: {blocks}</span>
      </>}
    </div>
  );
}

/* упрощённый 3-step wizard */
const WIZARD_STEPS = ['Паттерн', 'Задачи', 'Подтверждение'];
function AddConnectionWizard({ onSave, onClose }) {
  const [step, setStep] = cnUseState(0);
  const [draft, setDraft] = cnUseState({ id:'con-'+Date.now(), pattern:'HANDOFF', fromName:'', spawnName:'', blocksName:'', audience:'', note:'' });
  const p = (k,v) => setDraft(d => ({...d, [k]:v}));

  return (
    <>
      <div style={cnStyles.ov} onClick={onClose} />
      <div style={cnStyles.drawer}>
        <div style={{ padding:'20px 24px 16px', borderBottom:'.5px solid #f0ece5', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:17, fontWeight:600 }}>Добавить связь</div>
            <div style={{ display:'flex', gap:8, marginTop:8 }}>
              {WIZARD_STEPS.map((s,i) => (
                <span key={i} style={{ fontSize:12, fontWeight:600, padding:'3px 11px', borderRadius:980,
                  background: i===step ? '#1a1714' : i<step ? '#e7f6ed' : '#f0ece5',
                  color: i===step ? '#fff' : i<step ? '#5aad6e' : '#a89e92' }}>
                  {i<step ? '✓ ' : ''}{s}
                </span>
              ))}
            </div>
          </div>
          <button onClick={onClose} style={{ ...ctorStyles.iconBtnSm, color:'#bcb3a7' }}>{Icon.x}</button>
        </div>

        <div style={{ flex:1, overflowY:'auto', padding:'24px' }}>
          {step === 0 && (
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              <div style={{ fontSize:13.5, color:'#8a817a', marginBottom:4 }}>Выберите паттерн связи между задачами</div>
              {Object.entries(PATTERN_META).map(([k,m]) => (
                <div key={k} onClick={() => p('pattern',k)} style={{ padding:'16px 18px', borderRadius:14, cursor:'pointer', border:'1.5px solid', transition:'all .15s',
                  borderColor: draft.pattern===k ? m.color : '#e4ddd2',
                  background: draft.pattern===k ? m.bg : '#fff',
                }}>
                  <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                    <PatternBadge pattern={k} />
                    <span style={{ fontSize:13.5, color:'#6b6259' }}>{m.desc}</span>
                  </div>
                </div>
              ))}
            </div>
          )}
          {step === 1 && (
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <div style={{ fontSize:13.5, color:'#8a817a', marginBottom:4 }}>Укажите задачи для паттерна <PatternBadge pattern={draft.pattern} /></div>
              <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
                <span style={insStyles.label}>Исходная задача (From)</span>
                <input value={draft.fromName} onChange={e=>p('fromName',e.target.value)} placeholder="Прокладка труб" style={insStyles.field} />
                <span style={insStyles.hint}>Задача, завершение которой запускает связь</span>
              </label>
              {draft.pattern !== 'BLOCKING' && (
                <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
                  <span style={insStyles.label}>Создаваемая задача (Spawn)</span>
                  <input value={draft.spawnName||''} onChange={e=>p('spawnName',e.target.value)} placeholder="Согласовать схему с плиточником" style={insStyles.field} />
                  <span style={insStyles.hint}>Автоматически появляется у ответственной роли</span>
                </label>
              )}
              <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
                <span style={insStyles.label}>Блокируемая задача (Blocks) — опционально</span>
                <input value={draft.blocksName||''} onChange={e=>p('blocksName',e.target.value)} placeholder="Укладка плитки" style={insStyles.field} />
              </label>
              <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
                <span style={insStyles.label}>Аудитория (роль)</span>
                <input value={draft.audience} onChange={e=>p('audience',e.target.value)} placeholder="screeder, foreman, plumber…" style={insStyles.field} />
              </label>
              <label style={{ display:'flex', flexDirection:'column', gap:5 }}>
                <span style={insStyles.label}>Примечание</span>
                <input value={draft.note||''} onChange={e=>p('note',e.target.value)} placeholder="Краткое пояснение для команды" style={insStyles.field} />
              </label>
            </div>
          )}
          {step === 2 && (
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <div style={{ fontSize:13.5, color:'#8a817a', marginBottom:4 }}>Проверьте связь перед сохранением</div>
              <div style={{ background:'#f0ece5', borderRadius:14, padding:'18px 20px', display:'flex', flexDirection:'column', gap:12 }}>
                <div style={{ display:'flex', gap:10, alignItems:'center' }}>
                  <PatternBadge pattern={draft.pattern} />
                  <span style={{ fontSize:13, color:'#8a817a' }}>{PATTERN_META[draft.pattern]?.desc}</span>
                </div>
                <ConnectionArrow from={draft.fromName||'—'} spawn={draft.spawnName} blocks={draft.blocksName} />
                {draft.note && <div style={{ fontSize:13, color:'#8a817a', fontStyle:'italic' }}>💬 {draft.note}</div>}
              </div>
              <div style={{ background:'#fff0e6', borderRadius:12, padding:'14px 16px' }}>
                <div style={{ fontSize:12.5, color:'#e8793a', fontWeight:600, marginBottom:6 }}>Как это выглядит в системе</div>
                <div style={{ fontSize:13, color:'#1a1714', lineHeight:1.5 }}>
                  Когда <strong>{draft.fromName||'задача'}</strong> завершена
                  {draft.spawnName && <> → <strong>{draft.spawnName}</strong> появляется у {draft.audience || 'ответственного'}</>}
                  {draft.blocksName && <> · блокирует <strong>{draft.blocksName}</strong> до approve</>}
                </div>
              </div>
            </div>
          )}
        </div>

        <div style={{ padding:'14px 24px', borderTop:'.5px solid #f0ece5', display:'flex', gap:9, justifyContent:'space-between' }}>
          <button onClick={() => step > 0 ? setStep(s=>s-1) : onClose()} style={ctorStyles.btnGhost}>{step===0?'Отмена':'← Назад'}</button>
          {step < WIZARD_STEPS.length-1
            ? <button onClick={() => setStep(s=>s+1)} disabled={step===1 && !draft.fromName} style={{ ...ctorStyles.btnPrimary, opacity: (step===1&&!draft.fromName)?.45:1 }}>Далее →</button>
            : <button onClick={() => { onSave(draft); onClose(); }} style={ctorStyles.btnPrimary}>Сохранить связь</button>
          }
        </div>
      </div>
    </>
  );
}

function ConnectionsPanel({ connections, setConnections }) {
  const [showWizard, setShowWizard] = cnUseState(false);
  const save = (con) => {
    const next = [...connections.filter(c=>c.id!==con.id), con];
    setConnections(next); saveConnections(next);
  };
  const del = (id) => {
    if (!confirm('Удалить связь?')) return;
    const next = connections.filter(c => c.id !== id);
    setConnections(next); saveConnections(next);
  };

  return (
    <div>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:24 }}>
        <div>
          <div style={{ fontSize:20, fontWeight:700, letterSpacing:'-.02em', marginBottom:4 }}>Связи между задачами</div>
          <div style={{ fontSize:13.5, color:'#8a817a' }}>Паттерны HANDOFF / INSPECTION / BLOCKING — автоматические цепочки в операционке.</div>
        </div>
        <button onClick={() => setShowWizard(true)} style={ctorStyles.btnPrimary}>+ Добавить связь</button>
      </div>

      <div style={cnStyles.table}>
        <table style={{ width:'100%', borderCollapse:'collapse' }}>
          <thead><tr>
            <th style={cnStyles.th}>Паттерн</th>
            <th style={cnStyles.th}>Цепочка</th>
            <th style={cnStyles.th}>Аудитория</th>
            <th style={cnStyles.th}></th>
          </tr></thead>
          <tbody>
            {connections.map(con => (
              <tr key={con.id}>
                <td style={cnStyles.td}><PatternBadge pattern={con.pattern} /></td>
                <td style={cnStyles.td}><ConnectionArrow from={con.fromName||'—'} spawn={con.spawnName} blocks={con.blocksName} /></td>
                <td style={cnStyles.td}>
                  {con.audience && <span style={{ fontFamily:'ui-monospace,monospace', fontSize:12, color:'#8a817a', background:'#f0ece5', padding:'3px 8px', borderRadius:6 }}>{con.audience}</span>}
                  {con.note && <div style={{ fontSize:12, color:'#a89e92', marginTop:4 }}>{con.note}</div>}
                </td>
                <td style={cnStyles.td}>
                  <button onClick={() => del(con.id)} style={{...ctorStyles.iconBtnSm, color:'#f04e62'}} title="Удалить">{Icon.x}</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {connections.length === 0 && (
          <div style={{ padding:'48px 24px', textAlign:'center', color:'#a89e92' }}>
            <div style={{ fontSize:14, fontWeight:600, marginBottom:8 }}>Нет связей</div>
            <div style={{ fontSize:13 }}>Добавьте первый паттерн через кнопку выше</div>
          </div>
        )}
      </div>

      {showWizard && <AddConnectionWizard onSave={save} onClose={() => setShowWizard(false)} />}
    </div>
  );
}

Object.assign(window, { ConnectionsPanel, loadConnections, CN_SEED });