/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * RecipeList — Browse and search cocktail recipes [components/RecipeList.jsx]
 * RecipeDetail — View full recipe with shaker calculator [components/RecipeDetail.jsx]
 * RecipeForm — Add/edit cocktail recipes [components/RecipeForm.jsx]
 * @end-component-map */

import { useState, useMemo, useEffect } from 'react';
import { useCollection, useReactions, share } from '@deplixo/sdk';
import { RecipeList } from './components/RecipeList.jsx';
import { RecipeDetail } from './components/RecipeDetail.jsx';
import { RecipeForm } from './components/RecipeForm.jsx';

function ContributorIdentity({ contributor, onChange }) {
  return (
    <div className="contributor-identity" aria-label="Contributor identity">
      <div className="contributor-avatar" title={contributor.name}>
        {contributor.avatar}
      </div>
      <div className="contributor-meta">
        <label className="contributor-label" htmlFor="contributor-name">
          Contributor
        </label>
        <input
          id="contributor-name"
          className="contributor-name-input"
          type="text"
          value={contributor.name}
          onChange={(e) => onChange({ ...contributor, name: e.target.value })}
          placeholder="Your name"
        />
      </div>
    </div>
  );
}

function FavoriteShareBar({ recipe, contributor, favorite, onToggleFavorite, onShare, collectionCount = 0 }) {
  if (!recipe) return null;

  return (
    <div className="favorite-share-panel" aria-label="Favorite and share recipe">
      <div className="favorite-share-left">
        <button
          type="button"
          className={`favorite-btn${favorite ? ' active' : ''}`}
          onClick={onToggleFavorite}
          aria-pressed={favorite}
          title={favorite ? 'Remove from My Favorites' : 'Add to My Favorites'}
        >
          <span className="favorite-emoji">{favorite ? '★' : '☆'}</span>
          <span>{favorite ? 'In My Favorites' : 'Add to Favorites'}</span>
        </button>
        <div className="favorite-share-text">
          <strong>Share this recipe</strong>
          <span>{collectionCount ? `Saved in ${collectionCount} collection${collectionCount === 1 ? '' : 's'}. ` : ''}Copy a link or text to send to others.</span>
        </div>
      </div>
      <button type="button" className="secondary-btn share-btn" onClick={onShare}>
        Share / Copy Link
      </button>
    </div>
  );
}

