"use client";

import { Badge, Button } from "@/components/ui";
import { formatDuration } from "@/lib/format";
import type { ConnectionStatus } from "@/types/connection";

export interface TrackingControlsProps {
  isTracking: boolean;
  canStart: boolean;
  starting: boolean;
  onStart: () => void;
  onStop: () => void;
  syncIntervalMs: number;
  connectionStatus: ConnectionStatus;
  queueCount: number;
}

const STATUS_LABEL: Record<ConnectionStatus, string> = {
  online: "Connected",
  offline: "Offline",
  syncing: "Syncing",
};

const STATUS_VARIANT = {
  online: "success",
  offline: "danger",
  syncing: "warning",
} as const;

export function TrackingControls({
  isTracking,
  canStart,
  starting,
  onStart,
  onStop,
  syncIntervalMs,
  connectionStatus,
  queueCount,
}: TrackingControlsProps) {
  return (
    <div className="flex flex-wrap items-center justify-between gap-4">
      <div className="flex items-center gap-3">
        {isTracking ? (
          <Button variant="danger" onClick={onStop}>
            Stop tracking
          </Button>
        ) : (
          <Button variant="primary" onClick={onStart} disabled={!canStart} loading={starting}>
            Start tracking
          </Button>
        )}

        {/* The interval is interpolated. The previous version rendered a template
            literal that said "Log interval custom" with nothing substituted in. */}
        <p className="text-content-muted text-xs">
          {isTracking
            ? `Logging one entry every ${formatDuration(syncIntervalMs / 1000)}`
            : "Tracking is stopped"}
        </p>
      </div>

      <div className="flex items-center gap-2">
        <Badge variant={STATUS_VARIANT[connectionStatus]}>{STATUS_LABEL[connectionStatus]}</Badge>
        {queueCount > 0 && <Badge variant="warning">{queueCount} queued</Badge>}
      </div>
    </div>
  );
}