// DEPLOY_CONFIG: {"triggers": [{"name": "remind_review_card_if_stale", "on": "collection.update", "collection": "cards", "actions": [{"type": "email", "to": "{{owner_email}}", "subject": "Reminder to review your card", "body": "This is a reminder to review your card because it has not been updated in 6 months."}]}]}
import { useEffect, useMemo, useState } from 'react';
import { useAuth } from '@deplixo/sdk';
import { useCollection } from '@deplixo/sdk';
import { MedicalInfo } from './components/MedicalInfo.jsx';
import { EmergencyContacts } from './components/EmergencyContacts.jsx';
import { InsuranceInfo } from './components/InsuranceInfo.jsx';
import { CardView } from './components/CardView.jsx';

function App() {
  const { user, loading: authLoading, login, logout } = useAuth();
  const { items: ownerCards, loading: cardLoading, add, update } = useCollection('emergency-card', { personal: true });
  const { items: shareAccessItems, loading: shareLoading, add: addShareAccess, update: updateShareAccess, remove: removeShareAccess } = useCollection('emergency-card-share', { personal: true });
  const [activeTab, setActiveTab] = useState('card');
  const [shareName, setShareName] = useState('');
  const [shareEmail, setShareEmail] = useState('');
  const [shareRole, setShareRole] = useState('viewer');
  const [shareNote, setShareNote] = useState('');
  const [shareMessage, setShareMessage] = useState('');
  const [shareError, setShareError] = useState('');

  const tabs = [
    { id: 'card', label: '🪪 Card', icon: '🪪' },
    { id: 'medical', label: '🩺 Medical', icon: '🩺' },
    { id: 'contacts', label: '📞 Contacts', icon: '📞' },
    { id: 'insurance', label: '🏥 Insurance', icon: '🏥' },
  ];

  const ownerCard = useMemo(() => {
    if (!user) return null;
    return ownerCards?.find(card => card.ownerId === user.id) || null;
  }, [ownerCards, user]);

  const sharedAccess = useMemo(() => {
    if (!user) return [];
    return (shareAccessItems || [])
      .filter(item => item.ownerId === user.id)
      .sort((a, b) => new Date(b.createdAt || 0) - new Date(a.createdAt || 0));
  }, [shareAccessItems, user]);

  useEffect(() => {
    if (user && activeTab === 'card' && !ownerCard && !cardLoading) {
      const seedCard = {
        ownerId: user.id,
        ownerName: user.name,
        ownerEmail: user.email,
        ownerAvatar: user.avatar,
      };
      add(seedCard);
    }
  }, [add, activeTab, cardLoading, ownerCard, user]);

  const handleSignIn = async () => {
    if (login) {
      await login('google');
    }
  };

  const handleCreateShare = async (e) => {
    e.preventDefault();
    setShareMessage('');
    setShareError('');

    if (!user || !ownerCard) {
      setShareError('Create your emergency card first before sharing it.');
      return;
    }

    if (!shareEmail.trim()) {
      setShareError('Recipient email is required.');
      return;
    }

    const inviteToken = `card_${Math.random().toString(36).slice(2, 10)}_${Date.now().toString(36)}`;
    const sharePayload = {
      ownerId: user.id,
      cardId: ownerCard.id || null,
      recipientName: shareName.trim(),
      recipientEmail: shareEmail.trim().toLowerCase(),
      role: shareRole,
      note: shareNote.trim(),
      status: 'pending',
      inviteToken,
      inviteLink: `${window.location.origin}${window.location.pathname}#share=${inviteToken}`,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    };

    await addShareAccess(sharePayload);
    setShareName('');
    setShareEmail('');
    setShareRole('viewer');
    setShareNote('');
    setShareMessage('Invite created. Share the link or email it to your recipient.');
  };

  const handleSendInvite = async (shareItem) => {
    setShareMessage('');
    setShareError('');

    const updated = {
      ...shareItem,
      status: 'sent',
      updatedAt: new Date().toISOString(),
    };

    await updateShareAccess(shareItem.id, updated);
    setShareMessage(`Invite marked as sent to ${shareItem.recipientEmail}.`);
  };

  const handleCopyLink = async (link) => {
    try {
      await navigator.clipboard.writeText(link);
      setShareMessage('Share link copied to clipboard.');
      setShareError('');
    } catch {
      setShareError('Could not copy the link. Please copy it manually.');
    }
  };

  const handleRevoke = async (shareItem) => {
    setShareMessage('');
    setShareError('');
    await removeShareAccess(shareItem.id);
    setShareMessage(`Access revoked for ${shareItem.recipientEmail}.`);
  };

  const handleToggleAccess = async (shareItem) => {
    setShareMessage('');
    setShareError('');
    const nextStatus = shareItem.status === 'revoked' ? 'sent' : 'revoked';
    await updateShareAccess(shareItem.id, {
      ...shareItem,
      status: nextStatus,
      updatedAt: new Date().toISOString(),
    });
    setShareMessage(nextStatus === 'revoked' ? 'Access paused.' : 'Access restored.');
  };

  if (authLoading) return <div className="auth-gate">Signing in...</div>;

  if (!user) {
    return (
      <div className="auth-gate">
        <div className="auth-card">
          <div className="auth-icon">🆘</div>
          <h1>Emergency Card</h1>
          <p>Sign in with Google to securely access your private emergency card.</p>
          <button className="btn-primary" onClick={handleSignIn}>Sign in with Google</button>
        </div>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-icon">🆘</div>
        <div className="header-text">
          <h1>Emergency Card</h1>
          <p>Your personal medical & emergency info</p>
        </div>
        <button className="btn-share" onClick={logout}>Sign Out</button>
      </header>

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

      <main className="main-content">
        {activeTab === 'card' && (
          <div className="card-view fade-in">
            <div className="share-panel info-card">
              <div className="section-header">
                <h2 className="section-title">Share access</h2>
                <span className="share-count">{sharedAccess.length} shared</span>
              </div>
              <p className="share-help">Invite a doctor, caregiver, or travel companion to view your emergency card. You can copy a private link or manage access anytime.</p>

              <form className="share-form" onSubmit={handleCreateShare}>
                <div className="form-row">
                  <div className="form-group">
                    <label htmlFor="shareName">Recipient name</label>
                    <input
                      id="shareName"
                      name="shareName"
                      value={shareName}
                      onChange={(e) => setShareName(e.target.value)}
                      placeholder="Dr. Nguyen or Alex"
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="shareEmail">Recipient email</label>
                    <input
                      id="shareEmail"
                      name="shareEmail"
                      type="email"
                      value={shareEmail}
                      onChange={(e) => setShareEmail(e.target.value)}
                      placeholder="name@example.com"
                      required
                    />
                  </div>
                </div>

                <div className="form-row">
                  <div className="form-group">
                    <label htmlFor="shareRole">Access type</label>
                    <select id="shareRole" value={shareRole} onChange={(e) => setShareRole(e.target.value)}>
                      <option value="viewer">Viewer</option>
                      <option value="temporary">Temporary companion</option>
                      <option value="clinician">Doctor / clinician</option>
                    </select>
                  </div>
                  <div className="form-group">
                    <label htmlFor="shareNote">Note</label>
                    <input
                      id="shareNote"
                      value={shareNote}
                      onChange={(e) => setShareNote(e.target.value)}
                      placeholder="Trip dates, appointment context, etc."
                    />
                  </div>
                </div>

                <div className="form-actions share-actions">
                  <button type="submit" className="btn-primary" disabled={shareLoading || cardLoading}>
                    Generate invite link
                  </button>
                </div>
              </form>

              {shareMessage && <div className="share-banner success">{shareMessage}</div>}
              {shareError && <div className="share-banner error">{shareError}</div>}
            </div>

            <CardView ownerCard={ownerCard} ownerId={user.id} ownerName={user.name} />

            <section className="shared-access-section info-card">
              <div className="section-header">
                <h2 className="section-title">Shared access</h2>
              </div>

              {sharedAccess.length === 0 ? (
                <div className="empty-state empty-state-small">
                  <div className="empty-icon">🔒</div>
                  <h3>No shared access yet</h3>
                  <p>Create an invite above to share your card with someone you trust.</p>
                </div>
              ) : (
                <div className="shared-access-list">
                  {sharedAccess.map((item) => (
                    <div className="shared-access-item" key={item.id}>
                      <div className="shared-access-main">
                        <div className="shared-access-title-row">
                          <strong>{item.recipientName || item.recipientEmail}</strong>
                          <span className={`share-status ${item.status}`}>{item.status}</span>
                        </div>
                        <div className="shared-access-meta">
                          <span>{item.recipientEmail}</span>
                          <span>{item.role}</span>
                          {item.note ? <span>{item.note}</span> : null}
                        </div>
                        <a className="share-link" href={item.inviteLink} target="_blank" rel="noreferrer">
                          {item.inviteLink}
                        </a>
                      </div>
                      <div className="shared-access-actions">
                        <button className="btn-secondary-sm" onClick={() => handleCopyLink(item.inviteLink)}>Copy link</button>
                        <button className="btn-secondary-sm" onClick={() => handleSendInvite(item)}>Mark sent</button>
                        <button className="btn-secondary-sm" onClick={() => handleToggleAccess(item)}>
                          {item.status === 'revoked' ? 'Restore' : 'Pause'}
                        </button>
                        <button className="btn-danger-sm" onClick={() => handleRevoke(item)}>Revoke</button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </section>
          </div>
        )}
        {activeTab === 'medical' && <MedicalInfo ownerId={user.id} />}
        {activeTab === 'contacts' && <EmergencyContacts ownerId={user.id} />}
        {activeTab === 'insurance' && <InsuranceInfo ownerId={user.id} />}
      </main>
    </div>
  );
}

export default App;

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