// AppDetail — viewing/editing an existing app, with quick metrics and entry into the Flow

const AppDetail = ({ app, apps, onRoute, onUpdate, onDelete }) => {
  const { BRANDS, COUNTRY_FLAGS, COUNTRY_NAMES, LOCALES, StatusPill, CopyableUrl, Toggle } = window;

  const liveBase = app.domain && (app.domain.startsWith('http') ? app.domain : 'https://' + app.domain);
  const adUrl = liveBase ? `${liveBase}/?utm_source=facebook&utm_medium=paid&utm_campaign=${app.id}_v1&fbclid={{ad.id}}` : '';

  const editApp = () => onRoute({ page: 'edit', appId: app.id });

  return (
    <div className="page step-anim">
      <div className="page-head">
        <div style={{
          width: 56, height: 56, borderRadius: 13,
          background: 'linear-gradient(135deg, #ff00ff 0%, #00ffff 100%)',
          display: 'grid', placeItems: 'center', fontSize: 28,
          boxShadow: '0 6px 18px -6px rgba(255,0,255,0.4)',
        }}>{app.icon}</div>
        <div>
          <h1>{app.name}</h1>
          <div className="desc" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <code className="mono" style={{ background: 'var(--bg-3)', padding: '2px 7px', borderRadius: 4, color: 'var(--text-dim)' }}>{app.id}</code>
            <StatusPill status={app.status} enabled={app.enabled} />
            <span style={{ color: BRANDS[app.brand]?.color }}>{BRANDS[app.brand]?.name}</span>
          </div>
        </div>
        <div className="right">
          <Toggle on={app.enabled} lg onChange={(v) => onUpdate({ ...app, enabled: v, status: v ? 'live' : 'deployed' })} />
          <button className="btn secondary" onClick={editApp}>
            <window.IconSettings size={13} />Edit settings
          </button>
        </div>
      </div>

      {/* Quick stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 22 }}>
        <div className="stat">
          <div className="label">Installs · 7d</div>
          <div className="v">{window.fmtNum(app.installs7d)}</div>
          <div className="sub">+12% vs prev week</div>
        </div>
        <div className="stat">
          <div className="label">Leads · 7d</div>
          <div className="v">{window.fmtNum(app.leads7d)}</div>
          <div className="sub">{Math.round((app.leads7d / Math.max(app.installs7d, 1)) * 100)}% conversion</div>
        </div>
        <div className="stat">
          <div className="label">FTDs · 7d</div>
          <div className="v" style={{ color: 'var(--purple)' }}>{window.fmtNum(app.ftds7d)}</div>
          <div className="sub">€{window.fmtNum((app.ftds7d || 0) * 42)} est. revenue</div>
        </div>
        <div className="stat">
          <div className="label">Cost per FTD</div>
          <div className="v" style={{ color: 'var(--accent)' }}>€{app.ftds7d > 0 ? Math.round(app.installs7d * 0.34 / app.ftds7d) : '—'}</div>
          <div className="sub">across active campaigns</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 18 }}>
        <div>
          <div className="panel" style={{ marginBottom: 18 }}>
            <div className="panel-head">
              <h2>Routing</h2>
              <span style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'JetBrains Mono, monospace', background: 'var(--bg-3)', padding: '2px 8px', borderRadius: 10 }}>{app.geos.length} GEOs</span>
            </div>
            <table className="data">
              <thead>
                <tr>
                  <th style={{ width: 30 }}></th>
                  <th>Country</th>
                  <th>Destination</th>
                  <th>Override</th>
                </tr>
              </thead>
              <tbody>
                {app.geos.map(g => {
                  const url = app.geoRoutes?.[g] || app.defaultUrl;
                  const isOverride = url !== app.defaultUrl;
                  return (
                    <tr key={g}>
                      <td style={{ fontSize: 18 }}>{COUNTRY_FLAGS[g]}</td>
                      <td>
                        <div>{COUNTRY_NAMES[g]}</div>
                        <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{g}</div>
                      </td>
                      <td><code style={{ fontSize: 11, color: isOverride ? 'var(--text)' : 'var(--muted)' }}>{url || '—'}</code></td>
                      <td>{isOverride ? <span className="pill live">OVERRIDE</span> : <span className="pill" style={{ fontSize: 10 }}>DEFAULT</span>}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {liveBase && (
            <div className="panel" style={{ marginBottom: 18 }}>
              <div className="panel-head">
                <h2>Live URLs</h2>
              </div>
              <div className="field">
                <label>Live URL</label>
                <CopyableUrl value={liveBase} accent />
              </div>
              <div className="field" style={{ marginBottom: 0 }}>
                <label>FB Ads URL</label>
                <CopyableUrl value={adUrl} />
              </div>
            </div>
          )}
        </div>

        <div>
          <div className="panel" style={{ marginBottom: 18 }}>
            <div className="panel-head"><h2>Tracking</h2></div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <TrackRow ic="📘" label="Meta Pixel" val={app.metaPixelId} />
              <TrackRow ic="🔔" label="OneSignal"  val={app.oneSignalId} />
              <TrackRow ic="📊" label="GA4"        val={app.gaId} />
            </div>
          </div>

          <div className="panel" style={{ marginBottom: 18 }}>
            <div className="panel-head"><h2>Languages</h2></div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {app.locales.map(l => (
                <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5 }}>
                  <code style={{ background: 'var(--bg-3)', padding: '2px 8px', borderRadius: 4, fontSize: 11 }}>{l}</code>
                  <span style={{ flex: 1 }}>{LOCALES[l]?.label}</span>
                  {l === app.defaultLocale && <span className="pill live" style={{ fontSize: 10 }}>DEFAULT</span>}
                </div>
              ))}
            </div>
          </div>

          {app.note && (
            <div className="panel" style={{ marginBottom: 18 }}>
              <div className="panel-head"><h2>Note</h2></div>
              <div style={{ fontSize: 13, color: 'var(--text-dim)', lineHeight: 1.6 }}>{app.note}</div>
            </div>
          )}

          <div className="panel" style={{ borderColor: 'rgba(255,90,110,0.2)' }}>
            <div className="panel-head">
              <h2 style={{ color: 'var(--danger)' }}>Danger zone</h2>
            </div>
            <p style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 12 }}>
              Removes the config from KV. Pages projects + R2 assets are not deleted automatically.
            </p>
            <button className="btn danger" onClick={() => onDelete(app)}>
              <window.IconTrash size={13} />Delete app
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

const TrackRow = ({ ic, label, val }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--line-soft)' }}>
    <span style={{ fontSize: 16 }}>{ic}</span>
    <span style={{ fontSize: 12.5, color: 'var(--muted)', minWidth: 80 }}>{label}</span>
    <span style={{ flex: 1, textAlign: 'right' }}>
      {val ? (
        <code style={{ fontSize: 11, color: 'var(--text)' }}>{val.length > 22 ? val.slice(0, 10) + '…' + val.slice(-8) : val}</code>
      ) : (
        <span style={{ color: 'var(--muted-2)', fontSize: 11.5 }}>not set</span>
      )}
    </span>
  </div>
);

window.AppDetail = AppDetail;