import { useState, useCallback } from 'react';
import { useAI, useAuth, useBroadcast, useCollection, useNotifications, usePresence, sendEmail } from '@deplixo/sdk';
import { ProfileSetup } from './components/ProfileSetup.jsx';
import { ExchangeBoard } from './components/ExchangeBoard.jsx';
import { Matches } from './components/Matches.jsx';
import { MyProfile } from './components/MyProfile.jsx';

function App() {
  const { user, loading, login, logout } = useAuth();
  const { items: profiles, loading: profilesLoading, add, update } = useCollection('language_profiles', { personal: true });
  const { items: loungeItems, loading: loungeLoading, add: addLounge, update: updateLounge } = useCollection('chat_lounges', { personal: true });
  const { items: loungeMessageItems, loading: loungeMessagesLoading, add: addLoungeMessage } = useCollection('chat_lounge_messages', { personal: true });
  const { items: introItems, loading: introLoading, add: addIntro, update: updateIntro } = useCollection('match_intros', { personal: true });
  const { notifications, unreadCount, send: sendNotification, markRead, loading: notificationsLoading } = useNotifications();
  const { generate, loading: aiLoading, error: aiError } = useAI();
  const [activeTab, setActiveTab] = useState('board');
  const [editMode, setEditMode] = useState(false);
  const [loungeName, setLoungeName] = useState('');
  const [joinedLoungeId, setJoinedLoungeId] = useState('');
  const [messageText, setMessageText] = useState('');
  const [matchSuggestions, setMatchSuggestions] = useState([]);
  const [matchLoading, setMatchLoading] = useState(false);
  const [matchError, setMatchError] = useState('');
  const [notifiedMatchIds, setNotifiedMatchIds] = useState([]);
  const [introModalMatch, setIntroModalMatch] = useState(null);
  const [introDraft, setIntroDraft] = useState('');
  const [introGenerating, setIntroGenerating] = useState(false);
  const [introSending, setIntroSending] = useState(false);
  const [introStatusMessage, setIntroStatusMessage] = useState('');
  const presence = usePresence(
    user
      ? {
          name: user.name,
          avatar: user.avatar,
          status: 'online',
        }
      : { name: 'Guest', avatar: '', status: 'offline' }
  );

  const onlineUsers = presence?.users || [];
  const activeLounge = loungeItems?.find(lounge => lounge.id === joinedLoungeId) || null;
  const loungeMessages = (loungeMessageItems || []).filter(message => message.loungeId === joinedLoungeId);
  const sentIntros = introItems || [];

  const handleLoungeBroadcast = useCallback((data, authorId) => {
    if (!data?.loungeId || data.loungeId !== joinedLoungeId) return;
    if (data.type === 'message' || data.type === 'join' || data.type === 'create') {
      addLoungeMessage({
        loungeId: data.loungeId,
        authorId: data.authorId || authorId || 'system',
        authorName: data.authorName || 'Anonymous',
        authorAvatar: data.authorAvatar || '',
        type: data.type,
        text: data.text || '',
        createdAt: data.createdAt || new Date().toISOString(),
      });
    }
  }, [joinedLoungeId, addLoungeMessage]);

  const { send: sendLoungeBroadcast } = useBroadcast('lounge-message', handleLoungeBroadcast);

  const userProfile = profiles?.find(profile => profile.userId === user?.id) || null;

  const buildIntroPrompt = useCallback((match, profile) => {
    const myName = user?.name || 'User';
    const partnerName = match?.userName || 'your match';
    const myNative = profile?.nativeLanguage || 'unspecified';
    const myLearning = profile?.learningLanguage || 'unspecified';
    const partnerNative = match?.nativeLanguage || 'unspecified';
    const partnerLearning = match?.learningLanguage || 'unspecified';
    return [
      `Write a warm, concise email introduction for two matched language partners.`,
      `Sender name: ${myName}`,
      `Recipient name: ${partnerName}`,
      `Sender native language: ${myNative}`,
      `Sender learning language: ${myLearning}`,
      `Recipient native language: ${partnerNative}`,
      `Recipient learning language: ${partnerLearning}`,
      `Tone: friendly, encouraging, and practical.`,
      `Include a short greeting, why they were matched, and a simple invitation to reply and start practicing.`,
      `Keep it under 180 words.`,
    ].join('\n');
  }, [user?.name]);

  const handleOpenIntro = useCallback(async match => {
    setIntroModalMatch(match || null);
    setIntroStatusMessage('');
    setIntroDraft('');
    if (!match) return;

    const existingIntro = sentIntros.find(item => item.matchUserId === match.userId && item.senderId === user?.id);
    if (existingIntro?.introHtml) {
      setIntroDraft(existingIntro.introHtml);
      return;
    }

    setIntroGenerating(true);
    try {
      const prompt = buildIntroPrompt(match, userProfile);
      const result = await generate({
        system: 'You create short, friendly email introductions for language exchange partners.',
        user: prompt,
        json: true,
      });
      const html = typeof result === 'string'
        ? result
        : (result?.html || result?.emailHtml || result?.body || '');
      setIntroDraft(html || `<h1>Hi ${match?.userName || 'there'}</h1><p>I’d love to introduce you to a new language exchange partner.</p>`);
    } catch (error) {
      setIntroDraft(`<h1>Hi ${match?.userName || 'there'}</h1><p>You’ve been matched with a language exchange partner. Reply to start practicing together.</p>`);
    } finally {
      setIntroGenerating(false);
    }
  }, [buildIntroPrompt, generate, sentIntros, user?.id, userProfile]);

  const refreshMatchSuggestions = useCallback(async () => {
    if (!user || !profiles) return;
    setMatchLoading(true);
    setMatchError('');

    try {
      const preferencesSummary = userProfile
        ? [
            `Native language: ${userProfile.nativeLanguage || 'unspecified'}`,
            `Learning language: ${userProfile.learningLanguage || 'unspecified'}`,
            `Timezone: ${userProfile.timezone || 'unspecified'}`,
            `Preferred practice style: ${userProfile.practiceStyle || 'unspecified'}`,
            `Availability: ${userProfile.availability || 'unspecified'}`,
          ].join('\n')
        : 'No profile found yet. Use whatever is available in the user profile data.';

      const candidateProfiles = (profiles || [])
        .filter(profile => profile.userId !== user.id)
        .map(profile => ({
          userId: profile.userId || '',
          userName: profile.userName || 'Anonymous',
          nativeLanguage: profile.nativeLanguage || '',
          learningLanguage: profile.learningLanguage || '',
          timezone: profile.timezone || '',
          practiceStyle: profile.practiceStyle || '',
          availability: profile.availability || '',
          goals: profile.goals || '',
          bio: profile.bio || '',
          avatar: profile.userAvatar || profile.avatar || '',
        }));

      const response = await generateMatchSuggestions({
        userName: user.name,
        userPreferences: preferencesSummary,
        candidates: candidateProfiles,
      });

      const parsed = Array.isArray(response) ? response : (response?.matches || response?.suggestions || []);
      setMatchSuggestions(parsed.slice(0, 5));
    } catch (error) {
      setMatchError('Unable to generate AI matchmaking suggestions right now.');
    } finally {
      setMatchLoading(false);
    }
  }, [profiles, user, userProfile]);

  const { send: sendMatchRefreshBroadcast } = useBroadcast('match-refresh', async () => {});

  useEffect(() => {
    if (user && activeTab === 'matches' && profiles && !profilesLoading) {
      refreshMatchSuggestions();
    }
  }, [activeTab, profiles, profilesLoading, refreshMatchSuggestions, user]);

  useEffect(() => {
    if (!user || !matchSuggestions.length || !profiles?.length) return;

    const matchedIds = new Set([
      ...(matchSuggestions || []).map(match => match?.userId).filter(Boolean),
      ...(notifiedMatchIds || []),
    ]);

    const targetProfiles = (profiles || []).filter(profile => matchedIds.has(profile.userId));
    if (!targetProfiles.length) return;

    const onlineIds = new Set((onlineUsers || []).map(person => person.id).filter(Boolean));
    const availableMatches = targetProfiles.filter(profile => onlineIds.has(profile.userId));

    const notifyAvailableMatches = async () => {
      for (const profile of availableMatches) {
        if (!profile?.userId || (notifiedMatchIds || []).includes(profile.userId)) continue;
        await sendNotification({
          to: user.id,
          title: 'Good match is online',
          body: `${profile.userName || 'A recommended partner'} is now available to chat.`,
        });
        setNotifiedMatchIds(prev => (prev.includes(profile.userId) ? prev : [...prev, profile.userId]));
      }
    };

    notifyAvailableMatches();
  }, [matchSuggestions, notifiedMatchIds, onlineUsers, profiles, sendNotification, user]);

  const handleMatchBroadcast = useCallback((data) => {
    if (!data?.type || data.type !== 'match-refresh' || data.userId !== user?.id) return;
    if (Array.isArray(data.suggestions)) {
      setMatchSuggestions(data.suggestions);
    }
  }, [user?.id]);

  useBroadcast('match-refresh', handleMatchBroadcast);

  const handleSendIntroEmail = useCallback(async () => {
    if (!user || !introModalMatch?.userId) return;
    setIntroSending(true);
    setIntroStatusMessage('');
    try {
      const recipientProfile = profiles?.find(profile => profile.userId === introModalMatch.userId) || null;
      const recipientEmail = recipientProfile?.userEmail || recipientProfile?.email || '';
      const senderName = user.name || 'A language exchange member';
      const recipientName = introModalMatch.userName || recipientProfile?.userName || 'there';
      const subject = `Intro from ${senderName} via LangBridge`;
      const html = introDraft || `<h1>Hi ${recipientName}</h1><p>${senderName} would love to connect and start practicing together.</p>`;

      if (!recipientEmail) {
        throw new Error('Recipient email unavailable');
      }

      if (typeof sendEmail === 'function') {
        await sendEmail({
          to: recipientEmail,
          subject,
          html,
        });
      }

      const payload = {
        senderId: user.id,
        senderName: senderName,
        senderEmail: user.email || '',
        matchUserId: introModalMatch.userId,
        matchUserName: recipientName,
        recipientEmail,
        subject,
        introHtml: html,
        sentAt: new Date().toISOString(),
        status: 'sent',
      };

      const created = await addIntro(payload);
      if (created?.id) {
        await updateIntro(created.id, { ...payload, id: created.id });
      }

      await sendNotification({
        to: user.id,
        title: 'Intro email sent',
        body: `Your introduction email to ${recipientName} has been sent.`,
      });

      setIntroStatusMessage('Intro email sent successfully.');
      setIntroModalMatch(null);
      setIntroDraft('');
    } catch (error) {
      setIntroStatusMessage('Unable to send intro email right now.');
    } finally {
      setIntroSending(false);
    }
  }, [addIntro, introDraft, introModalMatch, profiles, sendNotification, user, updateIntro]);

  if (loading) {
    return (
      <div className="loading-screen">
        <div className="loading-globe">🌍</div>
        <p>Connecting you to the world...</p>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-shell auth-shell">
        <header className="app-header">
          <div className="header-brand">
            <span className="brand-icon">🗣️</span>
            <h1>LangBridge</h1>
            <span className="brand-tagline">Language Exchange Board</span>
          </div>
        </header>

        <main className="auth-landing">
          <div className="auth-card">
            <div className="auth-hero-icon">🌍</div>
            <h2>Sign in with Google</h2>
            <p>
              Create your language exchange profile, browse partners, and find matching learners.
            </p>
            <button className="btn-cta google-auth-btn" onClick={login}>
              Continue with Google
            </button>
          </div>
        </main>
      </div>
    );
  }

  const tabs = [
    { id: 'board', label: 'Exchange Board', icon: '🌐' },
    { id: 'matches', label: 'My Matches', icon: '🤝' },
    { id: 'lounge', label: 'Chat Lounge', icon: '💬' },
    { id: 'profile', label: 'My Profile', icon: '👤' },
  ];

  const handleSaveProfile = async profileData => {
    const payload = {
      ...profileData,
      userId: user.id,
      userName: user.name,
      userEmail: user.email,
      userAvatar: user.avatar,
      updatedAt: new Date().toISOString(),
    };

    if (userProfile?.id) {
      await update(userProfile.id, payload);
    } else {
      await add({
        ...payload,
        createdAt: new Date().toISOString(),
      });
    }

    setEditMode(false);
    setActiveTab('profile');
  };

  const handleEditProfile = () => {
    setActiveTab('profile');
    setEditMode(true);
  };

  const handleCreateLounge = async e => {
    e.preventDefault();
    const name = loungeName.trim();
    if (!name) return;

    const newLounge = {
      name,
      createdBy: user.id,
      createdByName: user.name,
      createdByAvatar: user.avatar,
      createdAt: new Date().toISOString(),
      memberIds: [user.id],
    };

    const created = await addLounge(newLounge);
    const createdId = created?.id || created?.data?.id || '';

    if (createdId) {
      setJoinedLoungeId(createdId);
      sendLoungeBroadcast({
        type: 'create',
        loungeId: createdId,
        authorId: user.id,
        authorName: user.name,
        authorAvatar: user.avatar,
        text: `${user.name} created lounge "${name}"`,
        createdAt: new Date().toISOString(),
      });
    }

    setLoungeName('');
    setActiveTab('lounge');
  };

  const handleJoinLounge = async lounge => {
    setJoinedLoungeId(lounge.id);
    const nextMembers = Array.from(new Set([...(lounge.memberIds || []), user.id]));
    if (lounge.id) {
      await updateLounge(lounge.id, { ...lounge, memberIds: nextMembers, updatedAt: new Date().toISOString() });
    }
    sendLoungeBroadcast({
      type: 'join',
      loungeId: lounge.id,
      authorId: user.id,
      authorName: user.name,
      authorAvatar: user.avatar,
      text: `${user.name} joined ${lounge.name}`,
      createdAt: new Date().toISOString(),
    });
    setActiveTab('lounge');
  };

  const handleSendMessage = async e => {
    e.preventDefault();
    const text = messageText.trim();
    if (!text || !joinedLoungeId) return;

    const payload = {
      loungeId: joinedLoungeId,
      authorId: user.id,
      authorName: user.name,
      authorAvatar: user.avatar,
      type: 'message',
      text,
      createdAt: new Date().toISOString(),
    };

    await addLoungeMessage(payload);
    sendLoungeBroadcast(payload);
    setMessageText('');
  };

  if (profilesLoading || loungeLoading || loungeMessagesLoading || notificationsLoading || introLoading) {
    return (
      <div className="loading-screen">
        <div className="loading-globe">🌍</div>
        <p>Loading your profile...</p>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-brand">
          <span className="brand-icon">🗣️</span>
          <h1>LangBridge</h1>
          <span className="brand-tagline">Language Exchange Board</span>
        </div>
        <div className="header-user-actions">
          <div className="presence-summary">
            <span className="presence-status-dot online" />
            <span>{onlineUsers.length} online now</span>
          </div>
          <div className="notifications-chip" title="Notifications">
            <span className="notifications-icon">🔔</span>
            <span>{unreadCount} unread</span>
          </div>
          <div className="header-user-chip">
            {user.avatar ? <img src={user.avatar} alt={user.name} className="header-user-avatar" /> : <span>👤</span>}
            <span>{user.name}</span>
          </div>
          <button className="btn-clear-filters" onClick={logout}>Sign Out</button>
        </div>
      </header>

      <nav className="tab-nav">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => { setActiveTab(tab.id); setEditMode(false); }}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label}</span>
          </button>
        ))}
      </nav>

      <main className="app-main">
        <NotificationCenter notifications={notifications || []} unreadCount={unreadCount} markRead={markRead} />
        {editMode && (
          <ProfileSetup
            user={user}
            profile={userProfile}
            onDone={handleSaveProfile}
            onCancel={() => setEditMode(false)}
          />
        )}
        {!editMode && activeTab === 'board' && <ExchangeBoard user={user} onCreateProfile={() => setEditMode(true)} />}
        {!editMode && activeTab === 'matches' && (
          <section className="matches-view card">
            <div className="matches-header">
              <div>
                <h2>AI Matchmaking Suggestions</h2>
                <p>
                  Recommendations are based on language pair compatibility, timezone overlap, and your profile preferences.
                </p>
              </div>
              <button className="btn-cta" onClick={refreshMatchSuggestions} disabled={matchLoading}>
                {matchLoading ? 'Analyzing...' : 'Refresh Suggestions'}
              </button>
            </div>

            {matchError ? <p className="error match-error">{matchError}</p> : null}
            {aiError ? <p className="error match-error">{aiError}</p> : null}
            {introStatusMessage ? <p className="match-success">{introStatusMessage}</p> : null}

            {!userProfile ? (
              <div className="match-empty-state">
                <p>Complete your profile to get personalized match recommendations.</p>
                <button className="btn-save" onClick={() => setEditMode(true)}>
                  Create Profile
                </button>
              </div>
            ) : (
              <div className="match-suggestions-list">
                {matchSuggestions.length > 0 ? (
                  matchSuggestions.map((match, index) => (
                    <MatchSuggestionCard
                      key={match.userId || match.id || `${match.userName}-${index}`}
                      match={match}
                      onIntro={() => handleOpenIntro(match)}
                    />
                  ))
                ) : (
                  <div className="match-empty-state">
                    <p>No suggestions yet. Generate a fresh set of AI recommendations.</p>
                  </div>
                )}
              </div>
            )}
          </section>
        )}
        {!editMode && activeTab === 'lounge' && (
          <section className="lounge-view card">
            <div className="lounge-header">
              <div>
                <h2>Group Chat Lounge</h2>
                <p>Create a lounge, join others, and chat live with broadcast updates.</p>
              </div>
              <PresenceRoster users={onlineUsers} title="Live online" />
            </div>

            <form className="lounge-create-form" onSubmit={handleCreateLounge}>
              <input
                value={loungeName}
                onChange={e => setLoungeName(e.target.value)}
                placeholder="Create a new lounge name"
                className="lounge-input"
              />
              <button className="btn-cta" type="submit">Create Lounge</button>
            </form>

            <div className="lounge-grid">
              <div className="lounge-panel">
                <h3>Available Lounges</h3>
                <div className="lounge-list">
                  {(loungeItems || []).map(lounge => (
                    <button key={lounge.id} className={`lounge-item ${joinedLoungeId === lounge.id ? 'active' : ''}`} onClick={() => handleJoinLounge(lounge)}>
                      <strong>{lounge.name}</strong>
                      <span>{(lounge.memberIds || []).length} members</span>
                    </button>
                  ))}
                </div>
              </div>

              <div className="lounge-panel lounge-chat-panel">
                <h3>{activeLounge ? activeLounge.name : 'Select a lounge to start chatting'}</h3>
                <div className="lounge-messages">
                  {loungeMessages.map(message => (
                    <div key={message.id || `${message.authorId}-${message.createdAt}-${message.text}`} className="lounge-message">
                      {message.authorAvatar ? <img src={message.authorAvatar} alt={message.authorName} className="lounge-message-avatar" /> : <span className="lounge-message-avatar placeholder">👤</span>}
                      <div>
                        <strong>{message.authorName}</strong>
                        <p>{message.text}</p>
                      </div>
                    </div>
                  ))}
                </div>
                <form className="lounge-send-form" onSubmit={handleSendMessage}>
                  <input value={messageText} onChange={e => setMessageText(e.target.value)} placeholder="Type a message..." className="lounge-input" disabled={!joinedLoungeId} />
                  <button className="btn-save" type="submit" disabled={!joinedLoungeId}>Send</button>
                </form>
              </div>
            </div>
          </section>
        )}
        {!editMode && activeTab === 'profile' && <MyProfile user={user} profile={userProfile} onEdit={handleEditProfile} onlineUsers={onlineUsers} />}
        <MatchIntroModal
          isOpen={!!introModalMatch}
          match={introModalMatch}
          draftHtml={introDraft}
          generating={introGenerating}
          sending={introSending}
          onClose={() => setIntroModalMatch(null)}
          onChangeDraft={setIntroDraft}
          onGenerate={() => introModalMatch ? handleOpenIntro(introModalMatch) : null}
          onSend={handleSendIntroEmail}
        />
      </main>
    </div>
  );
}

