<script lang="ts">
  import { pageTitle } from '$lib/branding';
  import { useQueryClient } from '@tanstack/svelte-query';
  import type { CreateQueryResult, CreateMutationResult } from '@tanstack/svelte-query';
  import {
    createLBStatusQuery,
    createTokenMutation,
    createEnabledMutation,
    type LBStatus
  } from '$lib/api/listenbrainz';
  import { theme, setTheme, type ThemePreference } from '$lib/stores/theme.svelte';

  const queryClient = useQueryClient();

  const status = createLBStatusQuery() as CreateQueryResult<LBStatus>;
  const tokenMutation = createTokenMutation(queryClient);
  const enabledMutation = createEnabledMutation(queryClient);

  let tokenInput = $state('');

  function saveToken() {
    const t = tokenInput.trim();
    if (!t) return;
    $tokenMutation.mutate(t, { onSuccess: () => { tokenInput = ''; } });
  }

  function clearToken() {
    $tokenMutation.mutate('');
  }

  function toggleEnabled() {
    if (!$status.data) return;
    $enabledMutation.mutate(!$status.data.enabled);
  }
</script>

<svelte:head><title>{pageTitle('Settings')}</title></svelte:head>

<div class="space-y-6">
  <h1 class="text-2xl font-semibold">Settings</h1>

  <section class="space-y-3 rounded border border-border bg-surface p-4">
    <h2 class="text-lg font-semibold">Appearance</h2>

    <fieldset class="space-y-2">
      <legend class="block text-sm text-text-secondary">Theme</legend>
      <div class="flex gap-2">
        {#each ['dark', 'light', 'system'] as opt (opt)}
          <label
            class="flex cursor-pointer items-center gap-2 rounded border border-border px-3 py-1.5 text-sm
                   {theme.value === opt ? 'bg-action-secondary text-action-fg' : 'text-text-primary hover:bg-surface-hover'}"
          >
            <input
              type="radio"
              name="theme"
              value={opt}
              checked={theme.value === opt}
              onchange={() => setTheme(opt as ThemePreference)}
              class="sr-only"
            />
            <span class="capitalize">{opt}</span>
          </label>
        {/each}
      </div>
    </fieldset>

    <p class="text-xs text-text-secondary">
      System follows your device's light/dark preference.
    </p>
  </section>

  <section class="space-y-4 rounded border border-border bg-surface p-4">
    <h2 class="text-lg font-semibold">ListenBrainz</h2>

    {#if $status.isPending}
      <p class="text-text-secondary">Loading…</p>
    {:else if $status.isError}
      <p class="text-text-secondary">Couldn't load status.</p>
    {:else if $status.data}
      <div class="space-y-3">
        <label class="block text-sm">
          <span class="block text-text-secondary mb-1">User token</span>
          {#if $status.data.token_set}
            <div class="flex items-center gap-2">
              <span class="text-text-primary">••••••••••• (set)</span>
              <button
                type="button"
                onclick={clearToken}
                class="text-sm text-accent hover:underline"
                disabled={$tokenMutation.isPending}
              >clear</button>
            </div>
          {:else}
            <div class="flex gap-2">
              <input
                type="password"
                bind:value={tokenInput}
                placeholder="paste your LB token"
                class="flex-1 rounded border border-border bg-background px-2 py-1 text-sm"
              />
              <button
                type="button"
                onclick={saveToken}
                disabled={!tokenInput.trim() || $tokenMutation.isPending}
                class="rounded bg-accent px-3 py-1 text-sm text-background disabled:opacity-50"
              >Save</button>
            </div>
          {/if}
        </label>

        <label class="flex items-center gap-2 text-sm">
          <input
            type="checkbox"
            checked={$status.data.enabled}
            disabled={!$status.data.token_set || $enabledMutation.isPending}
            onchange={toggleEnabled}
          />
          <span>Send my plays to ListenBrainz</span>
        </label>

        {#if $status.data.last_scrobbled_at}
          <p class="text-sm text-text-secondary">
            Last scrobbled: {new Date($status.data.last_scrobbled_at).toLocaleString()}
          </p>
        {/if}

        <p class="text-xs text-text-secondary">
          Get a token at <a href="https://listenbrainz.org/profile/" target="_blank" rel="noopener" class="text-accent hover:underline">listenbrainz.org/profile</a>.
          Tokens are stored unencrypted in this server's database — treat as sensitive.
        </p>
      </div>
    {/if}
  </section>

  <section class="space-y-3 rounded border border-border bg-surface p-4">
    <h2 class="text-lg font-semibold">Library</h2>
    <ul class="space-y-2 text-sm">
      <li>
        <a href="/library/hidden" class="text-accent hover:underline">Hidden tracks</a>
        <span class="text-text-secondary"> — tracks you've flagged as bad rips, wrong tags, or otherwise unplayable.</span>
      </li>
    </ul>
  </section>
</div>
