// ---------- Item Create/Edit Modal ----------
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

function ItemModal({ open, mode, tab, initial, allTags, onSave, onDelete, onClose }) {
  const isTodo = tab === 'todo';
  const hasLocation = tab === 'todo' || tab === 'memo';

  const blank = () => {
    const today = D.todayISO();
    if (isTodo) {
      return {
        id: '', tab: 'todo', title: '',
        startISO: today, startHasTime: false,
        endISO: '', endHasTime: false,
        location: '', important: false, urgent: false,
        status: 'planned', repeat: 'none',
        memo: '', tags: [], color: 'blue', order: Date.now(),
      };
    }
    return {
      id: '', tab, title: '', dateISO: today,
      memo: '', location: '', tags: [], color: 'blue',
    };
  };

  const [form, setForm] = useStateM(blank());
  const [tagInput, setTagInput] = useStateM('');
  const titleRef = useRefM(null);

  useEffectM(() => {
    if (!open) return;
    const f = { ...blank(), ...(initial || {}) };
    if (isTodo) {
      f.startHasTime = !!(initial?.startISO && initial.startISO.length > 10);
      f.endHasTime = !!(initial?.endISO && initial.endISO.length > 10);
    }
    setForm(f);
    setTagInput('');
    setTimeout(() => titleRef.current?.focus(), 60);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open]);

  if (!open) return null;

  const set = (patch) => setForm((f) => ({ ...f, ...patch }));

  const addTag = (raw) => {
    const t = (raw || tagInput).trim().replace(/^#/, '');
    if (!t) return;
    if (!form.tags.includes(t)) set({ tags: [...form.tags, t] });
    setTagInput('');
  };
  const removeTag = (t) => set({ tags: form.tags.filter((x) => x !== t) });

  const handleSave = () => {
    const out = { ...form };
    if (!out.id) out.id = uid();
    if (!out.title.trim()) {
      titleRef.current?.focus();
      return;
    }
    if (isTodo) {
      let s = (out.startISO || '').slice(0, 10);
      let e = (out.endISO || '').slice(0, 10) || s;
      const sTime = out._startTime || (out.startISO && out.startISO.length > 10 ? out.startISO.slice(11,16) : '');
      const eTime = out._endTime   || (out.endISO   && out.endISO.length   > 10 ? out.endISO.slice(11,16)   : '');
      out.startISO = out.startHasTime && sTime ? `${s}T${sTime}` : s;
      out.endISO   = out.endHasTime   && eTime ? `${e}T${eTime}` : e;
      delete out._startTime; delete out._endTime;
    } else {
      out.dateISO = (out.dateISO || D.todayISO()).slice(0, 10);
      // strip any leaked todo fields
      delete out.startISO; delete out.endISO; delete out.startHasTime; delete out.endHasTime;
      delete out.important; delete out.urgent; delete out.status; delete out.repeat;
    }
    out.tab = tab;
    out.createdAt = out.createdAt || new Date().toISOString();
    out.updatedAt = new Date().toISOString();
    onSave(out);
  };

  // derived for time inputs
  const startTime = (form.startISO || '').slice(11, 16) || form._startTime || '';
  const endTime = (form.endISO || '').slice(11, 16) || form._endTime || '';

  return (
    <div className="mod-back" onClick={onClose}>
      <div className="mod" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
        <header className="mod-head">
          <div className="mod-head-l">
            <span className="mod-pill" style={{ background: (COLOR_BY_ID[form.color]?.hex) + '22', color: COLOR_BY_ID[form.color]?.hex }}>
              {TAB_BY_ID[tab]?.label}
            </span>
            <h2 className="mod-t">{mode === 'edit' ? '편집' : '새로 만들기'}</h2>
          </div>
          <button className="mod-x" onClick={onClose} aria-label="닫기"><Icon.X size={18} /></button>
        </header>

        <div className="mod-body">
          {/* Title */}
          <input
            ref={titleRef}
            className="mod-title"
            placeholder="제목"
            value={form.title}
            onChange={(e) => set({ title: e.target.value })}
            onKeyDown={(e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleSave(); }}
          />

          {/* Color swatches */}
          <div className="mod-row">
            <div className="mod-lbl">색상</div>
            <div className="mod-colors">
              {COLORS.map((c) => (
                <button
                  key={c.id}
                  className={'mod-color' + (form.color === c.id ? ' on' : '')}
                  style={{ background: c.hex }}
                  onClick={() => set({ color: c.id })}
                  aria-label={c.label}
                />
              ))}
            </div>
          </div>

          {/* Date(s) */}
          {isTodo ? (
            <>
              <div className="mod-row">
                <div className="mod-lbl">시작</div>
                <div className="mod-dt">
                  <input type="date" value={(form.startISO || '').slice(0, 10)} onChange={(e) => {
                    const d = e.target.value;
                    const t = form.startHasTime ? startTime : '';
                    set({ startISO: t ? `${d}T${t}` : d, _startTime: t });
                  }} />
                  {form.startHasTime && (
                    <input type="time" value={startTime} onChange={(e) => {
                      const t = e.target.value;
                      const d = (form.startISO || '').slice(0, 10);
                      set({ startISO: t ? `${d}T${t}` : d, _startTime: t });
                    }} />
                  )}
                  <label className="mod-chk">
                    <input type="checkbox" checked={form.startHasTime} onChange={(e) => {
                      const has = e.target.checked;
                      const d = (form.startISO || '').slice(0, 10);
                      const t = has ? (startTime || '09:00') : '';
                      set({ startHasTime: has, startISO: has ? `${d}T${t}` : d, _startTime: t });
                    }} />
                    시간
                  </label>
                </div>
              </div>
              <div className="mod-row">
                <div className="mod-lbl">종료</div>
                <div className="mod-dt">
                  <input type="date" value={(form.endISO || '').slice(0, 10)} onChange={(e) => {
                    const d = e.target.value;
                    const t = form.endHasTime ? endTime : '';
                    set({ endISO: t ? `${d}T${t}` : d, _endTime: t });
                  }} />
                  {form.endHasTime && (
                    <input type="time" value={endTime} onChange={(e) => {
                      const t = e.target.value;
                      const d = (form.endISO || '').slice(0, 10);
                      set({ endISO: t ? `${d}T${t}` : d, _endTime: t });
                    }} />
                  )}
                  <label className="mod-chk">
                    <input type="checkbox" checked={form.endHasTime} onChange={(e) => {
                      const has = e.target.checked;
                      const d = (form.endISO || (form.startISO || '').slice(0, 10) || D.todayISO()).slice(0, 10);
                      const t = has ? (endTime || '10:00') : '';
                      set({ endHasTime: has, endISO: has ? `${d}T${t}` : d, _endTime: t });
                    }} />
                    시간
                  </label>
                </div>
              </div>

              {/* important / urgent / status / repeat */}
              <div className="mod-row mod-row-wrap">
                <div className="mod-lbl">속성</div>
                <div className="mod-flex">
                  <button
                    className={'mod-toggle' + (form.important ? ' on amber' : '')}
                    onClick={() => set({ important: !form.important })}
                  >
                    <Icon.Star size={14} filled={form.important} fillColor="#f59e0b" stroke={form.important ? '#f59e0b' : 'currentColor'} />
                    중요
                  </button>
                  <button
                    className={'mod-toggle' + (form.urgent ? ' on red' : '')}
                    onClick={() => set({ urgent: !form.urgent })}
                  >
                    <Icon.Flame size={14} filled={form.urgent} fillColor="#ef4444" stroke={form.urgent ? '#ef4444' : 'currentColor'} />
                    긴급
                  </button>
                </div>
              </div>

              <div className="mod-row mod-row-wrap">
                <div className="mod-lbl">상태</div>
                <div className="mod-seg">
                  {STATUSES.map((s) => (
                    <button key={s.id} className={'mod-seg-btn' + (form.status === s.id ? ' on' : '')} onClick={() => set({ status: s.id })}>
                      <span className="mod-seg-dot" style={{ background: s.dot }} />
                      {s.label}
                    </button>
                  ))}
                </div>
              </div>

              <div className="mod-row">
                <div className="mod-lbl">반복</div>
                <select className="mod-input" value={form.repeat} onChange={(e) => set({ repeat: e.target.value })}>
                  {REPEATS.map((r) => <option key={r.id} value={r.id}>{r.label}</option>)}
                </select>
              </div>
            </>
          ) : (
            <div className="mod-row">
              <div className="mod-lbl">날짜</div>
              <input type="date" className="mod-input" value={(form.dateISO || '').slice(0, 10)} onChange={(e) => set({ dateISO: e.target.value })} />
            </div>
          )}

          {hasLocation && (
            <div className="mod-row">
              <div className="mod-lbl">장소</div>
              <input className="mod-input" placeholder="장소 (선택)" value={form.location || ''} onChange={(e) => set({ location: e.target.value })} />
            </div>
          )}

          <div className="mod-row mod-row-top">
            <div className="mod-lbl">메모</div>
            <textarea className="mod-input mod-area" placeholder="내용을 적어보세요…" rows={isTodo ? 3 : 6} value={form.memo || ''} onChange={(e) => set({ memo: e.target.value })} />
          </div>

          <div className="mod-row mod-row-wrap">
            <div className="mod-lbl">태그</div>
            <div className="mod-tags">
              {(form.tags || []).map((t) => (
                <span key={t} className="mod-tag">#{t}<button onClick={() => removeTag(t)} aria-label="삭제"><Icon.X size={10} /></button></span>
              ))}
              <input
                className="mod-tag-input"
                placeholder="태그 추가 + Enter"
                value={tagInput}
                onChange={(e) => setTagInput(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); addTag(); }
                  else if (e.key === 'Backspace' && !tagInput && form.tags.length) removeTag(form.tags[form.tags.length - 1]);
                }}
                list="tag-suggest"
              />
              <datalist id="tag-suggest">
                {(allTags || []).map((t) => <option key={t} value={t} />)}
              </datalist>
            </div>
          </div>
        </div>

        <footer className="mod-foot">
          {mode === 'edit' && (
            <button className="mod-del" onClick={() => onDelete(form.id)}>
              <Icon.Trash size={14} /> 삭제
            </button>
          )}
          <div style={{ flex: 1 }} />
          <button className="mod-btn" onClick={onClose}>취소</button>
          <button className="mod-btn primary" onClick={handleSave}>{mode === 'edit' ? '저장' : '추가'}</button>
        </footer>

        <style>{`
          .mod-back{position:fixed;inset:0;background:rgba(10,10,10,.4);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;z-index:200;animation:modfade .2s ease both;padding:0}
          @media (min-width:720px){ .mod-back{align-items:center;padding:24px} }
          @keyframes modfade{from{opacity:0}to{opacity:1}}
          .mod{width:100%;max-width:560px;max-height:92vh;background:var(--bg);border-radius:16px 16px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-3);animation:modslide .25s cubic-bezier(.2,.8,.2,1) both}
          @media (min-width:720px){ .mod{border-radius:16px} }
          @keyframes modslide{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
          .mod-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
          .mod-head-l{display:flex;align-items:center;gap:10px}
          .mod-pill{padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em}
          .mod-t{margin:0;font-size:15px;font-weight:600}
          .mod-x{appearance:none;border:none;background:transparent;cursor:pointer;color:var(--ink-3);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center}
          .mod-x:hover{background:var(--accent-soft);color:var(--ink)}
          .mod-body{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
          .mod-title{width:100%;border:none;font-size:20px;font-weight:600;padding:6px 0;margin-bottom:4px;outline:none;background:transparent;color:var(--ink);font-family:inherit}
          .mod-title::placeholder{color:var(--ink-4)}
          .mod-row{display:flex;align-items:center;gap:12px;min-height:36px}
          .mod-row-top{align-items:flex-start}
          .mod-row-wrap{flex-wrap:wrap}
          .mod-lbl{flex:0 0 56px;font-size:12px;color:var(--ink-3);font-weight:500;padding-top:8px;align-self:flex-start}
          .mod-input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--bg);outline:none;font-family:inherit;color:var(--ink)}
          .mod-input:focus{border-color:var(--ink);}
          .mod-area{resize:vertical;min-height:80px;line-height:1.5}
          .mod-dt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
          .mod-dt input[type=date], .mod-dt input[type=time]{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:var(--bg);outline:none;font-family:inherit;color:var(--ink);font-variant-numeric:tabular-nums}
          .mod-dt input:focus{border-color:var(--ink)}
          .mod-chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);cursor:pointer;user-select:none}
          .mod-chk input{margin:0}
          .mod-colors{display:flex;gap:8px;flex-wrap:wrap;flex:1}
          .mod-color{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .12s}
          .mod-color:hover{transform:scale(1.1)}
          .mod-color.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg) inset}
          .mod-flex{display:flex;gap:8px;flex-wrap:wrap;flex:1}
          .mod-toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:12.5px;cursor:pointer;color:var(--ink-2);font-family:inherit;transition:all .12s}
          .mod-toggle:hover{border-color:var(--ink-4)}
          .mod-toggle.on.amber{background:#fef3c7;border-color:#fde68a;color:#92400e}
          .mod-toggle.on.red{background:#fee2e2;border-color:#fecaca;color:#991b1b}
          .mod-seg{display:inline-flex;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:3px;flex:1}
          .mod-seg-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border:none;background:transparent;border-radius:7px;cursor:pointer;font-size:12.5px;color:var(--ink-3);font-family:inherit;transition:all .12s}
          .mod-seg-btn:hover{color:var(--ink)}
          .mod-seg-btn.on{background:var(--bg);color:var(--ink);box-shadow:var(--shadow-1);font-weight:500}
          .mod-seg-dot{width:6px;height:6px;border-radius:50%}
          .mod-tags{display:flex;gap:6px;flex-wrap:wrap;flex:1;padding:4px;border:1px solid var(--line);border-radius:8px;min-height:36px;align-items:center}
          .mod-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--accent-soft);border-radius:999px;font-size:12px;color:var(--ink-2)}
          .mod-tag button{appearance:none;border:none;background:transparent;cursor:pointer;color:var(--ink-3);padding:0;display:inline-flex}
          .mod-tag button:hover{color:var(--ink)}
          .mod-tag-input{border:none;outline:none;font-size:12.5px;padding:4px;flex:1;min-width:120px;background:transparent;font-family:inherit}
          .mod-foot{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:var(--bg-soft)}
          .mod-btn{appearance:none;border:1px solid var(--line);background:var(--bg);padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--ink);font-family:inherit;transition:all .12s}
          .mod-btn:hover{background:var(--accent-soft)}
          .mod-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
          .mod-btn.primary:hover{opacity:.85}
          .mod-del{appearance:none;border:none;background:transparent;color:#dc2626;cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;font-family:inherit}
          .mod-del:hover{background:#fee2e2}
          select.mod-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
          @media (max-width:720px){
            .mod-lbl{flex-basis:50px;font-size:11.5px}
            .mod-body{padding:14px 14px}
          }
        `}</style>
      </div>
    </div>
  );
}

window.ItemModal = ItemModal;