Organisation Branding

class OrganisationBrandingDisplay {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.baseUrl = 'https://api.{region}.veridox.ai';
    this.logoUrl = null;
    this.expiresAt = null;
  }

  /**
   * Load organisation logo
   * @returns {Promise<string|null>} Logo URL or null if not found
   */
  async loadLogo() {
    try {
      const response = await fetch(`${this.baseUrl}/organisation/branding`, {
        headers: {
          'X-API-Key': this.apiKey
        }
      });

      if (response.status === 404) {
        console.log('No organisation logo uploaded');
        this.logoUrl = null;
        return null;
      }

      if (!response.ok) {
        const error = await response.json();
        throw new Error(`Failed to load logo: ${error.error_message}`);
      }

      const data = await response.json();
      this.logoUrl = data.download_url;
      this.expiresAt = new Date(data.expires_at);

      console.log('Logo loaded, expires at:', this.expiresAt);
      return this.logoUrl;

    } catch (error) {
      console.error('Failed to load organisation logo:', error);
      throw error;
    }
  }

  /**
   * Check if current logo URL is still valid
   * @returns {boolean} True if URL is still valid
   */
  isLogoUrlValid() {
    if (!this.expiresAt) return false;
    return new Date() < this.expiresAt;
  }

  /**
   * Get logo URL, refreshing if expired
   * @returns {Promise<string|null>} Valid logo URL
   */
  async getValidLogoUrl() {
    if (!this.logoUrl || !this.isLogoUrlValid()) {
      await this.loadLogo();
    }
    return this.logoUrl;
  }
}

// React Component Example
function OrganisationLogo({ apiKey, className = 'org-logo', fallbackText = 'Org' }) {
  const [logoUrl, setLogoUrl] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function loadLogo() {
      try {
        const branding = new OrganisationBrandingDisplay(apiKey);
        const url = await branding.loadLogo();
        setLogoUrl(url);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    loadLogo();
  }, [apiKey]);

  if (loading) return <div className="logo-loading">Loading...</div>;
  if (error) return <div className="logo-error">{fallbackText}</div>;

  return logoUrl ? (
    <img
      src={logoUrl}
      alt="Organisation Logo"
      className={className}
      onError={() => setLogoUrl(null)} // Fallback on load error
    />
  ) : (
    <div className={`${className} logo-fallback`}>
      {fallbackText}
    </div>
  );
}

// Handle different API key error scenarios
async function handleBrandingRequest(apiKey) {
  try {
    const response = await fetch('/api/organisation/branding', {
      headers: { 'X-API-Key': apiKey }
    });

    if (!response.ok) {
      const error = await response.json();

      switch (error.error_code) {
        case 'request.authentication.api-key.invalid':
          throw new Error('Invalid API key. Please check your key format.');
        case 'request.authentication.api-key.expired':
          throw new Error('API key has expired. Please generate a new key.');
        case 'request.authentication.api-key.membership-invalid':
          throw new Error('API key is no longer valid. Please contact your administrator.');
        case 'request.not-found':
          // No logo uploaded - this is expected
          return null;
        default:
          throw new Error(error.error_message || 'Unknown error occurred');
      }
    }

    return await response.json();
  } catch (error) {
    console.error('Branding API error:', error);
    throw error;
  }
}