// Modals — Task detail/editor, Connection info (Supabase)
function TaskModal({ task, displayId, isNew, onClose, updateTask, deleteTask, t, lang, perms, phaseConfig, milestones, workstreams }) {
  const canEdit = perms?.canEdit !== false;
  const canDelete = !!perms?.canDelete;
  const taskInputRef = useRef(null);
  useEffect(() => {
    if (isNew && taskInputRef.current) {
      taskInputRef.current.focus();
      taskInputRef.current.select();
    }
  }, [isNew]);
  const profileTeam = window.AOX_TEAM_MEMBERS || [];
  const legacyTeam  = window.AOX_TEAM || [];
  const useProfiles = profileTeam.length > 0;

  // Links (Q3)
  const [links, setLinks] = useState(() => Array.isArray(task.links) ? [...task.links] : []);
  const [newLinkLabel, setNewLinkLabel] = useState('');
  const [newLinkUrl, setNewLinkUrl] = useState('');
  const [linkErr, setLinkErr] = useState('');
  function saveLink() {
    const url = newLinkUrl.trim();
    if (!url) return;
    if (!/^https?:\/\/.+/.test(url)) {
      setLinkErr(lang === 'en' ? 'URL must start with http:// or https://' : 'URL은 http:// 또는 https://로 시작해야 합니다');
      return;
    }
    const updated = [...links, { label: newLinkLabel.trim() || url, url }];
    setLinks(updated);
    updateTask(task.id, { links: updated });
    setNewLinkLabel(''); setNewLinkUrl(''); setLinkErr('');
  }
  function removeLink(i) {
    const updated = links.filter((_, j) => j !== i);
    setLinks(updated);
    updateTask(task.id, { links: updated });
  }

  const [comments, setComments] = useState(()=>{
    try { return JSON.parse(localStorage.getItem('aox_comments_'+task.id)||'[]'); }
    catch { return []; }
  });
  const [draft, setDraft] = useState('');
  function addComment(){
    if (!draft.trim()) return;
    const c = [...comments, { t: Date.now(), text: draft.trim() }];
    setComments(c);
    localStorage.setItem('aox_comments_'+task.id, JSON.stringify(c));
    setDraft('');
  }
  const phaseN = (task.phase||'').match(/\d/)?.[0] || '3';
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <header>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <span style={{width: 4, height: 18, background:`var(--phase${phaseN})`, borderRadius: 2}}/>
            <PhaseTag phase={task.phase}/>
            <span className="mono muted" style={{fontSize: 11}}>{displayId || task.id}</span>
          </div>
          <button className="iconbtn" onClick={onClose}><Icon name="x"/></button>
        </header>
        <div className="body">
          <fieldset disabled={!canEdit} style={{
            border: 0, padding: 0, margin: 0,
            opacity: canEdit ? 1 : 0.7,
          }}>
          <div className="field">
            <label>{t.labels.task}</label>
            <input ref={taskInputRef} defaultValue={task.task} onBlur={e=>updateTask(task.id, {task: e.target.value})}/>
          </div>
          <div className="grid2">
            <div className="field">
              <label>{t.labels.phase}</label>
              <select value={task.phase || ''}
                onChange={e=>updateTask(task.id, {phase: e.target.value})}
                disabled={!canEdit}>
                {(phaseConfig || []).map(p => (
                  <option key={p.phase_code} value={p.phase_code}>
                    {p.phase_code} · {p.label}
                  </option>
                ))}
              </select>
            </div>
            <div className="field">
              <label>{t.labels.workstream}</label>
              <select value={task.workstream || ''}
                onChange={e=>updateTask(task.id, {workstream: e.target.value})}
                disabled={!canEdit}>
                {(workstreams && workstreams.length
                  ? workstreams
                  : [{key:'개발',label:'개발'},{key:'운영',label:'운영'},{key:'PR·마케팅',label:'PR·마케팅'}]
                ).map(ws=><option key={ws.key} value={ws.key}>{ws.label}</option>)}
              </select>
            </div>
          </div>
          <div className="field">
            <label>{t.labels.deliverable}</label>
            <input defaultValue={task.deliverable} onBlur={e=>updateTask(task.id, {deliverable: e.target.value})} disabled={!canEdit}/>
          </div>
          <div className="grid2">
            <div className="field">
              <label>{t.labels.start}</label>
              <input type="date" defaultValue={task.start} onBlur={e=>updateTask(task.id, {start: e.target.value})}/>
            </div>
            <div className="field">
              <label>{t.labels.end}</label>
              <input type="date" defaultValue={task.end} onBlur={e=>updateTask(task.id, {end: e.target.value})}/>
            </div>
          </div>
          <div className="grid2">
            <div className="field">
              <label>{t.labels.owner}</label>
              <select defaultValue={task.owner} onChange={e=>updateTask(task.id, {owner: e.target.value})}>
                <option value="">—</option>
                {useProfiles
                  ? profileTeam.map(p => (
                      <option key={p.email || p.id} value={p.email || p.id}>
                        {AOX_UTIL.memberLabel(p)}
                      </option>
                    ))
                  : legacyTeam.map(p => (
                      <option key={p.id} value={p.id}>{p.name} · {p.role}</option>
                    ))}
              </select>
            </div>
            <div className="field">
              <label>{t.labels.status}</label>
              <select defaultValue={task.status} onChange={e=>updateTask(task.id, {status: e.target.value, progress: e.target.value==='Done'?100:task.progress})}>
                {['Not Started','In Progress','Blocked','Done'].map(s=><option key={s} value={s}>{t.status[s]}</option>)}
              </select>
            </div>
          </div>
          <div className="grid2">
            <div className="field">
              <label>{t.labels.progress}</label>
              <input type="number" min="0" max="100" defaultValue={task.progress} onBlur={e=>updateTask(task.id, {progress: Math.max(0,Math.min(100,Number(e.target.value)||0))})}/>
            </div>
            <div className="field">
              <label>{t.labels.risk}</label>
              <select defaultValue={task.risk} onChange={e=>updateTask(task.id, {risk: e.target.value})}>
                {['Low','Med','High'].map(s=><option key={s} value={s}>{t.risk[s]}</option>)}
              </select>
            </div>
          </div>
          <div className="grid2">
            <div className="field">
              <label>{t.labels.budgetPlan}</label>
              <input type="number" defaultValue={task.budgetPlan} onBlur={e=>updateTask(task.id, {budgetPlan: Number(e.target.value)||0})}/>
            </div>
            <div className="field">
              <label>{t.labels.budgetActual}</label>
              <input type="number" defaultValue={task.budgetActual} onBlur={e=>updateTask(task.id, {budgetActual: Number(e.target.value)||0})}/>
            </div>
          </div>
          <div className="field">
            <label>{t.labels.note}</label>
            <textarea rows={2} defaultValue={task.note} onBlur={e=>updateTask(task.id, {note: e.target.value})}/>
          </div>
          {milestones && milestones.length > 0 && (
            <div className="field">
              <label>{lang === 'en' ? 'Milestone' : '마일스톤'}</label>
              <select value={task.milestoneId || ''} onChange={e => updateTask(task.id, { milestoneId: e.target.value || null })} disabled={!canEdit}>
                <option value="">—</option>
                {milestones.map(m => {
                  const label = m.name || m.label || '';
                  const icon = m.icon || '◆';
                  return <option key={m.id} value={m.id}>{icon} {label}</option>;
                })}
              </select>
            </div>
          )}
          </fieldset>

          {/* Links (Q3) */}
          <div className="field" style={{marginTop: 8}}>
            <label>{lang === 'en' ? 'Links' : '링크'}</label>
            <div style={{display:'flex', flexDirection:'column', gap: 6, marginBottom: links.length ? 8 : 0}}>
              {links.map((lk, i) => (
                <div key={i} style={{display:'flex', alignItems:'center', gap: 6, padding:'6px 10px', background:'var(--surface-2)', borderRadius: 8, fontSize: 12.5}}>
                  <Icon name="link" size={13}/>
                  <a href={lk.url} target="_blank" rel="noopener noreferrer"
                    style={{flex:1, color:'var(--accent)', textDecoration:'none', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}
                    onClick={e => e.stopPropagation()}>
                    {lk.label}
                  </a>
                  {canEdit && (
                    <button className="iconbtn" style={{width:20, height:20, color:'var(--fg-subtle)'}} onClick={() => removeLink(i)}>
                      <Icon name="x" size={11}/>
                    </button>
                  )}
                </div>
              ))}
            </div>
            {canEdit && (
              <div style={{display:'flex', flexDirection:'column', gap: 4}}>
                <div style={{display:'flex', gap: 6}}>
                  <input value={newLinkLabel} onChange={e => setNewLinkLabel(e.target.value)}
                    placeholder={lang === 'en' ? 'Label (optional)' : '라벨 (선택)'}
                    style={{flex: '0 0 130px'}}/>
                  <input value={newLinkUrl} onChange={e => { setNewLinkUrl(e.target.value); if (linkErr) setLinkErr(''); }}
                    placeholder="https://..."
                    onKeyDown={e => { if (e.key === 'Enter') saveLink(); }}
                    style={{flex: 1}}/>
                  <button className="btn" onClick={saveLink}><Icon name="plus" size={13}/></button>
                </div>
                {linkErr && <div style={{fontSize: 11.5, color:'var(--risk-high)'}}>{linkErr}</div>}
              </div>
            )}
          </div>

          <div className="field" style={{marginTop: 8}}>
            <label>{t.labels.comments}</label>
            <div style={{display:'flex', flexDirection:'column', gap:6, marginBottom: 8}}>
              {comments.length === 0 && <span className="muted" style={{fontSize: 12}}>{lang==='en'?'No comments yet.':'아직 코멘트가 없습니다.'}</span>}
              {comments.map((c,i)=>(
                <div key={i} style={{padding:'8px 10px', background:'var(--surface-2)', borderRadius: 8, fontSize: 12.5}}>
                  <div style={{whiteSpace:'pre-wrap'}}>{c.text}</div>
                  <div className="muted mono" style={{fontSize: 10.5, marginTop: 4}}>{new Date(c.t).toLocaleString(lang==='en'?'en-US':'ko-KR')}</div>
                </div>
              ))}
            </div>
            <div style={{display:'flex', gap:8}}>
              <input value={draft} onChange={e=>setDraft(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')addComment();}}
                placeholder={t.labels.addComment} style={{flex:1}}/>
              <button className="btn btn-primary" onClick={addComment}>{t.labels.send}</button>
            </div>
          </div>
        </div>
        <footer style={{padding:'12px 20px', borderTop:'1px solid var(--divider)', display:'flex', gap: 8, background:'var(--surface-2)'}}>
          {canDelete && (
          <button className="btn" onClick={()=>{ if (confirm(lang==='en'?'Delete this task?':'이 업무를 삭제할까요?')) { deleteTask(task.id); onClose(); } }} style={{color:'var(--risk-high)'}}>
            <Icon name="trash" size={14}/> {t.labels.deleteTask}
          </button>
          )}
          <span style={{flex:1}}/>
          <button className="btn btn-primary" onClick={onClose} disabled={!canEdit}
            style={!canEdit ? {opacity: 0.5, cursor:'not-allowed'} : {}}>
            {canEdit ? (lang==='en'?'Save':'저장') : (lang==='en'?'Read only':'읽기 전용')}
          </button>
        </footer>
      </div>
    </div>
  );
}

// Read-only status + info modal for Supabase connection
function ConnectionModal({ onClose, status, lastSync, t, lang, onReload }) {
  const online = status === 'online';
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()} style={{width: 520}}>
        <header>
          <div style={{display:'flex', alignItems:'center', gap:8}}>
            <Icon name="link" size={18}/>
            <h2>Supabase · {lang==='en'?'Realtime sync':'실시간 동기화'}</h2>
          </div>
          <button className="iconbtn" onClick={onClose}><Icon name="x"/></button>
        </header>
        <div className="body">
          <div style={{
            display:'flex', alignItems:'center', gap: 10,
            padding: '12px 14px',
            background: online ? 'rgba(52,199,89,0.10)' : 'rgba(255,59,48,0.10)',
            border: '1px solid ' + (online ? 'rgba(52,199,89,0.35)' : 'rgba(255,59,48,0.35)'),
            borderRadius: 10, marginBottom: 14
          }}>
            <span style={{
              width: 10, height: 10, borderRadius:'50%',
              background: online ? 'var(--status-done)' : 'var(--status-blocked)',
              boxShadow: online ? '0 0 10px rgba(52,199,89,0.6)' : '0 0 10px rgba(255,59,48,0.5)',
              animation: online ? 'pulse 1.6s ease-in-out infinite' : 'none'
            }}/>
            <div style={{fontSize: 13, fontWeight: 600}}>
              {online
                ? (lang==='en' ? 'Connected — changes sync live' : '연결됨 — 변경사항이 실시간으로 동기화됩니다')
                : (lang==='en' ? 'Offline — edits cached locally' : '오프라인 — 편집은 로컬에 캐시됩니다')}
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'140px 1fr', gap: '10px 14px', fontSize: 12.5}}>
            <div className="muted">URL</div>
            <div className="mono" style={{fontSize: 11.5, wordBreak:'break-all'}}>{window.AOX_DB.URL}</div>
            <div className="muted">Schema</div>
            <div className="mono" style={{fontSize: 11.5}}>{window.AOX_DB.SCHEMA}</div>
            <div className="muted">{lang==='en'?'Tables':'테이블'}</div>
            <div className="mono" style={{fontSize: 11.5}}>wbs_tasks · phase_gates · risks</div>
            <div className="muted">{lang==='en'?'Auth':'인증'}</div>
            <div style={{fontSize: 12}}>{lang==='en'?'Public (anon key, no sign-in)':'공개 (anon key, 로그인 없음)'}</div>
            <div className="muted">{lang==='en'?'Last sync':'마지막 동기화'}</div>
            <div className="mono" style={{fontSize: 11.5}}>{lastSync ? new Date(lastSync).toLocaleString(lang==='en'?'en-US':'ko-KR') : '—'}</div>
          </div>

          <div style={{
            padding: 12, background: 'var(--surface-2)', borderRadius: 10,
            fontSize: 12, color:'var(--fg-muted)', lineHeight: 1.55, marginTop: 14
          }}>
            {lang === 'en' ? (
              <>
                <div style={{fontWeight:600, color:'var(--fg-2)', marginBottom: 4}}>How it works</div>
                <div>• All edits auto-save to Supabase instantly.</div>
                <div>• Realtime subscriptions push other users' changes to this browser.</div>
                <div>• localStorage is used as an offline cache.</div>
                <div>• Open this page in two browser windows to test live sync.</div>
              </>
            ) : (
              <>
                <div style={{fontWeight:600, color:'var(--fg-2)', marginBottom: 4}}>작동 방식</div>
                <div>• 모든 편집은 Supabase에 즉시 자동 저장됩니다.</div>
                <div>• Realtime 구독으로 다른 사용자의 변경이 이 창에 반영됩니다.</div>
                <div>• localStorage는 오프라인 캐시로 사용됩니다.</div>
                <div>• 두 브라우저 창에서 열어보면 실시간 동기화 확인이 가능합니다.</div>
              </>
            )}
          </div>

          <div style={{display:'flex', gap: 8, marginTop: 14}}>
            <button className="btn" onClick={onReload}>
              <Icon name="refresh" size={14}/>
              {lang==='en'?'Reload from Supabase':'Supabase에서 다시 불러오기'}
            </button>
            <span style={{flex:1}}/>
            <button className="btn btn-primary" onClick={onClose}>{lang==='en'?'Done':'완료'}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TaskModal = TaskModal;
window.ConnectionModal = ConnectionModal;