/* @component-map
 * App — Main Myreads container with tab navigation
 * StarRating — Interactive 5-star rating component
 * BookCard — Displays a saved book with notes editing and removal
 * DiscoverTab — Form + AI suggestions for finding new books
 * SuggestionCard — Single AI recommendation with save buttons
 * BookList — List view for saved books in Want/Read tabs
 * @end-component-map */

import { useCollection, useAI } from '@deplixo/sdk';

const TABS = ["Discover", "Want to Read", "Previously Read"];

function StarRating({ value, onChange }) {
  return (
    <div className="star-rating">
      {[1, 2, 3, 4, 5].map((s) => (
        <span
          key={s}
          onClick={() => onChange?.(s)}
          className={`star ${(value ?? 0) >= s ? 'star-filled' : ''} ${onChange ? 'star-clickable' : ''}`}
        >
          ★
        </span>
      ))}
    </div>
  );
}

function BookCard({ book, list, onRemove, onUpdateRating, onUpdateNotes }) {
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(book.notes || "");

  const save = () => {
    onUpdateNotes(book.id, draft);
    setEditing(false);
  };

  return (
    <div className="book-card">
      <div className="book-card-header">
        <div className="book-card-main">
          <div className="book-title">{book.title}</div>
          <div className="book-author">by {book.author}</div>
          {list === "read" && <StarRating value={book.rating} onChange={(r) => onUpdateRating(book.id, r)} />}
          <div className="book-reason">Why suggested: {book.reason}</div>
        </div>
        <button onClick={() => onRemove(book.id)} className="remove-btn">
          ✕
        </button>
      </div>
      {editing ? (
        <div className="notes-editor">
          <textarea
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            rows={3}
            className="notes-textarea"
            placeholder="Add your notes..."
          />
          <div className="notes-buttons">
            <button onClick={save} className="btn-primary-sm">
              Save
            </button>
            <button onClick={() => setEditing(false)} className="btn-secondary-sm">
              Cancel
            </button>
          </div>
        </div>
      ) : (
        <div className="notes-section">
          {book.notes && <div className="notes-display">{book.notes}</div>}
          <button
            onClick={() => {
              setEditing(true);
              setDraft(book.notes || "");
            }}
            className="notes-edit-btn"
          >
            {book.notes ? "Edit notes" : "+ Add notes"}
          </button>
        </div>
      )}
    </div>
  );
}

