// SyncBlock — sidebar CRM sync status with resync button.
// Shows a friendly "synced from DealCloud" indicator + last-sync time + manual refresh.

const { useState: useSyncState, useEffect: useSyncEffect } = React;

function SyncBlock() {
  const [lastSync, setLastSync] = useSyncState(() => {
    try {
      const stored = localStorage.getItem("vault.lastSync");
      return stored ? parseInt(stored, 10) : Date.now() - 14 * 60 * 1000;
    } catch { return Date.now() - 14 * 60 * 1000; }
  });
  const [syncing, setSyncing] = useSyncState(false);
  const [now, setNow] = useSyncState(Date.now());

  useSyncEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 30000);
    return () => clearInterval(t);
  }, []);

  function relSync() {
    const mins = Math.max(0, Math.round((now - lastSync) / 60000));
    if (syncing) return "syncing…";
    if (mins < 1) return "just now";
    if (mins < 60) return `${mins}m ago`;
    const h = Math.round(mins / 60);
    return `${h}h ago`;
  }

  function resync() {
    if (syncing) return;
    setSyncing(true);
    // simulate sync
    setTimeout(() => {
      const t = Date.now();
      setLastSync(t);
      try { localStorage.setItem("vault.lastSync", String(t)); } catch {}
      setSyncing(false);
    }, 1100);
  }

  return (
    <div style={{ padding: "8px 12px 4px" }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 9,
        padding: "9px 11px",
        background: "var(--surface)",
        border: "1px solid var(--line)",
        borderRadius: 9,
      }}>
        <span style={{
          width: 24, height: 24, borderRadius: "50%",
          background: syncing ? "var(--accent-soft)" : "var(--ok-soft)",
          color:      syncing ? "var(--accent)"      : "var(--ok)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0,
          animation: syncing ? "vault-spin 0.9s linear infinite" : "none",
        }}>
          <Icon.cloud/>
        </span>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink)" }}>
            DealCloud · CRM
          </div>
          <div className="muted" style={{ fontSize: 10.5, lineHeight: 1.3 }}>
            Synced {relSync()}
          </div>
        </div>
        <button onClick={resync} disabled={syncing} title="Resync now"
          style={{
            border: "1px solid var(--line)",
            background: "var(--canvas)",
            borderRadius: 6, padding: "4px 5px",
            color: "var(--muted)", cursor: syncing ? "default" : "pointer",
            display: "inline-flex", alignItems: "center",
            opacity: syncing ? 0.6 : 1,
          }}>
          <span style={{ display: "inline-flex", animation: syncing ? "vault-spin 0.9s linear infinite" : "none" }}>
            <Icon.refresh/>
          </span>
        </button>
      </div>
      <style>{`@keyframes vault-spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}
window.SyncBlock = SyncBlock;