// ---------- Pinned Notes Section ----------
// Pins are stored as regular items with pinned:true flag
// so they pass the same Firestore security rules as normal items.
const { useState: useSP, useEffect: useEP, useRef: useRP, useMemo: useMP, useCallback: useCP } = React;

function PinnedSection({ tab, user, items, onSave, onDelete }) {
  // items = all data.items from parent (already synced via Firestore)
  const [collapsed, setCollapsed] = useSP(() => {
    try { return JSON.parse(localStorage.getItem('mycal.pin.collapsed') || '{}'); } catch { return {}; }
  });
  const [input, setInput] = useSP('');
  const [editId, setEditId] = useSP(null);
  const [editText, setEditText] = useSP('');
  const inputRef = useRP(null);
  const editRef = useRP(null);

  const isCollapsed = !!collapsed[tab];

  const toggleCollapse = () => {
    setCollapsed((prev) => {
      const next = { ...prev, [tab]: !prev[tab] };
      localStorage.setItem('mycal.pin.collapsed', JSON.stringify(next));
      return next;
    });
  };

  // Filter pinned items for current tab
  const tabPins = useMP(() =>
    (items || [])
      .filter((it) => it.pinned && it.tab === tab)
      .sort((a, b) => (a.pinOrder ?? 0) - (b.pinOrder ?? 0)),
    [items, tab]
  );

  // ---- Add ----
  const doAdd = useCP(() => {
    const text = input.trim();
    if (!text) return;
    const pin = {
      id: uid(),
      tab,
      title: text,
      memo: '',
      dateISO: D.todayISO(),
      color: 'blue',
      tags: [],
      pinned: true,
      pinOrder: tabPins.length,
      status: 'planned',
    };
    if (tab === 'todo') {
      pin.startISO = pin.dateISO;
      pin.endISO = pin.dateISO;
      pin.important = false;
      pin.urgent = false;
    }
    onSave(pin);
    setInput('');
    setTimeout(() => inputRef.current?.focus(), 30);
  }, [input, tab, tabPins.length, onSave]);

  // ---- Delete ----
  const doDelete = useCP((id) => {
    onDelete(id);
  }, [onDelete]);

  // ---- Edit ----
  const startEdit = (pin) => {
    setEditId(pin.id);
    setEditText(pin.title || '');
    setTimeout(() => {
      const el = editRef.current;
      if (el) { el.focus(); el.setSelectionRange(el.value.length, el.value.length); }
    }, 40);
  };

  const commitEdit = useCP(() => {
    if (!editId) return;
    const text = editText.trim();
    const id = editId;
    setEditId(null);
    setEditText('');
    if (!text) {
      doDelete(id);
    } else {
      const existing = (items || []).find((p) => p.id === id);
      if (existing && existing.title !== text) {
        onSave({ ...existing, title: text });
      }
    }
  }, [editId, editText, items, doDelete, onSave]);

  const curTab = TAB_BY_ID[tab];
  const isMemoTab = tab === 'memo';

  // ---- Key handlers (IME-safe) ----
  const handleAddKey = (e) => {
    if (e.nativeEvent?.isComposing || e.isComposing) return;
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      e.stopPropagation();
      doAdd();
    }
  };

  const handleEditKey = (e) => {
    if (e.nativeEvent?.isComposing || e.isComposing) return;
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      e.stopPropagation();
      commitEdit();
    }
    if (e.key === 'Escape') {
      setEditId(null);
      setEditText('');
    }
  };

  return (
    <div className="pin-section">
      <button className="pin-header" onClick={toggleCollapse}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points={isCollapsed ? '9 6 15 12 9 18' : '6 9 12 15 18 9'} />
        </svg>
        <span className="pin-header-t">고정 메모</span>
        {tabPins.length > 0 && <span className="pin-header-n">{tabPins.length}</span>}
      </button>

      {!isCollapsed && (
        <div className="pin-body">
          {tabPins.map((p) => (
            <div key={p.id} className="pin-item">
              <span className="pin-bullet" style={{ background: curTab?.accent || 'var(--ink-3)' }} />
              {editId === p.id ? (
                isMemoTab ? (
                  <textarea
                    ref={editRef}
                    className="pin-edit-input pin-edit-area"
                    value={editText}
                    onChange={(e) => setEditText(e.target.value)}
                    onKeyDown={handleEditKey}
                    onBlur={commitEdit}
                    rows={Math.min(editText.split('\n').length + 1, 6)}
                  />
                ) : (
                  <input
                    ref={editRef}
                    className="pin-edit-input"
                    value={editText}
                    onChange={(e) => setEditText(e.target.value)}
                    onKeyDown={handleEditKey}
                    onBlur={commitEdit}
                  />
                )
              ) : (
                <span className="pin-text" onClick={() => startEdit(p)}>
                  {(p.title || '').split('\n').map((line, i, arr) => (
                    <React.Fragment key={i}>{line}{i < arr.length - 1 && <br />}</React.Fragment>
                  ))}
                </span>
              )}
              <button className="pin-del" onClick={() => doDelete(p.id)} aria-label="삭제">
                <Icon.X size={12} />
              </button>
            </div>
          ))}
          <div className="pin-add-row">
            <span className="pin-bullet pin-bullet-add" />
            {isMemoTab ? (
              <textarea
                ref={inputRef}
                className="pin-add-input pin-add-area"
                placeholder="메모 추가 후 Enter (Shift+Enter 줄바꿈)"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={handleAddKey}
                rows={Math.max(1, Math.min(input.split('\n').length, 4))}
              />
            ) : (
              <input
                ref={inputRef}
                className="pin-add-input"
                placeholder="메모 추가 후 Enter"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={handleAddKey}
              />
            )}
          </div>
        </div>
      )}

      <style>{`
        .pin-section{margin-bottom:12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
        .pin-header{display:flex;align-items:center;gap:8px;padding:10px 14px;width:100%;appearance:none;border:none;background:transparent;cursor:pointer;font-family:inherit;color:var(--ink-3);transition:color .12s}
        .pin-header:hover{color:var(--ink)}
        .pin-header-t{font-size:12px;font-weight:600;letter-spacing:.02em}
        .pin-header-n{font-size:11px;color:var(--ink-4);font-weight:500}
        .pin-body{padding:0 14px 10px;display:flex;flex-direction:column;gap:2px}
        .pin-item{display:flex;align-items:flex-start;gap:10px;padding:5px 0;min-height:30px}
        .pin-item .pin-bullet{margin-top:8px}
        .pin-bullet{width:5px;height:5px;border-radius:50%;flex-shrink:0}
        .pin-bullet-add{background:var(--ink-4);opacity:.4;margin-top:8px}
        .pin-text{flex:1;min-width:0;font-size:13px;color:var(--ink);cursor:text;padding:2px 0;word-break:break-word;line-height:1.55}
        .pin-edit-input{flex:1;min-width:0;font-size:13px;color:var(--ink);border:none;border-bottom:1px solid var(--tab-accent,var(--ink));outline:none;background:transparent;font-family:inherit;padding:2px 0}
        .pin-edit-area{resize:vertical;line-height:1.55;min-height:28px}
        .pin-del{appearance:none;border:none;background:transparent;color:var(--ink-4);cursor:pointer;padding:4px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s,color .12s;margin-top:4px}
        .pin-item:hover .pin-del{opacity:1}
        .pin-del:hover{color:var(--ink);background:var(--accent-soft)}
        .pin-add-row{display:flex;align-items:flex-start;gap:10px;padding:5px 0}
        .pin-add-input{flex:1;min-width:0;font-size:13px;color:var(--ink);border:none;outline:none;background:transparent;font-family:inherit;padding:2px 0}
        .pin-add-area{resize:none;line-height:1.55;min-height:22px}
        .pin-add-input::placeholder{color:var(--ink-4)}
        @media (max-width:720px){
          .pin-section{margin-bottom:8px}
          .pin-header{padding:8px 12px}
          .pin-body{padding:0 12px 8px}
        }
      `}</style>
    </div>
  );
}

window.PinnedSection = PinnedSection;