/* @component-map
 * App — Main container, view switching between grid and slideshow [app.jsx]
 * ArtworkGrid — Grid browse view with artwork cards [components/ArtworkGrid.jsx]
 * Slideshow — Full-screen slideshow with Ken Burns effect [components/Slideshow.jsx]
 * AddArtworkModal — Modal form for uploading new artworks [components/AddArtworkModal.jsx]
 * EmptyState — Friendly empty state when no artworks exist [components/EmptyState.jsx]
 * @end-component-map */

import { useEffect, useMemo, useRef, useState } from 'react';
import { generatePDF, useCollection, useReactions } from '@deplixo/sdk';
import { ArtworkGrid } from './components/ArtworkGrid.jsx';
import { Slideshow } from './components/Slideshow.jsx';
import { AddArtworkModal } from './components/AddArtworkModal.jsx';
import { EmptyState } from './components/EmptyState.jsx';

function createGuestId() {
  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
    return `guest-${crypto.randomUUID()}`;
  }
  return `guest-${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`;
}

function getSafeGuestName(name) {
  const cleaned = String(name || '').trim().replace(/\s+/g, ' ');
  return cleaned.slice(0, 32);
}

function getArtworkId(artwork) {
  return artwork?.id || artwork?._id || artwork?.artworkId;
}

function safeFilename(value) {
  return String(value || 'artwork')
    .trim()
    .replace(/[^a-z0-9-_]+/gi, '_')
    .replace(/_+/g, '_')
    .replace(/^_|_$/g, '')
    .slice(0, 64) || 'artwork';
}

function normalizeArtworkList(items) {
  return (items || []).map((item, index) => {
    const artworkId = getArtworkId(item) || `artwork-${index + 1}`;
    return {
      ...item,
      artworkId,
      title: item.title || item.name || 'Untitled',
      artist: item.artist || item.creator || 'Unknown artist',
      medium: item.medium || item.materials || '',
      year: item.year || item.date || '',
      description: item.description || item.statement || '',
    };
  });
}

function getQrUrl(artworkId) {
  const encoded = encodeURIComponent(String(artworkId || ''));
  return `https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=${encoded}`;
}

