// DEPLOY_CONFIG: {"triggers": [{"name": "fetch_product_details_proxy", "on": "collection.add", "collection": "product_link_requests", "actions": [{"type": "email", "to": "backend-proxy@deplixo.local", "subject": "Proxy request to fetch product details", "body": "When a user pastes a product link, call the external product API server-side, store the response, and return sanitized product details to the client. This avoids CORS and keeps the external API client-exposed data hidden."}]}]}
import { useEffect, useMemo, useState } from 'react';
import { useCollection, useIdentity, share } from '@deplixo/sdk';
import { RegistryList } from './components/RegistryList.jsx';
import { RegistryDetail } from './components/RegistryDetail.jsx';
import { AddRegistry } from './components/AddRegistry.jsx';
import { AddItem } from './components/AddItem.jsx';
import { GuestView } from './components/GuestView.jsx';

function App() {
  const [view, setView] = useState('list');
  const [activeRegistry, setActiveRegistry] = useState(null);
  const [showAddRegistry, setShowAddRegistry] = useState(false);
  const [showAddItem, setShowAddItem] = useState(false);
  const [editingItem, setEditingItem] = useState(null);
  const [guestRegistryId, setGuestRegistryId] = useState(null);
  const [shareRegistry, setShareRegistry] = useState(null);
  const [shareCopied, setShareCopied] = useState(false);

  const registries = useCollection('registries', { personal: true });
  const items = useCollection('registry_items', { personal: true });

  const openRegistry = (reg) => {
    setActiveRegistry(reg);
    setView('detail');
    setGuestRegistryId(null);
  };

  const openGuestView = (regId) => {
    setGuestRegistryId(regId);
    setView('guest');
    setActiveRegistry(null);
  };

  const goHome = () => {
    setView('list');
    setActiveRegistry(null);
    setGuestRegistryId(null);
    setShareRegistry(null);
    setShareCopied(false);
  };

  const getShareUrl = (registryId) => {
    if (typeof window === 'undefined') return '';
    return `${window.location.origin}${window.location.pathname}?registry=${encodeURIComponent(registryId)}`;
  };

  const copyShareUrl = async (registryId) => {
    const url = getShareUrl(registryId);
    try {
      await navigator.clipboard.writeText(url);
      setShareCopied(true);
      window.setTimeout(() => setShareCopied(false), 2000);
    } catch {
      window.prompt('Copy this registry link', url);
    }
  };

  const openShare = (reg) => {
    setShareRegistry(reg);
    setShareCopied(false);
  };

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const registryId = params.get('registry');
    if (!registryId || !registries?.items) return;

    const matched = registries.items.find((reg) => String(reg.id) === String(registryId));
    if (matched) {
      setActiveRegistry(matched);
      setView('detail');
    } else {
      setGuestRegistryId(registryId);
      setView('guest');
    }
  }, [registries?.items]);

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-inner">
          {view !== 'list' && (
            <button className="back-btn" onClick={goHome}>← Back</button>
          )}
          <h1 className="app-title">🎁 Gift Registry</h1>
          <p className="app-subtitle">Create & share wishlists for any occasion</p>
        </div>
      </header>
      <main className="app-main">
        {view === 'list' && (
          <RegistryList
            registries={registries}
            items={items}
            onOpen={openRegistry}
            onAdd={() => setShowAddRegistry(true)}
            onGuestView={openGuestView}
            onShare={openShare}
          />
        )}
        {view === 'detail' && activeRegistry && (
          <RegistryDetail
            registry={activeRegistry}
            allItems={items}
            onAddItem={() => { setEditingItem(null); setShowAddItem(true); }}
            onEditItem={(item) => { setEditingItem(item); setShowAddItem(true); }}
            onGuestView={() => openGuestView(activeRegistry.id)}
            onShare={() => openShare(activeRegistry)}
          />
        )}
        {view === 'guest' && guestRegistryId && (
          <GuestView
            registryId={guestRegistryId}
            registries={registries}
            allItems={items}
          />
        )}
      </main>
      {showAddRegistry && (
        <AddRegistry
          registries={registries}
          onClose={() => setShowAddRegistry(false)}
          onCreated={(reg) => { setShowAddRegistry(false); openRegistry(reg); }}
        />
      )}
      {showAddItem && activeRegistry && (
        <AddItem
          items={items}
          registryId={activeRegistry.id}
          editingItem={editingItem}
          onClose={() => { setShowAddItem(false); setEditingItem(null); }}
        />
      )}
      {shareRegistry && (
        <div className="modal-overlay" onClick={() => setShareRegistry(null)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <div className="modal-header">
              <h2>Share Registry</h2>
              <button className="modal-close" onClick={() => setShareRegistry(null)}>×</button>
            </div>
            <div className="modal-form">
              <label className="form-label">
                Share link
                <input className="form-input" readOnly value={getShareUrl(shareRegistry.id)} />
              </label>
              <div className="guest-identity-actions">
                <button className="btn-primary" onClick={() => copyShareUrl(shareRegistry.id)}>
                  {shareCopied ? 'Copied!' : 'Copy Link'}
                </button>
                <button
                  className="btn-secondary"
                  onClick={async () => {
                    const url = getShareUrl(shareRegistry.id);
                    if (navigator.share) {
                      try {
                        await navigator.share({
                          title: shareRegistry.name || 'Gift Registry',
                          text: 'Check out this gift registry',
                          url,
                        });
                      } catch {
                        // user cancelled or sharing not available
                      }
                    } else {
                      await copyShareUrl(shareRegistry.id);
                    }
                  }}
                >
                  Share Options
                </button>
              </div>
              <p className="guest-identity-status">Anyone with this link can open the registry guest view.</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

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