horror/frontend/src/components/KiTab.vue

<script setup>
// Filme finden, indem man beschreibt, was man sucht. Die KI schlägt vor,
// TMDB bestätigt — was es dort nicht gibt, kommt nicht an. Auf Wunsch
// geht die eigene Sammlung mit, dann kennt die KI den Geschmack. Die
// Filterleiste geht als Vorgabe mit und siebt hinterher noch einmal.
import { computed, ref } from 'vue'
import MovieCard from './MovieCard.vue'
import { filterParameter } from '../filter.js'

const props = defineProps({
  angemeldet: Boolean,
  gesehenIds: { type: Set, default: () => new Set() },
  ohneGesehene: { type: Boolean, default: true },
  filter: { type: Object, default: () => ({}) },
  ansicht: { type: String, default: 'kompakt' },
})

const emit = defineEmits(['open'])

const MAX = 1000

const beschreibung = ref('')
const mitSammlung = ref(false)
const vorschlaege = ref([])
const laden = ref(false)
const fehler = ref('')
const gefragt = ref(false)

// Eine verstellte Leiste ist schon eine Frage: "Horror ab 2015" reicht
const leisteVerstellt = computed(() => {
  const { sort, limit, ...rest } = filterParameter(props.filter)
  return Object.values(rest).some((w) => w !== '' && w != null)
})

const kannFragen = computed(
  () =>
    !laden.value &&
    (beschreibung.value.trim().length > 0 || mitSammlung.value || leisteVerstellt.value),
)

async function fragen() {
  if (!kannFragen.value) return
  laden.value = true
  fehler.value = ''
  try {
    const resp = await fetch('/api/ki-suche', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        beschreibung: beschreibung.value.trim(),
        mit_sammlung: props.angemeldet && mitSammlung.value,
        ohne_gesehene: props.ohneGesehene,
        ...filterParameter(props.filter),
      }),
    })
    if (!resp.ok) {
      const daten = await resp.json().catch(() => ({}))
      throw new Error(daten.detail || 'Das hat nicht geklappt.')
    }
    vorschlaege.value = await resp.json()
    gefragt.value = true
  } catch (err) {
    fehler.value = err.message
  } finally {
    laden.value = false
  }
}

async function open(movie) {
  const resp = await fetch(`/api/search/${movie.id}`)
  if (resp.ok) emit('open', await resp.json())
}
</script>

<template>
  <div class="ki-tab">
    <div class="frage">
      <textarea
        v-model="beschreibung"
        :maxlength="MAX"
        rows="3"
        placeholder="Was suchst du?"
        @keydown.ctrl.enter="fragen"
      ></textarea>
      <div class="zeile">
        <label v-if="angemeldet" class="schalter">
          <input v-model="mitSammlung" type="checkbox" />
          Meine Sammlung mitgeben
        </label>
        <span class="rest"></span>
        <button type="button" class="los" :disabled="!kannFragen" @click="fragen">
          {{ laden ? 'Sucht …' : 'Suchen' }}
        </button>
      </div>
    </div>

    <p v-if="laden" class="note">Die KI überlegt. Das dauert ein paar Sekunden.</p>
    <p v-else-if="fehler" class="note error">{{ fehler }}</p>
    <p v-else-if="gefragt && !vorschlaege.length" class="note">
      Nichts Brauchbares gefunden. Beschreib es anders.
    </p>

    <!-- Wo sonst die Inhaltsangabe steht, sagt hier die KI, warum der
         Film passt -->
    <div class="grid" :class="ansicht">
      <MovieCard
        v-for="movie in vorschlaege"
        :key="movie.id"
        :movie="{ ...movie, teaser: movie.grund }"
        :ansicht="ansicht"
        :gesehen="gesehenIds.has(movie.id)"
        @open="open"
      />
    </div>
  </div>
</template>

<style scoped>
.ki-tab {
  min-width: 0;
}

.frage {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

textarea {
  width: 100%;
  min-height: 5.5rem;
  padding: 0.9rem 1.1rem;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.5;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
}

textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.schalter {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.schalter input {
  accent-color: var(--accent);
}

.rest {
  flex: 1;
}

.los {
  padding: 0.6rem 1.4rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--accent);
  border-radius: 8px;
}

.los:hover:not(:disabled) {
  filter: brightness(1.15);
}

.los:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Wie in der Suche: Poster im Raster, Detailkarten zu zweit nebeneinander */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.1rem;
}

.grid.details {
  grid-template-columns: repeat(auto-fill, min(calc(50% - 0.55rem), calc(4 * 190px + 3 * 1.1rem)));
}

.note {
  padding: 2.5rem 0;
  color: var(--muted);
  text-align: center;
}

.note.error {
  color: var(--accent);
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 0.6rem;
  }

  .grid.details {
    grid-template-columns: 1fr;
  }
}
</style>