function PopularPiecesChart({ items }) {
  const reactionData = useMemo(() => {
    return (items || [])
      .map((item) => {
        const artworkId = getArtworkId(item);
        if (!artworkId) return null;
        return { item, artworkId, title: item.title || item.name || 'Untitled' };
      })
      .filter(Boolean);
  }, [items]);

  const reactionEntries = reactionData.map(({ item, artworkId, title }) => {
    const { counts } = useReactions(artworkId);
    const totalReactions = Object.values(counts || {}).reduce((sum, value) => sum + (Number(value) || 0), 0);
    return { item, title, artworkId, totalReactions };
  });

  const topPieces = reactionEntries.sort((a, b) => b.totalReactions - a.totalReactions).slice(0, 5);

  if (!topPieces.length) return null;

  const max = Math.max(...topPieces.map((piece) => piece.totalReactions), 1);

  return (
    <section className="popular-pieces-panel" aria-label="Most popular pieces">
      <div className="popular-pieces-header">
        <div>
          <h2 className="popular-pieces-title">Most popular pieces</h2>
          <p className="popular-pieces-subtitle">Ranked by total reactions from visitors.</p>
        </div>
      </div>
      <div className="popular-pieces-list">
        {topPieces.map((piece, index) => (
          <div className="popular-piece-row" key={piece.artworkId}>
            <div className="popular-piece-rank">#{index + 1}</div>
            <div className="popular-piece-info">
              <div className="popular-piece-title">{piece.title}</div>
              <div className="popular-piece-count">{piece.totalReactions} reaction{piece.totalReactions === 1 ? '' : 's'}</div>
            </div>
            <div className="popular-piece-bar-track" aria-hidden="true">
              <div
                className="popular-piece-bar-fill"
                style={{ width: `${(piece.totalReactions / max) * 100}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function PdfCatalogExport({ items }) {
  const reportRef = useRef(null);
  const [includeQrCodes, setIncludeQrCodes] = useState(true);
  const [exporting, setExporting] = useState(false);

  const catalogItems = useMemo(() => normalizeArtworkList(items), [items]);

  const handleExport = async () => {
    if (!reportRef.current || exporting) return;
    setExporting(true);
    try {
      await generatePDF(reportRef.current, {
        filename: `gallery-catalog-${new Date().toISOString().slice(0, 10)}.pdf`,
        margin: 10,
      });
    } finally {
      setExporting(false);
    }
  };

  return (
    <section className="catalog-export-panel" aria-label="PDF catalog export">
      <div className="catalog-export-header">
        <div>
          <h2 className="catalog-export-title">PDF catalog export</h2>
          <p className="catalog-export-subtitle">Generate a printable catalog for the full collection.</p>
        </div>
        <div className="catalog-export-actions">
          <label className="catalog-export-toggle">
            <input
              type="checkbox"
              checked={includeQrCodes}
              onChange={(e) => setIncludeQrCodes(e.target.checked)}
            />
            <span>Include QR codes</span>
          </label>
          <button className="btn btn-secondary" onClick={handleExport} disabled={exporting || catalogItems.length === 0}>
            <span className="btn-icon">⤓</span> {exporting ? 'Generating…' : 'Export PDF'}
          </button>
        </div>
      </div>

      <div className="catalog-export-summary">
        <span>{catalogItems.length} artwork{catalogItems.length === 1 ? '' : 's'} in catalog</span>
      </div>

      <div ref={reportRef} className="catalog-pdf-report">
        <div className="catalog-pdf-cover">
          <h1>Gallery Catalog</h1>
          <p>{catalogItems.length} artwork{catalogItems.length === 1 ? '' : 's'} · Generated {new Date().toLocaleString()}</p>
        </div>

        <div className="catalog-pdf-list">
          {catalogItems.map((artwork, index) => (
            <article className="catalog-pdf-item" key={artwork.artworkId || index}>
              <div className="catalog-pdf-item-header">
                <div>
                  <div className="catalog-pdf-index">#{index + 1}</div>
                  <h2 className="catalog-pdf-title">{artwork.title}</h2>
                  <div className="catalog-pdf-artist">{artwork.artist}</div>
                </div>
                {includeQrCodes && artwork.artworkId && (
                  <div className="catalog-pdf-qr-wrap">
                    <img
                      className="catalog-pdf-qr"
                      src={getQrUrl(artwork.artworkId)}
                      alt={`QR code for ${artwork.title}`}
                    />
                    <div className="catalog-pdf-qr-caption">QR</div>
                  </div>
                )}
              </div>

              <div className="catalog-pdf-meta-grid">
                <div><strong>Year:</strong> {artwork.year || '—'}</div>
                <div><strong>Medium:</strong> {artwork.medium || '—'}</div>
                <div><strong>ID:</strong> {artwork.artworkId}</div>
                {artwork.tags && <div><strong>Tags:</strong> {Array.isArray(artwork.tags) ? artwork.tags.join(', ') : String(artwork.tags)}</div>}
              </div>

              {artwork.description ? (
                <p className="catalog-pdf-description">{artwork.description}</p>
              ) : (
                <p className="catalog-pdf-description catalog-pdf-description-empty">No description provided.</p>
              )}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  const { items, loading, add, remove, update } = useCollection('artworks', { personal: true });
  const { items: identityItems, loading: identityLoading, add: addIdentity, update: updateIdentity } = useCollection('guest_identity', { personal: true });
  const { items: favoriteItems, loading: favoritesLoading, add: addFavorite, remove: removeFavorite } = useCollection('guest_favorites', { personal: true });
  const { items: guestbookItems, loading: guestbookLoading, add: addGuestbook } = useCollection('guestbook_comments', { personal: true });
  const [view, setView] = useState('grid');
  const [showAddModal, setShowAddModal] = useState(false);
  const [slideshowStart, setSlideshowStart] = useState(0);
  const [guestIdentity, setGuestIdentity] = useState(null);
  const [identityName, setIdentityName] = useState('');
  const [identityDraft, setIdentityDraft] = useState('');
  const [identityReady, setIdentityReady] = useState(false);
  const [showGuestbook, setShowGuestbook] = useState(false);
  const [guestbookDraft, setGuestbookDraft] = useState('');
  const [guestbookContext, setGuestbookContext] = useState('');

  const startSlideshow = (index = 0) => {
    setSlideshowStart(index);
    setView('slideshow');
  };

  useEffect(() => {
    if (identityLoading || identityReady) return;

    const existing = identityItems?.[0];
    if (existing) {
      setGuestIdentity(existing);
      setIdentityName(existing.displayName || '');
      setIdentityDraft(existing.displayName || '');
      setIdentityReady(true);
      return;
    }

    const created = {
      guestId: createGuestId(),
      displayName: '',
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    };

    addIdentity(created);
    setGuestIdentity(created);
    setIdentityName('');
    setIdentityDraft('');
    setIdentityReady(true);
  }, [identityItems, identityLoading, identityReady, addIdentity]);

  const displayName = useMemo(() => {
    return getSafeGuestName(identityName) || 'Guest';
  }, [identityName]);

  const favoriteMap = useMemo(() => {
    const map = new Map();
    (favoriteItems || []).forEach((item) => {
      const artworkId = item.artworkId || item.targetId;
      if (artworkId) map.set(artworkId, item);
    });
    return map;
  }, [favoriteItems]);

  const favoriteCounts = useMemo(() => {
    const counts = {};
    (favoriteItems || []).forEach((item) => {
      const artworkId = item.artworkId || item.targetId;
      if (!artworkId) return;
      counts[artworkId] = (counts[artworkId] || 0) + 1;
    });
    return counts;
  }, [favoriteItems]);

  const guestbookEntries = useMemo(() => {
    return (guestbookItems || [])
      .map((entry) => ({
        ...entry,
        createdAt: entry.createdAt || entry.updatedAt || '',
        authorName: getSafeGuestName(entry.displayName || entry.authorName || '') || 'Guest',
      }))
      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
  }, [guestbookItems]);

  const isFavorited = (artwork) => {
    const artworkId = getArtworkId(artwork);
    return artworkId ? favoriteMap.has(artworkId) : false;
  };

  const toggleFavorite = (artwork) => {
    const artworkId = getArtworkId(artwork);
    if (!artworkId) return;

    const current = guestIdentity || identityItems?.[0];
    const visitorId = current?.guestId || current?.id || current?._id;
    if (!visitorId) return;

    const existingFavorite = favoriteMap.get(artworkId);
    if (existingFavorite) {
      removeFavorite(existingFavorite.id || existingFavorite._id || `${visitorId}-${artworkId}`);
      return;
    }

    addFavorite({
      guestId: visitorId,
      artworkId,
      targetId: artworkId,
      createdAt: new Date().toISOString(),
    });
  };

  const saveIdentityName = () => {
    const nextName = getSafeGuestName(identityDraft);
    const current = guestIdentity || identityItems?.[0];
    const nextIdentity = {
      ...(current || { guestId: createGuestId(), createdAt: new Date().toISOString() }),
      displayName: nextName,
      updatedAt: new Date().toISOString(),
    };

    if (current) {
      updateIdentity(current.id || current._id || current.guestId, nextIdentity);
    } else {
      addIdentity(nextIdentity);
    }

    setGuestIdentity(nextIdentity);
    setIdentityName(nextName);
    setIdentityReady(true);
  };

  const handlePostGuestbook = async () => {
    const message = guestbookDraft.trim();
    if (!message) return;

    const current = guestIdentity || identityItems?.[0];
    const visitorId = current?.guestId || current?.id || current?._id || createGuestId();
    const authorName = getSafeGuestName(current?.displayName || identityName || identityDraft) || 'Guest';

    await addGuestbook({
      guestId: visitorId,
      displayName: authorName,
      message,
      context: guestbookContext.trim() || 'Gallery collection',
      artworkId: null,
      createdAt: new Date().toISOString(),
    });

    setGuestbookDraft('');
  };

  if (loading || identityLoading || favoritesLoading || guestbookLoading || !identityReady) {
    return (
      <div className="loading-screen">
        <div className="loading-icon">🖼️</div>
        <div className="loading-text">Preparing your gallery…</div>
        <div className="loading-bar"><div className="loading-bar-fill"></div></div>
      </div>
    );
  }

  return (
    <div className="app">
      {view === 'slideshow' && items.length > 0 ? (
        <Slideshow
          items={items}
          startIndex={slideshowStart}
          onExit={() => setView('grid')}
          onToggleFavorite={toggleFavorite}
          isFavorited={isFavorited}
          favoriteCounts={favoriteCounts}
        />
      ) : (
        <>
          <header className="gallery-header">
            <div className="header-left">
              <h1 className="gallery-title">Gallery</h1>
              <span className="artwork-count">{items.length} artwork{items.length !== 1 ? 's' : ''}</span>
            </div>
            <div className="header-actions">
              <div className="visitor-identity-pill" title={`Visitor identity: ${guestIdentity?.guestId || 'guest'}`}>
                <span className="visitor-identity-label">Visitor</span>
                <input
                  className="visitor-identity-input"
                  value={identityDraft}
                  onChange={(e) => setIdentityDraft(e.target.value)}
                  onBlur={saveIdentityName}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      e.preventDefault();
                      saveIdentityName();
                      e.currentTarget.blur();
                    }
                  }}
                  placeholder={displayName}
                  aria-label="Optional visitor display name"
                />
              </div>
              <button className="btn btn-secondary" onClick={() => setShowGuestbook((prev) => !prev)}>
                <span className="btn-icon">💬</span> Guestbook
              </button>
              {items.length > 0 && (
                <button className="btn btn-secondary" onClick={() => startSlideshow(0)}>
                  <span className="btn-icon">▶</span> Slideshow
                </button>
              )}
              <button className="btn btn-primary" onClick={() => setShowAddModal(true)}>
                <span className="btn-icon">+</span> Add Artwork
              </button>
            </div>
          </header>

          <div className="gallery-content-shell">
            <PdfCatalogExport items={items} />
            <PopularPiecesChart items={items} />
          </div>

          {showGuestbook && (
            <section className="guestbook-panel" aria-label="Guestbook">
              <div className="guestbook-header">
                <div>
                  <h2 className="guestbook-title">Guestbook</h2>
                  <p className="guestbook-subtitle">Leave a note for the collection or an artwork.</p>
                </div>
                <div className="guestbook-context-input-wrap">
                  <input
                    className="guestbook-context-input"
                    value={guestbookContext}
                    onChange={(e) => setGuestbookContext(e.target.value)}
                    placeholder="Collection context (e.g. Spring Show)"
                    aria-label="Guestbook context"
                  />
                </div>
              </div>
              <div className="guestbook-form">
                <textarea
                  className="guestbook-textarea"
                  value={guestbookDraft}
                  onChange={(e) => setGuestbookDraft(e.target.value)}
                  placeholder="Share your thoughts about this gallery..."
                  aria-label="Guestbook message"
                  rows={4}
                />
                <div className="guestbook-form-actions">
                  <span className="guestbook-attribution">Posting as {displayName}</span>
                  <button className="btn btn-primary" onClick={handlePostGuestbook} disabled={!guestbookDraft.trim()}>
                    Post Comment
                  </button>
                </div>
              </div>
              <div className="guestbook-list">
                {guestbookEntries.length === 0 ? (
                  <div className="guestbook-empty">No guestbook entries yet. Be the first to say hello.</div>
                ) : (
                  guestbookEntries.map((entry) => (
                    <article className="guestbook-entry" key={entry.id || entry._id || `${entry.guestId}-${entry.createdAt}`}>
                      <div className="guestbook-entry-meta">
                        <span className="guestbook-entry-author">{entry.authorName}</span>
                        <span className="guestbook-entry-context">{entry.context || 'Gallery collection'}</span>
                      </div>
                      <p className="guestbook-entry-message">{entry.message}</p>
                      <time className="guestbook-entry-time" dateTime={entry.createdAt}>
                        {new Date(entry.createdAt).toLocaleString()}
                      </time>
                    </article>
                  ))
                )}
              </div>
            </section>
          )}

          {items.length === 0 ? (
            <EmptyState onAdd={() => setShowAddModal(true)} />
          ) : (
            <ArtworkGrid
              items={items}
              onRemove={remove}
              onUpdate={update}
              onSlideshow={startSlideshow}
              onToggleFavorite={toggleFavorite}
              isFavorited={isFavorited}
              favoriteCounts={favoriteCounts}
            />
          )}
          {showAddModal && (
            <AddArtworkModal onAdd={add} onClose={() => setShowAddModal(false)} />
          )}
        </>
      )}
    </div>
  );
}

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