kochwas/src/routes/recipes/[id]/+page.svelte

<script lang="ts">
  import { onMount, onDestroy, tick } from 'svelte';
  import { goto } from '$app/navigation';
  import {
    Heart,
    Utensils,
    Printer,
    Pencil,
    Trash2,
    ChefHat,
    Check,
    X
  } from 'lucide-svelte';
  import RecipeView from '$lib/components/RecipeView.svelte';
  import StarRating from '$lib/components/StarRating.svelte';
  import { profileStore } from '$lib/client/profile.svelte';
  import { wishlistStore } from '$lib/client/wishlist.svelte';
  import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
  import type { CommentRow } from '$lib/server/recipes/actions';

  let { data } = $props();

  // local reactive copies we can mutate after actions
  let ratings = $state<typeof data.ratings>([]);
  let comments = $state<CommentRow[]>([]);
  let cookingLog = $state<typeof data.cooking_log>([]);
  let favoriteProfileIds = $state<number[]>([]);
  let wishlistProfileIds = $state<number[]>([]);
  let newComment = $state('');

  let title = $state('');
  let editingTitle = $state(false);
  let titleDraft = $state('');
  let titleInput: HTMLInputElement | null = $state(null);

  $effect(() => {
    ratings = [...data.ratings];
    comments = [...data.comments];
    cookingLog = [...data.cooking_log];
    favoriteProfileIds = [...data.favorite_profile_ids];
    wishlistProfileIds = [...data.wishlist_profile_ids];
    title = data.recipe.title;
  });

  const myRating = $derived(
    profileStore.active
      ? (ratings.find((r) => r.profile_id === profileStore.active!.id)?.stars ?? null)
      : null
  );

  const isFav = $derived(
    profileStore.active ? favoriteProfileIds.includes(profileStore.active.id) : false
  );

  const onMyWishlist = $derived(
    profileStore.active ? wishlistProfileIds.includes(profileStore.active.id) : false
  );

  async function setRating(stars: number) {
    if (!profileStore.active) {
      await alertAction({
        title: 'Kein Profil gewählt',
        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
      });
      return;
    }
    await fetch(`/api/recipes/${data.recipe.id}/rating`, {
      method: 'PUT',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ profile_id: profileStore.active.id, stars })
    });
    const existing = ratings.find((r) => r.profile_id === profileStore.active!.id);
    if (existing) existing.stars = stars;
    else ratings = [...ratings, { profile_id: profileStore.active.id, stars }];
  }

  async function toggleFavorite() {
    if (!profileStore.active) {
      await alertAction({
        title: 'Kein Profil gewählt',
        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
      });
      return;
    }
    const profileId = profileStore.active.id;
    const method = isFav ? 'DELETE' : 'PUT';
    await fetch(`/api/recipes/${data.recipe.id}/favorite`, {
      method,
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ profile_id: profileId })
    });
    favoriteProfileIds = isFav
      ? favoriteProfileIds.filter((id) => id !== profileId)
      : [...favoriteProfileIds, profileId];
  }

  async function logCooked() {
    if (!profileStore.active) {
      await alertAction({
        title: 'Kein Profil gewählt',
        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
      });
      return;
    }
    const res = await fetch(`/api/recipes/${data.recipe.id}/cooked`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ profile_id: profileStore.active.id })
    });
    const entry = await res.json();
    cookingLog = [entry, ...cookingLog];
  }

  async function addComment() {
    if (!profileStore.active) {
      await alertAction({
        title: 'Kein Profil gewählt',
        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
      });
      return;
    }
    const text = newComment.trim();
    if (!text) return;
    const res = await fetch(`/api/recipes/${data.recipe.id}/comments`, {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ profile_id: profileStore.active.id, text })
    });
    if (res.ok) {
      const body = await res.json();
      comments = [
        ...comments,
        {
          id: body.id,
          profile_id: profileStore.active.id,
          text,
          created_at: new Date().toISOString(),
          author: profileStore.active.name
        }
      ];
      newComment = '';
    }
  }

  async function deleteRecipe() {
    const ok = await confirmAction({
      title: 'Rezept löschen?',
      message: `„${title}" wird endgültig entfernt — mit Bewertungen, Kommentaren und Kochjournal-Einträgen.`,
      confirmLabel: 'Löschen',
      destructive: true
    });
    if (!ok) return;
    await fetch(`/api/recipes/${data.recipe.id}`, { method: 'DELETE' });
    goto('/');
  }

  async function startEditTitle() {
    titleDraft = title;
    editingTitle = true;
    await tick();
    titleInput?.focus();
    titleInput?.select();
  }

  function cancelEditTitle() {
    editingTitle = false;
    titleDraft = '';
  }

  async function saveTitle() {
    const next = titleDraft.trim();
    if (!next || next === title) {
      editingTitle = false;
      return;
    }
    const res = await fetch(`/api/recipes/${data.recipe.id}`, {
      method: 'PATCH',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ title: next })
    });
    if (!res.ok) {
      const body = await res.json().catch(() => ({}));
      await alertAction({
        title: 'Umbenennen fehlgeschlagen',
        message: body.message ?? `HTTP ${res.status}`
      });
      return;
    }
    title = next;
    editingTitle = false;
  }

  function onTitleKey(e: KeyboardEvent) {
    if (e.key === 'Enter') {
      e.preventDefault();
      void saveTitle();
    } else if (e.key === 'Escape') {
      e.preventDefault();
      cancelEditTitle();
    }
  }

  async function toggleWishlist() {
    if (!profileStore.active) {
      await alertAction({
        title: 'Kein Profil gewählt',
        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
      });
      return;
    }
    const profileId = profileStore.active.id;
    if (onMyWishlist) {
      await fetch(`/api/wishlist/${data.recipe.id}?profile_id=${profileId}`, {
        method: 'DELETE'
      });
      wishlistProfileIds = wishlistProfileIds.filter((id) => id !== profileId);
    } else {
      await fetch('/api/wishlist', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ recipe_id: data.recipe.id, profile_id: profileId })
      });
      wishlistProfileIds = [...wishlistProfileIds, profileId];
    }
    void wishlistStore.refresh();
  }

  // Wake-Lock
  let wakeLock: WakeLockSentinel | null = null;
  async function requestWakeLock() {
    try {
      if ('wakeLock' in navigator) {
        wakeLock = await navigator.wakeLock.request('screen');
      }
    } catch {
      // silently ignore
    }
  }

  onMount(() => {
    void requestWakeLock();
    const onVisibility = () => {
      if (document.visibilityState === 'visible' && !wakeLock) void requestWakeLock();
    };
    document.addEventListener('visibilitychange', onVisibility);
    return () => document.removeEventListener('visibilitychange', onVisibility);
  });

  onDestroy(() => {
    if (wakeLock) void wakeLock.release();
  });
