<script lang="ts">
  import { getContext } from 'svelte'
  import type { Party } from '$lib/types/api/party'
  import { getGuidebookImage } from '$lib/utils/images'

  export let item: any | undefined
  export let position: number // 1..3

  type PartyCtx = {
    getParty: () => Party
    updateParty: (p: Party) => void
    canEdit: () => boolean
    services: { partyService: any }
  }
  const ctx = getContext<PartyCtx>('party')

  function displayName(input: any): string {
    if (!input) return '—'
    const maybe = input.name ?? input
    if (typeof maybe === 'string') return maybe
    if (maybe && typeof maybe === 'object') return maybe.en || maybe.ja || '—'
    return '—'
  }

  function guidebookImageUrl(g?: any): string {
    return getGuidebookImage(g?.granblueId)
  }

  async function remove() {
    const party = ctx.getParty()
    const editKey = ctx.services.partyService.getEditKey(party.shortcode)
    const updated = await ctx.services.partyService.updateGuidebooks(party.id, position - 1, null, editKey || undefined)
    ctx.updateParty(updated)
  }

  async function add() {
    const party = ctx.getParty()
    const editKey = ctx.services.partyService.getEditKey(party.shortcode)
    const id = window.prompt('Enter guidebook ID to add')
    if (!id) return
    const updated = await ctx.services.partyService.updateGuidebooks(party.id, position - 1, id, editKey || undefined)
    ctx.updateParty(updated)
  }
</script>

<div class="unit">
  <img class="image" alt={item ? displayName(item) : ''} src={guidebookImageUrl(item)} />
  <div class="name">{item ? displayName(item) : '—'}</div>
  {#if ctx.canEdit() && !item}
    <button class="add" title="Add" on:click={add}>＋</button>
  {/if}
  {#if ctx.canEdit() && item}
    <button class="remove" title="Remove" on:click={remove}>×</button>
  {/if}
</div>

<style lang="scss">
  @use '$src/themes/colors' as *;
  @use '$src/themes/typography' as *;
  @use '$src/themes/spacing' as *;

  .unit { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: $unit; }
  .image { width: 100%; height: auto; border: 1px solid $grey-75; border-radius: 8px; display: block; background: var(--extra-purple-card-bg); }
  .name { font-size: $font-small; text-align: center; color: var(--text-secondary); }
  .remove, .add { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6); color: white; border: none; border-radius: 12px; width: 24px; height: 24px; line-height: 24px; cursor: pointer; }
  .add { right: 6px; }
</style>

