/* page-checkins.jsx — （6）Check-ins：Persom 按约好的时间来找你
   列表每条：名称、频率、下次运行时间、开关、⋯ 菜单（Edit / Delete；Daily recap 的 Delete 置灰，悬浮提示不能删除）
   新建和编辑都走 Ask 面板 */
/* global React */
window.P21 = window.P21 || {};
(() => {
  const { C, useP, Btn, Toggle, Modal, Tip } = window.P21;

  function CheckinsPage() {
    const { s, set, openModal } = useP();
    const [menu, setMenu] = React.useState(null);
    const [delTip, setDelTip] = React.useState(false);
    const edit = (c) => { setMenu(null); set({ ask: true, chip: c.id, card: null, askMode: null }); };
    const toggle = (c) => set({ checkins: s.checkins.map(x => x.id === c.id ? { ...x, on: !x.on } : x) });

    return (
      <div onClick={() => setMenu(null)} style={{ maxWidth: 900, margin: '0 auto', padding: '52px 48px 140px' }}>
        <div style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-.02em', lineHeight: 1.2 }}>Check-ins</div>
        <div style={{ marginTop: 6, fontSize: 15, color: C.muted }}>Persom checks in with you on your schedule</div>
        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {s.checkins.map(c => (
            <div key={c.id} onClick={() => edit(c)} className="p21-h-card"
              style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: '16px 20px', display: 'flex', alignItems: 'center', gap: 16, position: 'relative', cursor: 'pointer' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15.5, fontWeight: 500, color: c.on ? C.ink : C.muted }}>{c.name}</div>
                <div style={{ marginTop: 2, fontSize: 13, color: C.muted }}>{c.on ? c.next : 'Paused'}</div>
              </div>
              <span style={{ fontSize: 12.5, color: C.muted, whiteSpace: 'nowrap' }}>{c.when}</span>
              <span onClick={(e) => { e.stopPropagation(); toggle(c); }}><Toggle on={c.on} /></span>
              <span onClick={(e) => { e.stopPropagation(); setMenu(menu === c.id ? null : c.id); }} className="p21-h-soft"
                style={{ width: 28, height: 28, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: C.muted, fontSize: 16 }}>⋯</span>
              {menu === c.id && (
                <div onClick={(e) => e.stopPropagation()}
                  style={{ position: 'absolute', right: 16, top: 52, background: '#fff', border: `1px solid ${C.border}`, borderRadius: 10, padding: 6, boxShadow: '0 14px 34px rgba(15,15,15,.16)', zIndex: 10, minWidth: 140, animation: 'p21pop .12s ease-out' }}>
                  <div onClick={() => edit(c)} className="p21-h-soft" style={{ padding: '7px 12px', borderRadius: 6, cursor: 'pointer', fontSize: 13.5 }}>Edit</div>
                  {!c.fixed && <div onClick={() => { setMenu(null); openModal({ type: 'delChk', id: c.id }); }} className="p21-h-danger" style={{ padding: '7px 12px', borderRadius: 6, cursor: 'pointer', fontSize: 13.5, color: C.red }}>Delete</div>}
                  {/* 预置的 Check-in 不能删：Delete 置灰，悬浮说明原因 */}
                  {c.fixed && (
                    <div onMouseEnter={() => setDelTip(true)} onMouseLeave={() => setDelTip(false)}
                      style={{ position: 'relative', padding: '7px 12px', borderRadius: 6, cursor: 'not-allowed', fontSize: 13.5, color: C.faint }}>
                      Delete
                      {delTip && <Tip style={{ right: 0, top: '100%', marginTop: 6, lineHeight: 1.5 }}><div>{c.name} is built in and can't be deleted.</div><div>You can turn it off instead.</div></Tip>}
                    </div>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18, display: 'flex', justifyContent: 'flex-end' }}>
          <Btn onClick={(e) => { e && e.stopPropagation && e.stopPropagation(); set({ ask: true, askMode: 'new', chip: null, card: null }); }}>+ New check-in</Btn>
        </div>
      </div>
    );
  }

  function DelChkModal({ m, onClose }) {
    const { s, set } = useP();
    return (
      <Modal width={420} onClose={onClose}>
        <div style={{ fontSize: 17, fontWeight: 600 }}>Delete this check-in?</div>
        <div style={{ marginTop: 6, color: C.muted }}>This can't be undone.</div>
        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <Btn onClick={onClose}>Cancel</Btn>
          <Btn kind="dangerSolid" onClick={() => set({ checkins: s.checkins.filter(c => c.id !== m.id), modal: null, toast: 'Check-in deleted' })}>Delete</Btn>
        </div>
      </Modal>
    );
  }

  Object.assign(window.P21, { CheckinsPage, DelChkModal });
})();