function ReactionBar({ targetId, contributor }) {
  const { counts, toggle, loading, userReactions } = useReactions(targetId);
  const reactions = [
    { key: 'delicious', emoji: '😋', label: 'Delicious' },
    { key: 'strong', emoji: '💪', label: 'Strong' },
    { key: 'refreshing', emoji: '🫧', label: 'Refreshing' },
    { key: 'artistic', emoji: '🎨', label: 'Artistic' },
  ];

  if (loading) return null;

  return (
    <div className="reaction-panel" aria-label="Recipe reactions">
      <div className="reaction-panel-header">
        <h3>Reactions</h3>
        {contributor?.name && (
          <span className="reaction-panel-note">Reacting as {contributor.name}</span>
        )}
      </div>
      <div className="reaction-bar" aria-label="Reaction types">
        {reactions.map((reaction) => {
          const active = !!userReactions?.[reaction.key];
          const count = counts?.[reaction.key] || 0;
          return (
            <button
              key={reaction.key}
              className={`reaction-btn${active ? ' active' : ''}`}
              onClick={() => toggle(reaction.key)}
              title={contributor?.name ? `React as ${contributor.name}` : 'React'}
              aria-pressed={active}
            >
              <span className="reaction-emoji">{reaction.emoji}</span>
              <span className="reaction-label">{reaction.label}</span>
              <span className="reaction-count">{count || ''}</span>
              {contributor?.name && active && (
                <span className="reaction-byline">{contributor.name}</span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function CollectionsPanel({
  recipe,
  collections = [],
  recipeCollectionIds = [],
  onToggleCollection,
  onCreateCollection,
  onRenameCollection,
  onDeleteCollection,
}) {
  const [newCollectionName, setNewCollectionName] = useState('');
  const [renameValues, setRenameValues] = useState({});

  if (!recipe) return null;

  const handleCreate = async () => {
    const name = newCollectionName.trim();
    if (!name) return;
    await onCreateCollection(name);
    setNewCollectionName('');
  };

  return (
    <div className="collections-panel" aria-label="Recipe collections">
      <div className="collections-panel-header">
        <div>
          <h3>Collections</h3>
          <p>Add this recipe to one or more collections.</p>
        </div>
      </div>

      <div className="collection-list">
        {collections.map((collection) => {
          const active = recipeCollectionIds.includes(collection.id || collection._id);
          const collectionId = collection.id || collection._id;
          return (
            <div className={`collection-row${active ? ' active' : ''}`} key={collectionId}>
              <button
                type="button"
                className="collection-toggle-btn"
                onClick={() => onToggleCollection(collection)}
                aria-pressed={active}
              >
                <span className="collection-check">{active ? '✓' : '+'}</span>
                <span className="collection-name">{collection.name}</span>
                {collection.isDefault && <span className="collection-default-tag">Default</span>}
              </button>
              {!collection.isDefault && (
                <div className="collection-edit-actions">
                  <input
                    className="collection-rename-input"
                    type="text"
                    value={renameValues[collectionId] ?? collection.name}
                    onChange={(e) => setRenameValues({ ...renameValues, [collectionId]: e.target.value })}
                  />
                  <button
                    type="button"
                    className="secondary-btn collection-small-btn"
                    onClick={() => onRenameCollection(collection, renameValues[collectionId] ?? collection.name)}
                  >
                    Rename
                  </button>
                  <button
                    type="button"
                    className="danger-btn collection-small-btn"
                    onClick={() => onDeleteCollection(collection)}
                  >
                    Delete
                  </button>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="collection-create-row">
        <input
          className="collection-create-input"
          type="text"
          value={newCollectionName}
          onChange={(e) => setNewCollectionName(e.target.value)}
          placeholder="New collection name"
        />
        <button type="button" className="primary-btn" onClick={handleCreate}>
          Create Collection
        </button>
      </div>
    </div>
  );
}

function App() {
  const [view, setView] = useState('list');
  const [selectedRecipeId, setSelectedRecipeId] = useState(null);
  const [editRecipeId, setEditRecipeId] = useState(null);
  const [contributor, setContributor] = useState({ name: 'Guest Mixer', avatar: '🧑‍🍳' });
  const { items: favoriteLinks = [], add: addFavoriteLink, update: updateFavoriteLink } = useCollection('favorite-recipe-links', { personal: true });
  const { items: recipeCollections = [], add: addRecipeCollection, update: updateRecipeCollection, remove: removeRecipeCollection } = useCollection('recipe-collections', { personal: true });
  useCollection('contributor-profile', { personal: true });
  useCollection('recipe-reactions', { personal: false });

  useEffect(() => {
    if (typeof window === 'undefined') return;
    const params = new URLSearchParams(window.location.search);
    const recipeId = params.get('recipe');
    const action = params.get('action');
    if (recipeId && action === 'view') {
      setSelectedRecipeId(recipeId);
      setView('detail');
    }
  }, []);

  const navigate = (newView, recipeId = null) => {
    setView(newView);
    if (newView === 'detail') setSelectedRecipeId(recipeId);
    if (newView === 'edit') setEditRecipeId(recipeId);
    if (newView === 'add') setEditRecipeId(null);
  };

  const favoriteSet = useMemo(() => new Set((favoriteLinks || []).filter((item) => !item.archived).map((item) => item.recipeId)), [favoriteLinks]);
  const defaultCollection = useMemo(() => {
    const existing = (recipeCollections || []).find((c) => c.isDefault && c.name === 'My Favorites');
    return existing || null;
  }, [recipeCollections]);

  const getRecipeCollections = (recipeId) => (recipeCollections || []).filter((collection) => Array.isArray(collection.recipeIds) && collection.recipeIds.includes(recipeId) && !collection.archived);

  const toggleFavorite = async (recipe) => {
    const recipeId = recipe?.id || recipe?._id;
    if (!recipeId) return;
    const existing = (favoriteLinks || []).find((item) => item.recipeId === recipeId);
    if (existing) {
      await updateFavoriteLink(existing.id || existing._id, { ...existing, archived: !existing.archived, updatedAt: new Date().toISOString() });
    } else {
      await addFavoriteLink({
        recipeId,
        recipeName: recipe.name || recipe.title || 'Recipe',
        recipeSnapshot: {
          id: recipeId,
          name: recipe.name || recipe.title || 'Recipe',
          glass: recipe.glass || '',
          spiritBase: recipe.spiritBase || recipe.spirit || recipe.baseSpirit || '',
        },
        createdAt: new Date().toISOString(),
        archived: false,
      });
    }
  };

  const createCollection = async (name) => {
    const trimmed = String(name || '').trim();
    if (!trimmed) return;
    await addRecipeCollection({
      name: trimmed,
      recipeIds: [],
      isDefault: false,
      archived: false,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    });
  };

  const renameCollection = async (collection, nextName) => {
    const collectionId = collection?.id || collection?._id;
    const trimmed = String(nextName || '').trim();
    if (!collectionId || !trimmed || collection.isDefault) return;
    await updateRecipeCollection(collectionId, { ...collection, name: trimmed, updatedAt: new Date().toISOString() });
  };

  const deleteCollection = async (collection) => {
    const collectionId = collection?.id || collection?._id;
    if (!collectionId || collection.isDefault) return;
    await removeRecipeCollection(collectionId);
  };

  const ensureDefaultCollection = async () => {
    if (defaultCollection) return defaultCollection;
    const created = await addRecipeCollection({
      name: 'My Favorites',
      recipeIds: [],
      isDefault: true,
      archived: false,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    });
    return created;
  };

  const setRecipeInCollection = async (collection, recipe, shouldAdd) => {
    const collectionId = collection?.id || collection?._id;
    const recipeId = recipe?.id || recipe?._id;
    if (!collectionId || !recipeId) return;
    const nextIds = new Set(collection.recipeIds || []);
    if (shouldAdd) nextIds.add(recipeId);
    else nextIds.delete(recipeId);
    await updateRecipeCollection(collectionId, { ...collection, recipeIds: Array.from(nextIds), updatedAt: new Date().toISOString() });
  };

  const toggleRecipeCollection = async (recipe, collection) => {
    const recipeId = recipe?.id || recipe?._id;
    if (!recipeId) return;
    const collectionId = collection?.id || collection?._id;
    const current = (collection?.recipeIds || []).includes(recipeId);
    await setRecipeInCollection(collection, recipe, !current);

    if (collection?.isDefault || collection?.name === 'My Favorites') {
      const existing = (favoriteLinks || []).find((item) => item.recipeId === recipeId);
      if (current && existing) {
        await updateFavoriteLink(existing.id || existing._id, { ...existing, archived: true, updatedAt: new Date().toISOString() });
      } else if (!current && !existing) {
        await addFavoriteLink({
          recipeId,
          recipeName: recipe.name || recipe.title || 'Recipe',
          recipeSnapshot: {
            id: recipeId,
            name: recipe.name || recipe.title || 'Recipe',
            glass: recipe.glass || '',
            spiritBase: recipe.spiritBase || recipe.spirit || recipe.baseSpirit || '',
          },
          createdAt: new Date().toISOString(),
          archived: false,
        });
      } else if (!current && existing && existing.archived) {
        await updateFavoriteLink(existing.id || existing._id, { ...existing, archived: false, updatedAt: new Date().toISOString() });
      }
    }
  };

  const shareRecipe = async (recipe) => {
    const recipeId = recipe?.id || recipe?._id;
    if (!recipeId) return;
    const baseUrl = typeof window !== 'undefined' ? window.location.origin + window.location.pathname : '';
    const url = `${baseUrl}?action=view&recipe=${encodeURIComponent(recipeId)}`;
    const text = `Check out this cocktail recipe: ${recipe.name || recipe.title || 'Recipe'}\n${url}`;

    try {
      if (navigator?.share) {
        await navigator.share({ title: recipe.name || recipe.title || 'Recipe', text, url });
        return;
      }
      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(text);
        return;
      }
    } catch (e) {
    }
    window.alert(text);
  };

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          {view !== 'list' && (
            <button className="back-btn" onClick={() => navigate('list')}>
              ← Back
            </button>
          )}
          <div className="logo">
            <span className="logo-icon">🍸</span>
            <h1>Mixology</h1>
          </div>
          {view === 'list' && (
            <button className="add-btn" onClick={() => navigate('add')}>
              + New Recipe
            </button>
          )}
        </div>
      </header>

      <main className="app-main">
        <section className="contributor-panel">
          <ContributorIdentity contributor={contributor} onChange={setContributor} />
        </section>

        {view === 'list' && (
          <RecipeList
            onSelect={(id) => navigate('detail', id)}
            onAdd={() => navigate('add')}
            favoriteRecipeIds={Array.from(favoriteSet)}
            onToggleFavorite={toggleFavorite}
            onShareRecipe={shareRecipe}
            collections={recipeCollections}
            onCreateCollection={createCollection}
            onToggleRecipeCollection={toggleRecipeCollection}
            onRenameCollection={renameCollection}
            onDeleteCollection={deleteCollection}
          />
        )}
        {view === 'detail' && (
          <>
            <RecipeDetail
              recipeId={selectedRecipeId}
              onEdit={(id) => navigate('edit', id)}
              onBack={() => navigate('list')}
              favoriteRecipeIds={Array.from(favoriteSet)}
              onToggleFavorite={toggleFavorite}
              onShareRecipe={shareRecipe}
              collections={recipeCollections}
              onToggleRecipeCollection={toggleRecipeCollection}
            />
            <ReactionBar targetId={selectedRecipeId} contributor={contributor} />
          </>
        )}
        {(view === 'add' || view === 'edit') && (
          <RecipeForm
            recipeId={editRecipeId}
            onSave={() => navigate('list')}
            onCancel={() => navigate('list')}
          />
        )}
      </main>
    </div>
  );
}

function RecipeListFilters({ filters, onChange, onClear, collections = [] }) {
  const spiritOptions = ['All Spirits', 'Gin', 'Vodka', 'Rum', 'Tequila', 'Whiskey', 'Brandy', 'Mezcal', 'Cognac', 'Other'];
  const difficultyOptions = ['All Levels', 'Easy', 'Medium', 'Hard'];
  const occasionOptions = ['All Occasions', 'Apéritif', 'After Dinner', 'Brunch', 'Celebration', 'Date Night', 'Party', 'Relaxing', 'Summer', 'Winter'];

  const updateFilter = (key, value) => {
    onChange({ ...filters, [key]: value });
  };

  return (
    <div className="recipe-filters" aria-label="Recipe filters">
      <div className="filter-grid">
        <div className="filter-group">
          <label className="filter-label" htmlFor="collection-filter">Collection</label>
          <select
            id="collection-filter"
            className="filter-select"
            value={filters.collectionId}
            onChange={(e) => updateFilter('collectionId', e.target.value)}
          >
            <option value="">All Collections</option>
            {collections.filter((collection) => !collection.archived).map((collection) => (
              <option key={collection.id || collection._id} value={collection.id || collection._id}>
                {collection.name}
              </option>
            ))}
          </select>
        </div>

        <div className="filter-group">
          <label className="filter-label" htmlFor="spirit-base-filter">Spirit Base</label>
          <select
            id="spirit-base-filter"
            className="filter-select"
            value={filters.spiritBase}
            onChange={(e) => updateFilter('spiritBase', e.target.value)}
          >
            {spiritOptions.map((option) => (
              <option key={option} value={option === 'All Spirits' ? '' : option}>
                {option}
              </option>
            ))}
          </select>
        </div>

        <div className="filter-group">
          <label className="filter-label" htmlFor="difficulty-filter">Difficulty</label>
          <select
            id="difficulty-filter"
            className="filter-select"
            value={filters.difficulty}
            onChange={(e) => updateFilter('difficulty', e.target.value)}
          >
            {difficultyOptions.map((option) => (
              <option key={option} value={option === 'All Levels' ? '' : option}>
                {option}
              </option>
            ))}
          </select>
        </div>

        <div className="filter-group">
          <label className="filter-label" htmlFor="occasion-filter">Occasion</label>
          <select
            id="occasion-filter"
            className="filter-select"
            value={filters.occasion}
            onChange={(e) => updateFilter('occasion', e.target.value)}
          >
            {occasionOptions.map((option) => (
              <option key={option} value={option === 'All Occasions' ? '' : option}>
                {option}
              </option>
            ))}
          </select>
        </div>

        <button type="button" className="secondary-btn filter-clear-btn" onClick={onClear}>
          Clear Filters
        </button>
      </div>
    </div>
  );
}

function RecipeListWithEnhancedSearch({ onSelect, onAdd, favoriteRecipeIds = [], onToggleFavorite, onShareRecipe, collections = [], onCreateCollection, onToggleRecipeCollection, onRenameCollection, onDeleteCollection }) {
  const { items: recipes = [], loading } = useCollection('recipes', { personal: false });
  const [searchTerm, setSearchTerm] = useState('');
  const [filters, setFilters] = useState({ spiritBase: '', difficulty: '', occasion: '', collectionId: '' });

  const normalized = (value) => String(value || '').toLowerCase().trim();

  const filteredRecipes = useMemo(() => {
    const query = normalized(searchTerm);
    const selectedCollection = filters.collectionId;

    return recipes.filter((recipe) => {
      const recipeId = recipe.id || recipe._id;
      const title = normalized(recipe.name || recipe.title);
      const ingredients = Array.isArray(recipe.ingredients)
        ? recipe.ingredients.map((ing) => normalized(ing.name || ing)).join(' ')
        : normalized(recipe.ingredients);
      const notes = normalized(recipe.notes);
      const instructions = normalized(recipe.instructions);
      const spiritBase = normalized(recipe.spiritBase || recipe.spirit || recipe.baseSpirit);
      const difficulty = normalized(recipe.difficulty);
      const occasion = normalized(recipe.occasion || recipe.occassion);
      const isInSelectedCollection = !selectedCollection || (collections || []).some((collection) => (collection.id || collection._id) === selectedCollection && Array.isArray(collection.recipeIds) && collection.recipeIds.includes(recipeId) && !collection.archived);

      const matchesSearch =
        !query ||
        title.includes(query) ||
        ingredients.includes(query) ||
        notes.includes(query) ||
        instructions.includes(query) ||
        spiritBase.includes(query) ||
        difficulty.includes(query) ||
        occasion.includes(query);

      const matchesSpirit = !filters.spiritBase || spiritBase === normalized(filters.spiritBase);
      const matchesDifficulty = !filters.difficulty || difficulty === normalized(filters.difficulty);
      const matchesOccasion = !filters.occasion || occasion === normalized(filters.occasion);

      return matchesSearch && matchesSpirit && matchesDifficulty && matchesOccasion && isInSelectedCollection;
    });
  }, [recipes, searchTerm, filters, collections]);

  const clearFilters = () => {
    setFilters({ spiritBase: '', difficulty: '', occasion: '', collectionId: '' });
    setSearchTerm('');
  };

  return (
    <div className="recipe-list-page">
      <div className="search-bar-container">
        <div className="search-input-wrapper">
          <span className="search-icon">🔎</span>
          <input
            className="search-input"
            type="search"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            placeholder="Search recipes, ingredients, spirit base, difficulty, or occasion"
            aria-label="Search recipes"
          />
          {searchTerm && (
            <button className="clear-search" onClick={() => setSearchTerm('')} aria-label="Clear search">
              ×
            </button>
          )}
        </div>
      </div>

      <RecipeListFilters filters={filters} onChange={setFilters} onClear={clearFilters} collections={collections} />

      <div className="collections-manager-bar">
        <button type="button" className="secondary-btn" onClick={async () => {
          if (onCreateCollection) {
            const name = window.prompt('Create a new collection', 'My Collection');
            if (name) await onCreateCollection(name);
          }
        }}>
          + New Collection
        </button>
        {collections?.filter((c) => !c.archived).slice(0, 3).map((collection) => (
          <span key={collection.id || collection._id} className="collection-preview-chip">
            {collection.name}
          </span>
        ))}
      </div>

      <div className="stats-bar">
        {loading ? 'Loading recipes…' : `${filteredRecipes.length} recipe${filteredRecipes.length === 1 ? '' : 's'} found`}
      </div>

      {filteredRecipes.length > 0 ? (
        <div className="recipe-grid">
          {filteredRecipes.map((recipe) => {
            const recipeId = recipe.id || recipe._id;
            const favorite = favoriteRecipeIds.includes(recipeId);
            const recipeCollections = (collections || []).filter((collection) => Array.isArray(collection.recipeIds) && collection.recipeIds.includes(recipeId) && !collection.archived);
            return (
              <article key={recipeId} className="recipe-card" onClick={() => onSelect(recipeId)}>
                <div className="card-img">
                  {recipe.photoUrl ? (
                    <img src={recipe.photoUrl} alt={recipe.name || recipe.title || 'Recipe photo'} />
                  ) : (
                    <div className="placeholder-img"><span>🍹</span></div>
                  )}
                </div>
                <div className="card-body">
                  <div className="card-title-row">
                    <h3 className="card-title">{recipe.name || recipe.title}</h3>
                  </div>
                  <div className="card-meta">
                    {recipe.glass && <span className="glass-badge">{recipe.glass}</span>}
                    {recipe.spiritBase && <span className="glass-badge">{recipe.spiritBase}</span>}
                    {recipe.difficulty && <span className="glass-badge">{recipe.difficulty}</span>}
                    {recipe.occasion && <span className="glass-badge">{recipe.occasion}</span>}
                  </div>
                  <div className="recipe-tags-row">
                    {recipeCollections.slice(0, 3).map((collection) => (
                      <span key={collection.id || collection._id} className="recipe-tag">{collection.name}</span>
                    ))}
                  </div>
                  <div className="recipe-card-actions" onClick={(e) => e.stopPropagation()}>
                    <button
                      type="button"
                      className={`favorite-chip${favorite ? ' active' : ''}`}
                      onClick={() => onToggleFavorite?.(recipe)}
                      aria-pressed={favorite}
                      title={favorite ? 'Remove favorite' : 'Add favorite'}
                    >
                      {favorite ? '★ Favorited' : '☆ Favorite'}
                    </button>
                    <button
                      type="button"
                      className="share-chip"
                      onClick={() => onShareRecipe?.(recipe)}
                      title="Share recipe"
                    >
                      Share
                    </button>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      ) : (
        <div className="empty-state">
          <div className="empty-icon">🍸</div>
          <h2>No recipes found</h2>
          <p>Try a different search term or adjust the filters.</p>
          <button className="primary-btn" onClick={onAdd}>+ New Recipe</button>
        </div>
      )}
    </div>
  );
}

export { App, RecipeListWithEnhancedSearch as RecipeList };

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