</script>

<RecipeView recipe={data.recipe}>
  {#snippet titleSlot()}
    <div class="title-row">
      {#if editingTitle}
        <input
          bind:this={titleInput}
          bind:value={titleDraft}
          class="title-input"
          onkeydown={onTitleKey}
          aria-label="Rezept-Titel"
          maxlength="200"
        />
        <button class="icon-btn save" aria-label="Titel speichern" onclick={saveTitle}>
          <Check size={20} strokeWidth={2.5} />
        </button>
        <button class="icon-btn cancel" aria-label="Abbrechen" onclick={cancelEditTitle}>
          <X size={20} strokeWidth={2.5} />
        </button>
      {:else}
        <h1 class="title-heading">{title}</h1>
        <button class="icon-btn edit" aria-label="Titel umbenennen" onclick={startEditTitle}>
          <Pencil size={18} strokeWidth={2} />
        </button>
      {/if}
    </div>
  {/snippet}

  {#snippet showActions()}
    <div class="action-bar">
      <div class="rating-row">
        <span class="label">Deine Bewertung:</span>
        <StarRating value={myRating} onChange={setRating} size="lg" />
        {#if data.avg_stars !== null}
          <span class="avg">⌀ {data.avg_stars.toFixed(1)} ({ratings.length})</span>
        {/if}
      </div>
      <div class="btn-row">
        <button class="btn" class:heart={isFav} onclick={toggleFavorite}>
          <Heart size={18} strokeWidth={2} fill={isFav ? 'currentColor' : 'none'} />
          <span>Favorit</span>
        </button>
        <button class="btn" class:wish={onMyWishlist} onclick={toggleWishlist}>
          {#if onMyWishlist}
            <Check size={18} strokeWidth={2.5} />
            <span>Auf Wunschliste</span>
          {:else}
            <Utensils size={18} strokeWidth={2} />
            <span>Auf Wunschliste setzen</span>
          {/if}
        </button>
        <button class="btn" onclick={() => window.print()}>
          <Printer size={18} strokeWidth={2} />
          <span>Drucken</span>
        </button>
      </div>
      <div class="btn-row">
        <button class="btn" onclick={logCooked}>
          <ChefHat size={18} strokeWidth={2} />
          <span>Heute gekocht</span>
          {#if cookingLog.length > 0}
            <span class="count">({cookingLog.length})</span>
          {/if}
        </button>
        <button class="btn danger" onclick={deleteRecipe}>
          <Trash2 size={18} strokeWidth={2} />
          <span>Löschen</span>
        </button>
      </div>
    </div>
  {/snippet}
</RecipeView>

<section class="comments">
  <h2>Kommentare</h2>
  {#if comments.length === 0}
    <p class="muted">Noch keine Kommentare.</p>
  {/if}
  <ul>
    {#each comments as c (c.id)}
      <li>
        <div class="author">{c.author}</div>
        <div class="text">{c.text}</div>
        <div class="date">{new Date(c.created_at).toLocaleString('de-DE')}</div>
      </li>
    {/each}
  </ul>
  <div class="new-comment">
    <textarea
      bind:value={newComment}
      placeholder={profileStore.active
        ? 'z.B. Salz durch Zucker ersetzen'
        : 'Erst Profil wählen, um Kommentare zu schreiben.'}
      rows="3"
      disabled={!profileStore.active}
    ></textarea>
    <button class="btn primary" onclick={addComment} disabled={!profileStore.active}>
      Kommentar speichern
    </button>
  </div>
</section>

{#if cookingLog.length > 0}
  <section class="cooking-log">
    <h2>Kochjournal</h2>
    <ul>
      {#each cookingLog.slice(0, 20) as entry (entry.id)}
        <li>
          {new Date(entry.cooked_at).toLocaleString('de-DE')}
        </li>
      {/each}
    </ul>
  </section>
{/if}

<style>
  .title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    flex-wrap: wrap;
  }
  .title-heading {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.15;
    margin: 0;
    flex: 1;
    min-width: 0;
  }
  .title-input {
    flex: 1;
    min-width: 0;
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border: 2px solid #2b6a3d;
    border-radius: 8px;
    background: white;
    font-family: inherit;
  }
  .title-input:focus {
    outline: none;
  }
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #cfd9d1;
    background: white;
    cursor: pointer;
    color: #444;
    flex-shrink: 0;
  }
  .icon-btn:hover {
    background: #f4f8f5;
  }
  .icon-btn.save {
    background: #2b6a3d;
    color: white;
    border-color: #2b6a3d;
  }
  .icon-btn.save:hover {
    background: #235532;
  }
  .icon-btn.cancel {
    color: #c53030;
    border-color: #f1b4b4;
  }
  .action-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem;
    background: white;
    border: 1px solid #e4eae7;
    border-radius: 14px;
  }
  .rating-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .label {
    font-size: 0.95rem;
    color: #555;
  }
  .avg {
    color: #888;
    font-size: 0.9rem;
  }
  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    min-height: 44px;
    border: 1px solid #cfd9d1;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #1a1a1a;
  }
  .btn:hover {
    background: #f4f8f5;
  }
  .btn.heart {
    color: #c53030;
    border-color: #f1b4b4;
    background: #fdf3f3;
  }
  .btn.wish {
    color: #2b6a3d;
    border-color: #b7d6c2;
    background: #eaf4ed;
  }
  .btn.primary {
    background: #2b6a3d;
    color: white;
    border: 0;
  }
  .btn.danger {
    color: #c53030;
    border-color: #f1b4b4;
  }
  .count {
    color: #888;
    font-size: 0.85em;
  }
  .comments {
    margin-top: 2rem;
  }
  .comments h2 {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
  }
  .comments ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .comments li {
    background: white;
    border: 1px solid #e4eae7;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
  }
  .comments .author {
    font-weight: 600;
    font-size: 0.9rem;
  }
  .comments .text {
    margin-top: 0.25rem;
    line-height: 1.4;
  }
  .comments .date {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.3rem;
  }
  .new-comment {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .new-comment textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cfd9d1;
    border-radius: 10px;
    font: inherit;
    resize: vertical;
  }
  .muted {
    color: #888;
  }
  .cooking-log {
    margin-top: 2rem;
  }
  .cooking-log h2 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
  }
  .cooking-log ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #555;
  }
  .cooking-log li {
    padding: 0.35rem 0;
    border-bottom: 1px solid #edf1ee;
    font-size: 0.9rem;
  }
</style>