export { App };

function PresenceRoster({ users = [], title = 'Online now' }) {
  return (
    <div className="presence-roster card">
      <div className="presence-roster-header">
        <h3>{title}</h3>
        <span className="presence-roster-count">{users.length}</span>
      </div>
      <div className="presence-roster-list">
        {users.map(user => (
          <div key={user.id} className="presence-user-pill" title={user.name}>
            <span className={`presence-status-dot ${user.status === 'online' ? 'online' : 'offline'}`} />
            {user.avatar ? <img src={user.avatar} alt={user.name} className="presence-user-avatar" /> : null}
            <span>{user.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}


function MatchSuggestionCard({ match, onIntro }) {
  const score = typeof match?.score === 'number' ? match.score : null;
  const reasons = Array.isArray(match?.reasons) ? match.reasons : [];
  const overlap = match?.timezoneOverlap || match?.overlap || 'Good overlap';

  return (
    <article className="match-suggestion-card card">
      <div className="match-suggestion-topline">
        <div className="match-avatar-wrap">
          {match?.avatar ? <img src={match.avatar} alt={match.userName || 'Suggested partner'} className="match-avatar" /> : <span className="match-avatar placeholder">👤</span>}
        </div>
        <div className="match-main-copy">
          <div className="match-name-row">
            <h3>{match?.userName || 'Suggested Partner'}</h3>
            {score !== null ? <span className="match-score-pill">{score}% match</span> : null}
          </div>
          <p className="match-languages">
            {match?.nativeLanguage ? `${match.nativeLanguage} native` : 'Language data unavailable'}
            {match?.learningLanguage ? ` • learning ${match.learningLanguage}` : ''}
          </p>
          <p className="match-timezone">Timezone overlap: {overlap}</p>
        </div>
      </div>

      {match?.summary ? <p className="match-summary">{match.summary}</p> : null}

      {reasons.length > 0 ? (
        <ul className="match-reasons">
          {reasons.map((reason, index) => (
            <li key={`${reason}-${index}`}>{reason}</li>
          ))}
        </ul>
      ) : null}

      <div className="match-actions">
        {match?.userId ? <button className="btn-save" type="button" onClick={onIntro}>Send Intro Email</button> : null}
      </div>
    </article>
  );
}


function NotificationCenter({ notifications = [], unreadCount = 0, markRead }) {
  return (
    <section className="notification-center card">
      <div className="notification-center-header">
        <div>
          <h2>Notifications</h2>
          <p>Updates about recommended partners, matches, and activity.</p>
        </div>
        <span className="notification-badge">{unreadCount} unread</span>
      </div>

      <div className="notification-list">
        {notifications.length > 0 ? notifications.map(notification => (
          <button
            key={notification.id}
            type="button"
            className={`notification-item ${notification.read ? 'read' : 'unread'}`}
            onClick={() => markRead(notification.id)}
          >
            <div className="notification-item-topline">
              <strong>{notification.title}</strong>
              {!notification.read ? <span className="notification-dot" /> : null}
            </div>
            <p>{notification.body}</p>
          </button>
        )) : (
          <div className="notification-empty-state">
            <p>No notifications yet.</p>
          </div>
        )}
      </div>
    </section>
  );
}


function MatchIntroModal({ isOpen, match, draftHtml = '', generating = false, sending = false, onClose, onChangeDraft, onGenerate, onSend }) {
  if (!isOpen || !match) return null;

  return (
    <div className="match-intro-modal-backdrop" role="dialog" aria-modal="true" aria-label="Send introduction email">
      <div className="match-intro-modal card">
        <div className="match-intro-modal-header">
          <div>
            <h3>Send intro email</h3>
            <p>Review the AI-drafted introduction before sending it to your match.</p>
          </div>
          <button type="button" className="btn-clear-filters" onClick={onClose}>Close</button>
        </div>

        <div className="match-intro-recipient">
          <strong>Recipient:</strong>
          <span>{match.userName || 'Suggested Partner'}</span>
        </div>

        <div className="match-intro-actions-row">
          <button type="button" className="btn-cta" onClick={onGenerate} disabled={generating || sending}>
            {generating ? 'Generating...' : 'Regenerate draft'}
          </button>
          <button type="button" className="btn-save" onClick={onSend} disabled={sending || generating || !draftHtml}>
            {sending ? 'Sending...' : 'Confirm & Send'}
          </button>
        </div>

        <label className="match-intro-editor-label">
          Email draft
          <textarea
            className="match-intro-editor"
            value={draftHtml}
            onChange={e => onChangeDraft(e.target.value)}
            rows="10"
            placeholder="AI-generated introduction email will appear here"
          />
        </label>

        <p className="match-intro-help">
          This uses the Deplixo email SDK on the client to initiate the send action.
        </p>
      </div>
    </div>
  );
}

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