<script lang="ts">
  import {nip19} from "nostr-tools"
  import {hexToBytes} from "@noble/hashes/utils"
  import {displayPubkey, displayProfile} from "@welshman/util"
  import {pubkey, session, displayNip05, deriveProfile} from "@welshman/app"
  import Icon from "@lib/components/Icon.svelte"
  import FieldInline from "@lib/components/FieldInline.svelte"
  import Button from "@lib/components/Button.svelte"
  import Avatar from "@lib/components/Avatar.svelte"
  import Content from "@app/components/Content.svelte"
  import ProfileEdit from "@app/components/ProfileEdit.svelte"
  import InfoKeys from "@app/components/InfoKeys.svelte"
  import {PLATFORM_NAME} from "@app/state"
  import {pushModal} from "@app/modal"
  import {clip} from "@app/toast"

  const profile = deriveProfile($pubkey!)

  const pubkeyDisplay = displayPubkey($pubkey!)

  const copyNpub = () => clip(nip19.npubEncode($session!.pubkey))

  const copyNsec = () => clip(nip19.nsecEncode(hexToBytes($session!.secret!)))

  const startEdit = () => pushModal(ProfileEdit)

  const startEject = () => pushModal(InfoKeys)
</script>

<div class="content column gap-4">
  <div class="card2 bg-alt shadow-xl">
    <div class="flex justify-between gap-2">
      <div class="flex max-w-full gap-3">
        <div class="py-1">
          <Avatar src={$profile?.picture} size={10} />
        </div>
        <div class="flex min-w-0 flex-col">
          <div class="flex items-center gap-2">
            <div class="text-bold overflow-hidden text-ellipsis">
              {displayProfile($profile, pubkeyDisplay)}
            </div>
          </div>
          <div class="overflow-hidden text-ellipsis text-sm opacity-75">
            {$profile?.nip05 ? displayNip05($profile.nip05) : pubkeyDisplay}
          </div>
        </div>
      </div>
      <Button class="center btn btn-circle btn-neutral -mr-4 -mt-4 h-12 w-12" on:click={startEdit}>
        <Icon icon="pen-new-square" />
      </Button>
    </div>
    {#key $profile?.about}
      <Content event={{content: $profile?.about || "", tags: []}} hideMedia />
    {/key}
  </div>
  {#if $session?.email}
    <div class="card2 bg-alt col-4 shadow-xl">
      <FieldInline>
        <p slot="label">Email Address</p>
        <label class="input input-bordered flex w-full items-center gap-2" slot="input">
          <Icon icon="user-rounded" />
          <input readonly value={$session.email} class="grow" />
        </label>
        <p slot="info">
          Your email and password can only be used to log into {PLATFORM_NAME}.
          <Button class="link" on:click={startEject}>Start holding your own keys</Button>
        </p>
      </FieldInline>
    </div>
  {/if}
  <div class="card2 bg-alt col-4 shadow-xl">
    <FieldInline>
      <p slot="label">Public Key</p>
      <label
        class="input input-bordered flex w-full items-center justify-between gap-2"
        slot="input">
        <div class="row-2 flex-grow items-center">
          <Icon icon="link-round" />
          <input readonly class="ellipsize flex-grow" value={$session?.pubkey} />
        </div>
        <Button class="flex items-center" on:click={copyNpub}>
          <Icon icon="copy" />
        </Button>
      </label>
      <p slot="info">
        Your public key is your nostr user identifier. It also allows other people to authenticate
        your messages.
      </p>
    </FieldInline>
    {#if $session?.method === "nip01"}
      <FieldInline>
        <p slot="label">Private Key</p>
        <label class="input input-bordered flex w-full items-center gap-2" slot="input">
          <Icon icon="link-round" />
          <input readonly value={$session.secret} class="grow" type="password" />
          <Button class="flex items-center" on:click={copyNsec}>
            <Icon icon="copy" />
          </Button>
        </label>
        <p slot="info">Your private key is your nostr password. Keep this somewhere safe!</p>
      </FieldInline>
    {/if}
  </div>
</div>
