<script lang="ts">
  import Button from "./Button.svelte";
  import { connectUri, nwcRelays } from "$lib/nwc.svelte";

  let customRelays = $state("");

  function updateNwcRelays() {
    const relays = customRelays
      .split(",")
      .map((r) => r.trim())
      .filter((r) => r);
    if (relays.length > 0) {
      nwcRelays.set(relays);
    }
  }

  function copyNwcUri() {
    navigator.clipboard.writeText($connectUri);
  }

  $effect(() => {
    customRelays = $nwcRelays.join(", ");
  });
</script>

<div class="retro-card">
  <h2>Nostr Wallet Connect</h2>
  <p>Configure your wallet to work with Nostr Wallet Connect clients.</p>
  <p>
    Nostr Wallet Connect is a protocol for connecting to Nostr wallets. It
    allows you to send Nostr zaps from your Portal BTC Wallet.
  </p>

  <div class="form-group">
    <label for="nwc-uri">Connection URI:</label>
    <div class="input-with-button">
      <input
        id="nwc-uri"
        type="text"
        value={$connectUri}
        readonly
        class="retro-input"
      />
      <Button onclick={copyNwcUri}>Copy</Button>
    </div>
  </div>

  <div class="form-group">
    <label for="relays">Custom Relays (comma-separated):</label>
    <input
      id="relays"
      type="text"
      value={customRelays}
      oninput={(e) => (customRelays = (e.target as HTMLInputElement).value)}
      placeholder="wss://relay1.com, wss://relay2.com"
      class="retro-input"
    />
    <Button onclick={updateNwcRelays}>Update Relays</Button>
  </div>
</div>

<style>
  h2 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
  }

  .retro-input {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .input-with-button {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
  }

  .input-with-button .retro-input {
    flex: 1;
    margin-bottom: 0;
  }
</style>
