// notifications.jsx — iOS-style lock-screen notification banner with quick actions

function NotificationBanner({ task, folk, onComplete, onSnooze, onDismiss, onOpen }) {
  if (!task || !folk) return null;
  const KIcon = window.I.kind[task.kind] || window.I.bowl;

  return (
    <div className="notif-overlay" onClick={onDismiss}>
      <div className="notif-stack" onClick={(e) => e.stopPropagation()}>
        <div className="notif-card" onClick={onOpen}>
          {/* header bar — app, time */}
          <div className="notif-bar">
            <div className="notif-app">
              <div className="notif-logo">T</div>
              <span>TENDLET</span>
            </div>
            <div className="notif-time">now</div>
          </div>

          {/* body — title + detail + folk pill */}
          <div className="notif-body">
            <div className="notif-body-row">
              <div className="notif-title">{task.verb}</div>
              <div className="notif-icon-tray">
                <KIcon size={16} sw={1.7} />
              </div>
            </div>
            <div className="notif-text">
              For <b>{folk.name}</b>{task.detail ? ' · ' + task.detail : ''}
            </div>

            <div className="notif-folk">
              <window.FolkAvatar folk={folk} />
              <div className="notif-folk-info">
                <div className="notif-folk-name h-serif">{folk.name}</div>
                <div className="notif-folk-species">{folk.species}</div>
              </div>
            </div>
          </div>

          {/* quick actions */}
          <div className="notif-actions">
            <button className="notif-act primary" onClick={(e) => { e.stopPropagation(); onComplete && onComplete(); }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12.5l4.5 4.5L19 7"/>
              </svg>
              <span>Mark done</span>
            </button>
            <button className="notif-act" onClick={(e) => { e.stopPropagation(); onSnooze && onSnooze(); }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="13" r="8"/>
                <path d="M12 9v4l3 1.5M5 4l3 2M19 4l-3 2"/>
              </svg>
              <span>Remind in 1h</span>
            </button>
          </div>

          <div className="notif-hint">
            Long-press the live notification to see actions · tap to open
          </div>
        </div>

        {/* second collapsed notification — for stack feel */}
        <div className="notif-card collapsed">
          <div className="notif-bar">
            <div className="notif-app">
              <div className="notif-logo">T</div>
              <span>TENDLET</span>
            </div>
            <div className="notif-time">earlier</div>
          </div>
          <div className="notif-body">
            <div className="notif-title" style={{ fontSize: 13.5 }}>Echo's soil is medium-dry — water by Tuesday</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.NotificationBanner = NotificationBanner;