function SuggestionCard({ suggestion, index, isSaved, inRead, inWant, onMark }) {
  return (
    <div className="suggestion-card">
      <div className={`suggestion-cover cover-${index % 5}`}>📖</div>
      <div className="suggestion-body">
        <div className="book-title">{suggestion.title}</div>
        <div className="book-author">by {suggestion.author}</div>
        <div className="suggestion-why">{suggestion.why}</div>
        {isSaved ? (
          <div className="saved-indicator">{inRead ? "✓ In Previously Read" : "✓ In Want to Read"}</div>
        ) : (
          <div className="suggestion-actions">
            <button onClick={() => onMark(suggestion, "want")} className="btn-primary">
              + Want to Read
            </button>
            <button onClick={() => onMark(suggestion, "read")} className="btn-dark">
              ✓ Already Read
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

function DiscoverTab({ readBooks, wantBooks, addRead, addWant }) {
  const { generate, loading } = useAI();
  const [bookTitle, setBookTitle] = React.useState("");
  const [author, setAuthor] = React.useState("");
  const [liked, setLiked] = React.useState("");
  const [genre, setGenre] = React.useState("");
  const [addToAlreadyRead, setAddToAlreadyRead] = React.useState(false);
  const [suggestions, setSuggestions] = React.useState([]);
  const [error, setError] = React.useState("");
  const [confirmMsg, setConfirmMsg] = React.useState("");

  const allSavedTitles = [...readBooks, ...wantBooks].map((b) => b.title.toLowerCase());

  const getSuggestions = async () => {
    if (!bookTitle.trim()) {
      setError("Please enter a book title.");
      return;
    }
    setError("");
    setConfirmMsg("");
    setSuggestions([]);

    // If the user checked "Add this to Already Read", save the entered book
    // to the Previously Read collection before fetching suggestions.
    if (addToAlreadyRead) {
      const entered = {
        title: bookTitle.trim(),
        author: author.trim(),
        reason: liked.trim() || "Added from Discover",
        addedAt: new Date().toISOString(),
      };
      const alreadyInRead = readBooks.find(
        (b) => b.title.toLowerCase() === entered.title.toLowerCase()
      );
      if (!alreadyInRead) {
        try {
          await addRead(entered);
          setConfirmMsg(`Added "${entered.title}" to Previously Read.`);
        } catch (e) {
          setError("Could not save to Previously Read. Please try again.");
          return;
        }
      } else {
        setConfirmMsg(`"${entered.title}" is already in Previously Read.`);
      }
    }

    try {
      const skipList = allSavedTitles.length
        ? `Do NOT suggest any of these books (already saved by user): ${allSavedTitles.join(", ")}.`
        : "";
      const genreNote = genre ? `Mood/genre filter: ${genre}.` : "";
      const prompt = `You are a literary recommendation engine. A reader enjoyed the book "${bookTitle}"${
        author ? ` by ${author}` : ""
      }. What they liked: "${liked || "general enjoyment"}". ${genreNote} ${skipList}\n\nSuggest exactly 3 books they would love. Respond ONLY with a valid JSON array, no markdown, no preamble:\n[{"title":"...","author":"...","why":"A 1-2 sentence explanation of why this matches their taste"}]`;

      const text = await generate(prompt);
      const clean = String(text).replace(/```json|```/g, "").trim();
      const parsed = JSON.parse(clean);
      setSuggestions(parsed);
    } catch (e) {
      setError("Something went wrong fetching suggestions. Please try again.");
    }
  };

  const markBook = (s, status) => {
    const book = {
      title: s.title,
      author: s.author,
      reason: s.why,
      addedAt: new Date().toISOString(),
    };
    if (status === "read") {
      if (!readBooks.find((b) => b.title.toLowerCase() === s.title.toLowerCase())) addRead(book);
    } else {
      if (!wantBooks.find((b) => b.title.toLowerCase() === s.title.toLowerCase())) addWant(book);
    }
  };

  const isSaved = (title) => allSavedTitles.includes(title.toLowerCase());

  return (
    <>
      <div className="panel">
        <h2 className="panel-title">Find Your Next Read</h2>
        <p className="panel-subtitle">Tell us about a book you loved and we'll find your next favorite.</p>
        <div className="form-grid">
          <div>
            <label className="form-label">Book Title *</label>
            <input
              value={bookTitle}
              onChange={(e) => setBookTitle(e.target.value)}
              placeholder="e.g. The Name of the Wind"
              className="form-input"
            />
          </div>
          <div>
            <label className="form-label">Author</label>
            <input
              value={author}
              onChange={(e) => setAuthor(e.target.value)}
              placeholder="e.g. Patrick Rothfuss"
              className="form-input"
            />
          </div>
        </div>
        <div className="form-field">
          <label className="form-label">What did you love about it?</label>
          <textarea
            value={liked}
            onChange={(e) => setLiked(e.target.value)}
            rows={2}
            placeholder="e.g. The world-building, the magic system, the unreliable narrator..."
            className="form-input form-textarea"
          />
        </div>
        <div className="form-field">
          <label className="form-label">
            Mood / Genre Filter <span className="label-optional">(optional)</span>
          </label>
          <select
            value={genre}
            onChange={(e) => setGenre(e.target.value)}
            className={`form-select ${genre ? "form-select-chosen" : ""}`}
          >
            <option value="">Any mood / genre</option>
            <option value="same genre only">Same genre only</option>
            <option value="lighter read">Lighter read</option>
            <option value="darker and more intense">Darker & more intense</option>
            <option value="page-turner, fast paced">Page-turner / fast-paced</option>
            <option value="literary and slow-burn">Literary & slow-burn</option>
            <option value="cozy and comforting">Cozy & comforting</option>
          </select>
        </div>
        <div className="form-field">
          <label className="checkbox-row">
            <input
              type="checkbox"
              checked={addToAlreadyRead}
              onChange={(e) => setAddToAlreadyRead(e.target.checked)}
              className="checkbox-input"
            />
            <span className="checkbox-label">Add this to Already Read</span>
          </label>
        </div>
        {error && <div className="error-msg">{error}</div>}
        {confirmMsg && <div className="confirm-msg">{confirmMsg}</div>}
        <div className="button-row">
          <button
            onClick={getSuggestions}
            disabled={loading}
            className={`btn-primary-lg ${loading ? "btn-disabled" : ""}`}
          >
            {loading ? "Finding books…" : "Get Recommendations"}
          </button>
          {suggestions.length > 0 && !loading && (
            <button onClick={getSuggestions} className="btn-reroll">
              ↻ Re-roll
            </button>
          )}
        </div>
      </div>

      {suggestions.length > 0 && (
        <div>
          <h3 className="section-title">Your Recommendations</h3>
          {suggestions.map((s, i) => {
            const saved = isSaved(s.title);
            const inRead = readBooks.some((b) => b.title.toLowerCase() === s.title.toLowerCase());
            const inWant = wantBooks.some((b) => b.title.toLowerCase() === s.title.toLowerCase());
            return (
              <SuggestionCard
                key={i}
                suggestion={s}
                index={i}
                isSaved={saved}
                inRead={inRead}
                inWant={inWant}
                onMark={markBook}
              />
            );
          })}
        </div>
      )}
    </>
  );
}

function BookList({ books, list, emptyIcon, emptyText, title, subtitle, onRemove, onUpdateRating, onUpdateNotes }) {
  return (
    <>
      <h2 className="panel-title no-bg">{title}</h2>
      <p className="panel-subtitle no-bg">{subtitle}</p>
      {books.length === 0 ? (
        <div className="empty-state">
          <div className="empty-icon">{emptyIcon}</div>
          <div className="empty-text" dangerouslySetInnerHTML={{ __html: emptyText }} />
        </div>
      ) : (
        books.map((b) => (
          <BookCard
            key={b.id}
            book={b}
            list={list}
            onRemove={onRemove}
            onUpdateRating={onUpdateRating}
            onUpdateNotes={onUpdateNotes}
          />
        ))
      )}
    </>
  );
}

function App() {
  const [tab, setTab] = React.useState("Discover");
  const readCol = useCollection("jeffreads_read");
  const wantCol = useCollection("jeffreads_want");

  const readBooks = (readCol.items || []).map((it) => ({ id: it.id, ...(it.value || {}) }));
  const wantBooks = (wantCol.items || []).map((it) => ({ id: it.id, ...(it.value || {}) }));

  const addRead = (book) => readCol.add(book);
  const addWant = (book) => wantCol.add(book);
  const removeRead = (id) => readCol.remove(id);
  const removeWant = (id) => wantCol.remove(id);

  const updateRating = (id, rating) => {
    const b = readBooks.find((x) => x.id === id);
    if (!b) return;
    const { id: _, ...rest } = b;
    readCol.update(id, { ...rest, rating });
  };

  const updateNotesRead = (id, notes) => {
    const b = readBooks.find((x) => x.id === id);
    if (!b) return;
    const { id: _, ...rest } = b;
    readCol.update(id, { ...rest, notes });
  };

  const updateNotesWant = (id, notes) => {
    const b = wantBooks.find((x) => x.id === id);
    if (!b) return;
    const { id: _, ...rest } = b;
    wantCol.update(id, { ...rest, notes });
  };

  return (
    <div className="app">
      <header className="app-header">
        <div className="header-inner">
          <div className="brand">
            <span className="brand-icon">📚</span>
            <span className="brand-name">Myreads</span>
          </div>
          <nav className="tabs">
            {TABS.map((t) => (
              <button
                key={t}
                onClick={() => setTab(t)}
                className={`tab-btn ${tab === t ? "tab-active" : ""}`}
              >
                {t}
                {t === "Want to Read" && wantBooks.length > 0 ? ` (${wantBooks.length})` : ""}
                {t === "Previously Read" && readBooks.length > 0 ? ` (${readBooks.length})` : ""}
              </button>
            ))}
          </nav>
        </div>
      </header>

      <main className="main">
        {tab === "Discover" && (
          <DiscoverTab readBooks={readBooks} wantBooks={wantBooks} addRead={addRead} addWant={addWant} />
        )}

        {tab === "Want to Read" && (
          <BookList
            books={wantBooks}
            list="want"
            emptyIcon="🔖"
            emptyText="No books saved yet.<br />Head to Discover to find your next read."
            title="Want to Read"
            subtitle={`Your reading queue — ${wantBooks.length} book${wantBooks.length !== 1 ? "s" : ""}`}
            onRemove={removeWant}
            onUpdateRating={() => {}}
            onUpdateNotes={updateNotesWant}
          />
        )}

        {tab === "Previously Read" && (
          <BookList
            books={readBooks}
            list="read"
            emptyIcon="📚"
            emptyText="No books logged yet.<br />Mark suggestions as read to track them here."
            title="Previously Read"
            subtitle={`Your reading history — ${readBooks.length} book${readBooks.length !== 1 ? "s" : ""}`}
            onRemove={removeRead}
            onUpdateRating={updateRating}
            onUpdateNotes={updateNotesRead}
          />
        )}
      </main>

      <footer className="app-footer">Myreads — Your personal reading companion</footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);