import { useEffect, useMemo, useRef, useState } from 'react';
import { generatePDF, useAuth, useCollection } from '@deplixo/sdk';
import { StatsHeader } from './components/StatsHeader.jsx';
import { WishlistView } from './components/WishlistView.jsx';
import { AddItemModal } from './components/AddItemModal.jsx';

const COLLECTION_OPTIONS = [
  { value: 'birthday', label: 'Birthday', emoji: '🎂' },
  { value: 'holiday', label: 'Holiday', emoji: '🎄' },
  { value: 'self', label: 'Self', emoji: '💖' },
];

function App() {
  const { user, loading: authLoading, logout } = useAuth();
  const [showModal, setShowModal] = useState(false);
  const [editItem, setEditItem] = useState(null);
  const [activeCollection, setActiveCollection] = useState('all');
  const [isPublicView, setIsPublicView] = useState(false);
  const [publicShareId, setPublicShareId] = useState('');
  const [shareLinkCopied, setShareLinkCopied] = useState(false);
  const [pdfExporting, setPdfExporting] = useState(false);
  const reportRef = useRef(null);
  const { items, loading, add, update, remove } = useCollection('wishlist', { personal: true });

  useEffect(() => {
    const readModeFromLocation = () => {
      if (typeof window === 'undefined') return;
      const url = new URL(window.location.href);
      const share = url.searchParams.get('share');
      const mode = url.searchParams.get('mode');
      setPublicShareId(share || '');
      setIsPublicView(Boolean(share || mode === 'shared'));
    };

    readModeFromLocation();
    window.addEventListener('popstate', readModeFromLocation);
    return () => window.removeEventListener('popstate', readModeFromLocation);
  }, []);

  useEffect(() => {
    setShowModal(false);
    setEditItem(null);
  }, [isPublicView]);

  const handleEdit = (item) => {
    if (isPublicView) return;
    setEditItem(item);
    setShowModal(true);
  };

  const handleClose = () => {
    setShowModal(false);
    setEditItem(null);
  };

  const handleSave = async (data) => {
    if (isPublicView) return;
    if (editItem) {
      await update(editItem.id, data);
    } else {
      await add(data);
    }
    handleClose();
  };

  const normalizedItems = useMemo(() => {
    return (items || []).map((item) => ({
      ...item,
      collection: item.collection || 'self',
    }));
  }, [items]);

  const filteredItems = useMemo(() => {
    if (activeCollection === 'all') return normalizedItems;
    return normalizedItems.filter((item) => item.collection === activeCollection);
  }, [normalizedItems, activeCollection]);

  const groupedItems = useMemo(() => {
    return COLLECTION_OPTIONS.reduce((acc, option) => {
      acc[option.value] = normalizedItems.filter((item) => item.collection === option.value);
      return acc;
    }, {});
  }, [normalizedItems]);

  const statsSummary = useMemo(() => {
    const totalWishlistValue = filteredItems.reduce((sum, item) => {
      const target = Number(item.target_price) || 0;
      return sum + target;
    }, 0);

    const readyToBuyCount = filteredItems.filter((item) => {
      const current = Number(item.current_price);
      const target = Number(item.target_price);
      return Number.isFinite(current) && Number.isFinite(target) && current <= target;
    }).length;

    const closestDeal = filteredItems.reduce((best, item) => {
      const current = Number(item.current_price);
      const target = Number(item.target_price);
      if (!Number.isFinite(current) || !Number.isFinite(target)) return best;
      const gap = Math.max(current - target, 0);
      if (!best || gap < best.gap) {
        return { name: item.name || 'Unnamed item', gap };
      }
      return best;
    }, null);

    return {
      totalItems: filteredItems.length,
      totalWishlistValue,
      readyToBuyCount,
      closestDeal,
    };
  }, [filteredItems]);

  const buildShareUrl = () => {
    if (typeof window === 'undefined') return '';
    const url = new URL(window.location.href);
    url.searchParams.set('share', publicShareId || 'wishlist');
    url.searchParams.set('mode', 'shared');
    return url.toString();
  };

  const handleShare = async () => {
    const shareUrl = buildShareUrl();
    if (!shareUrl) return;

    try {
      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(shareUrl);
        setShareLinkCopied(true);
        window.setTimeout(() => setShareLinkCopied(false), 2000);
      }
    } catch (error) {
      window.open(shareUrl, '_blank', 'noopener,noreferrer');
    }
  };

  const handleExportPDF = async () => {
    if (typeof window === 'undefined' || !reportRef.current || pdfExporting) return;

    try {
      setPdfExporting(true);
      await generatePDF(reportRef.current, {
        filename: 'wishlist.pdf',
        margin: 10,
      });
    } finally {
      setPdfExporting(false);
    }
  };

  if (authLoading) {
    return (
      <div className="app-shell auth-state">
        <div className="empty-state">
          <div className="empty-icon">✨</div>
          <h2 className="empty-title">Signing you in...</h2>
          <p className="empty-text">Please wait while we load your wishlist.</p>
        </div>
      </div>
    );
  }

  if (isPublicView) {
    return (
      <div className="app-shell public-view-shell">
        <header className="app-header">
          <div className="header-content">
            <span className="header-icon">💝</span>
            <h1 className="header-title">Shared Wishlist</h1>
          </div>
          <div className="public-badge">Read-only view</div>
        </header>

        <div className="public-share-banner">
          <div>
            <h2 className="public-share-title">This wishlist is publicly shared</h2>
            <p className="public-share-text">Visitors can view items but cannot edit or add anything.</p>
          </div>
          <button className="btn-secondary" onClick={handleShare}>Copy Share Link</button>
        </div>

        <div className="collection-tabs" role="tablist" aria-label="Wishlist collections">
          <button
            className={`collection-tab ${activeCollection === 'all' ? 'active' : ''}`}
            onClick={() => setActiveCollection('all')}
          >
            All
          </button>
          {COLLECTION_OPTIONS.map((option) => (
            <button
              key={option.value}
              className={`collection-tab ${activeCollection === option.value ? 'active' : ''}`}
              onClick={() => setActiveCollection(option.value)}
            >
              <span className="collection-emoji">{option.emoji}</span>
              {option.label}
            </button>
          ))}
        </div>

        <div ref={reportRef} className="pdf-export-report">
          <div className="pdf-report-header">
            <h2>Shared Wishlist Report</h2>
            <p>Generated from the current filtered wishlist view.</p>
          </div>
          <StatsHeader items={filteredItems} loading={loading} />
          <WishlistView
            items={filteredItems}
            loading={loading}
            onEdit={handleEdit}
            onRemove={() => {}}
            onAdd={() => {}}
            groupedItems={groupedItems}
            activeCollection={activeCollection}
            collectionOptions={COLLECTION_OPTIONS}
            readOnly={true}
            publicView={true}
          />
        </div>
        <button className="fab fab-disabled" aria-label="Sharing disabled in public view" disabled>
          <span>+</span>
        </button>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-shell auth-state">
        <header className="app-header">
          <div className="header-content">
            <span className="header-icon">💝</span>
            <h1 className="header-title">My Wishlist</h1>
          </div>
        </header>
        <div className="auth-card">
          <div className="auth-hero">🎁</div>
          <h2 className="auth-title">Sign in to manage your wishlist</h2>
          <p className="auth-text">
            Use Google sign-in to keep your wishlist personal and synced to your account.
          </p>
          <div className="auth-note">You’ll be redirected to Deplixo’s login page to continue.</div>
        </div>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <span className="header-icon">💝</span>
          <h1 className="header-title">My Wishlist</h1>
        </div>
        <div className="user-bar">
          <span className="user-greeting">Welcome, {user.name}</span>
          <button className="btn-secondary user-logout" onClick={logout}>Sign Out</button>
        </div>
      </header>

      <div className="share-toolbar">
        <button className="btn-secondary" onClick={handleShare}>
          {shareLinkCopied ? 'Link Copied' : 'Copy Public Share Link'}
        </button>
        <button className="btn-secondary" onClick={handleExportPDF} disabled={pdfExporting}>
          {pdfExporting ? 'Exporting PDF...' : 'Export PDF'}
        </button>
      </div>

      <div className="collection-tabs" role="tablist" aria-label="Wishlist collections">
        <button
          className={`collection-tab ${activeCollection === 'all' ? 'active' : ''}`}
          onClick={() => setActiveCollection('all')}
        >
          All
        </button>
        {COLLECTION_OPTIONS.map((option) => (
          <button
            key={option.value}
            className={`collection-tab ${activeCollection === option.value ? 'active' : ''}`}
            onClick={() => setActiveCollection(option.value)}
          >
            <span className="collection-emoji">{option.emoji}</span>
            {option.label}
          </button>
        ))}
      </div>

      <div ref={reportRef} className="pdf-export-report">
        <div className="pdf-report-header">
          <h2>My Wishlist Report</h2>
          <p>Export includes your current filtered items and summary stats.</p>
        </div>
        <StatsHeader items={filteredItems} loading={loading} />
        <WishlistView
          items={filteredItems}
          loading={loading}
          onEdit={handleEdit}
          onRemove={remove}
          onAdd={() => setShowModal(true)}
          groupedItems={groupedItems}
          activeCollection={activeCollection}
          collectionOptions={COLLECTION_OPTIONS}
          readOnly={false}
          publicView={false}
        />
        {showModal && (
          <AddItemModal
            editItem={editItem}
            onSave={handleSave}
            onClose={handleClose}
            collectionOptions={COLLECTION_OPTIONS}
          />
        )}
      </div>
      <button className="fab" onClick={() => setShowModal(true)} aria-label="Add item">
        <span>+</span>
      </button>
    </div>
  );
}

export default App;

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