import { TriangleAlertIcon } from "lucide-react";

import { useSharedSettingsSync } from "../../hooks/useSettings";
import { Alert, AlertAction, AlertDescription } from "../ui/alert";
import { Button } from "../ui/button";

/**
 * Warns when a connected environment holds different shared settings than
 * the primary one, and offers to write the primary's values everywhere.
 * Renders nothing when every connected environment agrees.
 */
export function SharedSettingsMismatchAlert() {
  const { mismatches, applyToAll } = useSharedSettingsSync();
  if (mismatches.length === 0) {
    return null;
  }
  const labels = mismatches.map((mismatch) => mismatch.label).join(", ");
  return (
    <Alert variant="warning" className="mx-3 sm:mx-4">
      <TriangleAlertIcon />
      <AlertDescription>
        Settings differ on {labels}. Thread and source control preferences are meant to match on
        every environment.
      </AlertDescription>
      <AlertAction>
        <Button variant="outline" size="xs" onClick={applyToAll}>
          Apply to all
        </Button>
      </AlertAction>
    </Alert>
  );
}