// Connections page — Lodgify is the single booking source.
// Slate's revenue rule: payment cleared AND guest has checked in.
function ConnectionsPage({ store }) {
  const [connections, setConnections] = React.useState(() =>
    CONNECTIONS.filter(c => c.provider !== 'Airbnb')
  );
  const [syncing, setSyncing] = React.useState(null);
  const [pipelineOpen, setPipelineOpen] = React.useState(false);

  const pipeline = store.pipeline;
  const incomeTxns = store.transactions.filter(t => t.type === 'income');
  const pipelineTotal   = pipeline.reduce((s, b) => s + b.amount, 0);
  const pipelinePaid    = pipeline.filter(b => b.paymentStatus === 'Paid').reduce((s, b) => s + b.amount, 0);
  const pipelinePending = pipelineTotal - pipelinePaid;
  const collectedTotal  = incomeTxns.reduce((s, t) => s + t.amount, 0);

  const sync = (id) => {
    setSyncing(id);
    setTimeout(() => {
      setConnections(conns => conns.map(c => c.id === id ? { ...c, lastSynced: new Date().toISOString() } : c));
      setSyncing(null);
    }, 1200);
  };

  const toggleConnect = (id) => {
    setConnections(conns => conns.map(c => {
      if (c.id !== id) return c;
      if (c.status === 'connected') return { ...c, status: 'disconnected', lastSynced: null, accountLabel: null };
      return { ...c, status: 'connected', lastSynced: new Date().toISOString(), accountLabel: 'API key ••••••7f2a' };
    }));
  };

  const providers = {
    Lodgify: { color: '#1A8CEC', kind: 'All reservations (Airbnb, VRBO, Booking.com, Direct)', auth: 'API key' },
    Stripe: { color: '#635BFF', kind: 'Direct booking payments', auth: 'OAuth' },
    QuickBooks: { color: '#2CA01C', kind: 'Accounting export', auth: 'OAuth' },
  };

  const lodgify = connections.find(c => c.provider === 'Lodgify');

  return (
    <>
      <Topbar title="Connections" subtitle="Lodgify is Slate's single source of truth — one integration covers every channel"/>

      <div className="content" style={{ display: 'grid', gap: 20 }}>
        <BanksSection store={store}/>

        {/* Revenue rule banner */}
        <div className="card card-pad-lg" style={{ background: 'var(--bg-sunken)' }}>
          <div className="row" style={{ gap: 16, alignItems: 'flex-start' }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: 'var(--accent)', color: 'white',
              display: 'grid', placeItems: 'center', flexShrink: 0,
            }}>
              {React.cloneElement(Icon.check, { style: { width: 18, height: 18 } })}
            </div>
            <div style={{ flex: 1 }}>
              <div className="xs muted" style={{ letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 2 }}>Slate's revenue rule</div>
              <div className="serif" style={{ fontSize: 20, letterSpacing: '-0.01em', lineHeight: 1.3, fontWeight: 400 }}>
                Only count revenue when <span style={{ background: 'var(--accent-soft)', color: 'var(--accent)', padding: '0 6px', borderRadius: 4 }}>payment has cleared</span> <span className="muted">and</span> <span style={{ background: 'var(--accent-soft)', color: 'var(--accent)', padding: '0 6px', borderRadius: 4 }}>guest has checked in</span>.
              </div>
              <div className="small muted" style={{ marginTop: 6, lineHeight: 1.5 }}>
                Future bookings — even if prepaid — are tracked as pipeline, never as revenue.
                Slate is your source of truth for money actually collected.
              </div>
            </div>
          </div>
        </div>

        {/* Lodgify hero card + stats */}
        <div className="card card-pad-lg" style={{ overflow: 'hidden' }}>
          <div className="row between" style={{ alignItems: 'flex-start', marginBottom: 20 }}>
            <div className="row" style={{ gap: 16 }}>
              <div style={{
                width: 56, height: 56, borderRadius: 12,
                background: '#1A8CEC', color: 'white',
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500,
                boxShadow: '0 4px 12px color-mix(in oklab, #1A8CEC 25%, transparent)',
              }}>
                L
              </div>
              <div>
                <div className="row" style={{ gap: 10, marginBottom: 2 }}>
                  <div style={{ fontWeight: 600, fontSize: 17 }}>Lodgify</div>
                  <span className="pill" style={{
                    background: lodgify?.status === 'connected' ? 'var(--accent-soft)' : 'var(--bg-sunken)',
                    color: lodgify?.status === 'connected' ? 'var(--accent)' : 'var(--text-tertiary)',
                    borderColor: 'transparent',
                  }}>
                    <span className="dot" style={{ background: lodgify?.status === 'connected' ? 'var(--accent)' : 'var(--text-quaternary)' }}/>
                    {lodgify?.status === 'connected' ? 'Connected' : 'Not connected'}
                  </span>
                </div>
                <div className="small muted">All reservations · Airbnb, VRBO, Booking.com, Direct</div>
              </div>
            </div>
            <div className="row" style={{ gap: 8 }}>
              {lodgify?.status === 'connected' ? (
                <>
                  <button className="btn" onClick={() => sync(lodgify.id)} disabled={syncing === lodgify.id}>
                    <span style={{ display: 'inline-flex', animation: syncing === lodgify.id ? 'spin 0.8s linear infinite' : 'none' }}>
                      {React.cloneElement(Icon.sync, { style: { width: 13, height: 13 } })}
                    </span>
                    {syncing === lodgify.id ? 'Syncing…' : 'Sync now'}
                  </button>
                  <button className="btn ghost" onClick={() => toggleConnect(lodgify.id)} style={{ color: 'var(--expense)' }}>
                    Disconnect
                  </button>
                </>
              ) : (
                <button className="btn accent" onClick={() => toggleConnect('lodgify')}>
                  {Icon.link} Connect Lodgify
                </button>
              )}
            </div>
          </div>

          {/* Stats row */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--border)', border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
            <StatBlock
              label="Counted as revenue"
              value={fmt$(collectedTotal, { compact: true })}
              sub={`${incomeTxns.length} reservations · paid & checked in`}
              emphasis
            />
            <StatBlock
              label="Pipeline — excluded"
              value={fmt$(pipelineTotal, { compact: true })}
              sub={`${pipeline.length} upcoming bookings`}
              onClick={() => setPipelineOpen(true)}
              clickable
            />
            <StatBlock
              label="API key"
              value={lodgify?.accountLabel || '—'}
              sub={`Auth · ${providers.Lodgify.auth}`}
              mono
            />
            <StatBlock
              label="Last sync"
              value={syncing === lodgify?.id ? 'Syncing…' : lodgify?.lastSynced ? relativeTime(lodgify.lastSynced) : '—'}
              sub={`${lodgify?.imported || 0} transactions imported all-time`}
            />
          </div>

          {/* Filter rule display */}
          <div style={{ marginTop: 20, padding: 16, background: 'var(--bg-sunken)', borderRadius: 8, border: '1px dashed var(--border)' }}>
            <div className="xs muted" style={{ letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>Sync filter</div>
            <div style={{ fontFamily: 'var(--font-mono, ui-monospace, "SF Mono", monospace)', fontSize: 12.5, lineHeight: 1.7, color: 'var(--text-secondary)' }}>
              <span style={{ color: 'var(--text-tertiary)' }}>WHERE</span>{' '}
              <span style={{ color: 'var(--text)' }}>reservation.status</span>{' = '}
              <span style={{ color: 'var(--accent)' }}>'Booked'</span><br/>
              <span style={{ color: 'var(--text-tertiary)', paddingLeft: 12 }}>AND</span>{' '}
              <span style={{ color: 'var(--text)' }}>payment.status</span>{' = '}
              <span style={{ color: 'var(--accent)' }}>'Paid'</span><br/>
              <span style={{ color: 'var(--text-tertiary)', paddingLeft: 12 }}>AND</span>{' '}
              <span style={{ color: 'var(--text)' }}>check_in_date</span>{' ≤ '}
              <span style={{ color: 'var(--accent)' }}>today ({TODAY})</span>
            </div>
          </div>

          {/* Channel breakdown */}
          <div style={{ marginTop: 20 }}>
            <div className="xs muted" style={{ letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>Channels synced via Lodgify</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {[
                { name: 'Airbnb',         color: '#FF5A5F', count: incomeTxns.filter(t => t.category === 'Airbnb').length },
                { name: 'Lodgify',        color: '#1A8CEC', count: incomeTxns.filter(t => t.category === 'Lodgify').length },
                { name: 'Direct booking', color: '#6E9B8F', count: incomeTxns.filter(t => t.category === 'Direct booking').length },
              ].map(ch => (
                <div key={ch.name} className="row" style={{ gap: 8, padding: '6px 12px', background: 'var(--bg-sunken)', borderRadius: 100, fontSize: 12.5 }}>
                  <span className="dot" style={{ background: ch.color, width: 8, height: 8 }}/>
                  <span style={{ fontWeight: 500 }}>{ch.name}</span>
                  <span className="tabular muted">{ch.count}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Supporting integrations */}
        <div>
          <h3 style={{ fontSize: 13, fontWeight: 500, textTransform: 'uppercase', letterSpacing: 0.5, color: 'var(--text-tertiary)', margin: '0 0 12px' }}>
            Supporting integrations
          </h3>
          <div className="grid cols-2">
            {connections.filter(c => c.provider !== 'Lodgify').map(c => {
              const p = providers[c.provider] || {};
              const isSyncing = syncing === c.id;
              return (
                <div key={c.id} className="card card-pad-lg">
                  <div className="row between" style={{ alignItems: 'flex-start' }}>
                    <div className="row" style={{ gap: 14 }}>
                      <div style={{
                        width: 44, height: 44, borderRadius: 10,
                        background: c.status === 'connected' ? p.color : 'var(--bg-sunken)',
                        color: c.status === 'connected' ? 'white' : 'var(--text-tertiary)',
                        display: 'grid', placeItems: 'center',
                        fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 500,
                        border: c.status === 'connected' ? 0 : '1px solid var(--border)',
                      }}>
                        {c.provider[0]}
                      </div>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 15 }}>{c.provider}</div>
                        <div className="xs muted">{p.kind}</div>
                      </div>
                    </div>
                    <span className="pill" style={{
                      background: c.status === 'connected' ? 'var(--accent-soft)' : 'var(--bg-sunken)',
                      color: c.status === 'connected' ? 'var(--accent)' : 'var(--text-tertiary)',
                      borderColor: 'transparent',
                    }}>
                      <span className="dot" style={{ background: c.status === 'connected' ? 'var(--accent)' : 'var(--text-quaternary)' }}/>
                      {c.status === 'connected' ? 'Connected' : 'Not connected'}
                    </span>
                  </div>

                  <div className="row" style={{ gap: 8, marginTop: 16 }}>
                    {c.status === 'connected' ? (
                      <>
                        <button className="btn" onClick={() => sync(c.id)} disabled={isSyncing}>
                          <span style={{ display: 'inline-flex', animation: isSyncing ? 'spin 0.8s linear infinite' : 'none' }}>
                            {React.cloneElement(Icon.sync, { style: { width: 13, height: 13 } })}
                          </span>
                          {isSyncing ? 'Syncing…' : 'Sync now'}
                        </button>
                        <button className="btn ghost" onClick={() => toggleConnect(c.id)} style={{ color: 'var(--expense)' }}>
                          Disconnect
                        </button>
                      </>
                    ) : (
                      <button className="btn accent" onClick={() => toggleConnect(c.id)}>
                        {Icon.link} Connect {c.provider}
                      </button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Pipeline drawer */}
      {pipelineOpen && (
        <PipelineDrawer onClose={() => setPipelineOpen(false)} pipeline={pipeline} houses={store.houses}
                        totalPaid={pipelinePaid} totalPending={pipelinePending} total={pipelineTotal}/>
      )}
    </>
  );
}

Object.assign(window, { ConnectionsPage });