<script lang="ts">
  import Button from "./Button.svelte";
  import { goto } from "$app/navigation";
  import { walletState } from "$lib/wallet.svelte";

  let showSeedPhrase = $state(false);

  function toggleSeedPhrase() {
    showSeedPhrase = !showSeedPhrase;
  }

  function copySeedPhrase() {
    navigator.clipboard.writeText($walletState.mnemonic!);
  }

  function resetWebsite() {
    if (
      confirm(
        "Are you sure you want to reset the website? This will clear all data including your wallet. Make sure you have your seed phrase saved!"
      )
    ) {
      if (confirm("This action cannot be undone. Are you absolutely sure?")) {
        localStorage.clear();
        indexedDB.deleteDatabase("nwc");
        goto("/setup");
      }
    }
  }
</script>

<div class="retro-card danger-zone">
  <h2>Danger Zone</h2>
  <p>⚠️ These actions can result in permanent loss of funds!</p>

  <div class="danger-section">
    <h3>Seed Phrase</h3>
    <p>Your seed phrase is used to recover your wallet. Keep it safe!</p>

    <div class="seed-actions">
      <Button onclick={toggleSeedPhrase}>
        {showSeedPhrase ? "Hide" : "Show"} Seed Phrase
      </Button>
      {#if showSeedPhrase}
        <Button onclick={copySeedPhrase}>Copy Seed</Button>
      {/if}
    </div>

    {#if showSeedPhrase}
      <div class="seed-phrase">
        {$walletState.mnemonic!}
      </div>
    {/if}
  </div>

  <div class="danger-section">
    <h3>Reset Website</h3>
    <p>
      This will permanently delete all your data including your wallet! It can
      only be recovered if you have your seed phrase saved.
    </p>

    <Button variant="danger" onclick={resetWebsite}>Reset Website</Button>
  </div>
</div>

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

  h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
  }

  .seed-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .seed-phrase {
    background: var(--surface-alt-color);
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1.4;
    border: 2px solid var(--accent-color);
    word-break: break-all;
  }

  .danger-zone {
    border-color: var(--error-color);
  }

  .danger-zone h2 {
    color: var(--error-color);
  }

  .danger-section {
    margin-bottom: 2rem;
  }

  .danger-section:last-child {
    margin-bottom: 0;
  }

  .danger-section h3 {
    color: var(--error-color);
  }
</style>
