<script lang="ts">
  import { BarChart3, Check, ShieldCheck } from "@lucide/svelte";

  interface Props {
    enabled: boolean;
    onContinue: (enabled: boolean) => void;
  }

  let { enabled = true, onContinue = () => {} }: Props = $props();
  let allowAnalytics = $state(true);

  $effect(() => {
    allowAnalytics = enabled;
  });
</script>

<div class="dialog-backdrop app-chrome-backdrop" role="presentation">
  <div class="dialog analytics-notice-dialog" role="dialog" aria-modal="true" aria-label="Analytics notice" tabindex="-1">
    <header class="dialog-header">
      <div>
        <span class="eyebrow">Privacy</span>
        <h2 class="dialog-title">Anonymous usage analytics</h2>
      </div>
      <ShieldCheck size={20} aria-hidden="true" />
    </header>

    <div class="analytics-notice-body">
      <div class="analytics-notice-icon">
        <BarChart3 size={24} aria-hidden="true" />
      </div>
      <div class="analytics-notice-copy">
        <p>
          Gitty can send anonymous usage events and technical error logs to Aptabase and the self-hosted SigNoz service so crashes, rough edges, and commonly used workflows are easier to improve.
        </p>
        <p>
          Telemetry does not include repository paths, remote URLs, branch names, commit messages, diffs, file names, credentials, or source code.
        </p>
      </div>

      <label class="settings-toggle-row analytics-notice-toggle">
        <input type="checkbox" bind:checked={allowAnalytics} />
        <span>
          <strong>Allow anonymous analytics</strong>
          <small>You can change this later in Settings.</small>
        </span>
      </label>
    </div>

    <footer class="dialog-footer analytics-notice-footer">
      <span class="dialog-footer-info">Privacy-friendly, optional, and limited to product usage and technical errors.</span>
      <button class="btn-primary" type="button" onclick={() => onContinue(allowAnalytics)}>
        <Check size={16} aria-hidden="true" />
        Continue
      </button>
    </footer>
  </div>
</div>
