import React from 'react';

/**
 * Compact pulsing-dot indicator that signals "data is streaming in
 * right now". Used both inline (next to the page title) and inside
 * {@link LiveSyncBanner} as the leading visual.
 */
export const LiveSyncIndicator = (): JSX.Element => (
  <span className="inline-flex items-center gap-2">
    <span className="relative flex h-2.5 w-2.5" aria-hidden="true">
      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-500 opacity-75" />
      <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500" />
    </span>
    <span className="text-sm font-medium text-emerald-700">
      Live · Auto-syncing
    </span>
  </span>
);

/**
 * Always-visible callout above the analytics dashboards that explains
 * the freshness model. The pulsing dot anchors the user's attention
 * (mirrors the visual language of streaming status pages); the prose
 * underneath spells out the reconciliation cadence so a merchant who
 * is staring at an unchanged KPI mid-afternoon doesn't assume the
 * page is broken or that the manual refresh button is required.
 */
const LiveSyncBanner = (): JSX.Element => (
  <div className="rounded-xl border border-gray-100 bg-white p-4">
    <LiveSyncIndicator />
    <p className="mt-2 text-xs text-gray-700">
      Your dashboard is always up to date. We continuously collect every
      conversation, click, and add-to-cart from your shop and stream them into
      your reports — no manual refresh needed.
    </p>
    <ul className="mt-2 space-y-1 text-xs text-gray-700">
      <li>
        <span className="font-medium text-gray-900">Today</span> updates in real
        time as your customers chat and engage.
      </li>
      <li>
        The <span className="font-medium text-gray-900">last 7 days</span> are
        recomputed every 2 hours so late clicks are never missed.
      </li>
      <li>
        <span className="font-medium text-gray-900">Older history</span> is
        reconciled each night for full accuracy.
      </li>
    </ul>
    <p className="mt-2 text-xs text-gray-500">
      If you just installed Recomaze or made changes to your popup, give us a
      few minutes for the first metrics to roll in.
    </p>
  </div>
);

export default LiveSyncBanner;