<script lang="ts">
  import { Check, Settings, X } from "@lucide/svelte";
  import type { AnalyticsSettings } from "../types";

  interface Props {
    analytics: AnalyticsSettings;
    onSave: (settings: AnalyticsSettings) => void;
    onClose: () => void;
  }

  let { analytics, onSave = () => {}, onClose = () => {} }: Props = $props();

  let analyticsEnabled = $state(true);

  $effect(() => {
    analyticsEnabled = analytics.enabled;
  });

  function save() {
    onSave({
      ...analytics,
      enabled: analyticsEnabled,
      noticeSeen: true,
    });
  }
</script>

<div class="dialog-backdrop" role="presentation">
  <div class="dialog app-settings-dialog" role="dialog" aria-modal="true" aria-label="Settings" tabindex="-1">
    <header class="dialog-header">
      <div>
        <span class="eyebrow">Gitty</span>
        <h2 class="dialog-title">Settings</h2>
      </div>
      <button class="dialog-close" type="button" onclick={onClose} title="Close">
        <X size={18} aria-hidden="true" />
      </button>
    </header>

    <form class="app-settings-form" onsubmit={(event) => { event.preventDefault(); save(); }}>
      <section class="settings-section">
        <header>
          <Settings size={16} aria-hidden="true" />
          <div>
            <span class="eyebrow">Analytics</span>
            <h3>Anonymous usage analytics</h3>
          </div>
        </header>

        <label class="settings-toggle-row">
          <input type="checkbox" bind:checked={analyticsEnabled} />
          <span>
            <strong>Allow anonymous Aptabase events</strong>
            <small>No repository paths, remotes, branches, commit messages, file names, diffs, credentials, or code are sent.</small>
          </span>
        </label>
      </section>

      <div class="new-branch-actions">
        <button class="btn-secondary" type="button" onclick={onClose}>Cancel</button>
        <button class="btn-primary" type="submit">
          <Check size={16} aria-hidden="true" />
          Save
        </button>
      </div>
    </form>
  </div>
</div>
